解析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与选择的意识

回答

相关问题