CSSをセレクタ認識付きのJavaScriptに解析する

Question

.cssファイルを消費するようなものを作成したい場合は、クラス名の配列を取り、そのクラス名を持つ要素に適用されるスタイルをJavaScriptとして返す関数を返します。オブジェクト。 （。このようなツールはグラマー、FELA、または他のCSS-で-JS技術での使用に適しているであろう）

例えば、あなたはこのCSSファイルがある場合：

.btn { 
    border: 1px solid gray; 
} 

.btn.primary { 
    background: blue; 
    border-color: blue; 
} 

.btn-group { 
    display: inline-block; 
} 

を、あなたのような何かを行うことができますこの：我々は唯一の.btn.primaryに適用されるどのようなスタイル尋ねたので、この例では

import css from "./btn.css"; 
import applicableStyles from "applicable-styles"; // what I want to build 

const btnStyles = applicableStyles(css, ['btn', 'primary']); 

// Expected value: 
{ 
    border: "1px solid gray" 
    background: "blue"; 
    border-color: "blue"; 
} 

、.btn-groupは無視されます。

これは私の新しい領域ですが、私はそこにCSSを解析するツールがあることを知っています。どのような図書館が最も有望であろうか？ （または、すでにこのようなものが存在していますか？）

Answer 1

これは、さまざまなパッケージのいくつかを使用して可能になるはずです。

たとえば、css-object-loaderパッケージでは、require.cssファイルを使用できます。このファイルは、セレクタに対応するキーを持つオブジェクトに変換され、アクセスできます。

p { 
    font-size: 14px; 
} 

h1 { 
    text-indent: 20px; 
} 

.centered { 
    width: 100%; 
    margin: 0 auto; 
} 

var selectors = require('./rules.css'); 

// Get the 
selectors['.centered'] 

私も見てきたSCSSは次のように、importで非構造：

import {btn, primary} from './btn.scss'; 

残念ながら私は、ローダーはこれを実行するために使用されたか覚えていないことができます。