解析CSS轉換爲JavaScript與選擇的意識

我想建立的東西，可能消耗.css返回文件，將採取類名稱的數組，並返回一個適用於與類名的元素的樣式的功能，作爲一個JavaScript目的。（這樣的工具將是適合與魅力，費拉，或其它CSS-在-JS技術的使用。）解析CSS轉換爲JavaScript與選擇的意識

例如，如果你有這樣的CSS文件：

.btn { 
    border: 1px solid gray; 
} 

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

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

，那麼你可以這樣做這樣的：

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被忽略，因爲我們只要求將適用於.btn.primary什麼樣的風格。

這是我的新領域，但我知道有解析CSS的工具。哪些庫可能最有希望看一看？（或者，像這樣的東西已經存在了嗎？）

來源

2017-09-22 Alan H.

你在尋找https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle？只需在iframe中連接CSS文件，在那裏創建元素並獲得他們的樣式 – smnbbrv

也許https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet可能會有所幫助。。。 –

我不想getComputedStyle - 它返回一個巨大的計算屬性列表。然而 –

這應該可以使用一些各種npm軟件包。

例如，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';

但不幸的是我不記得是什麼裝載機被用來做這個。

來源

2017-09-28 09:37:11

解析CSS轉換爲JavaScript與選擇的意識

回答

相關問題