我想构建一些可以使用 .css
文件的东西,返回一个函数,该函数将采用类名数组并返回将应用于具有这些类名的元素的样式,作为JavaScript 对象。 (这样的工具适合与 Glamour、Fela 或其他 CSS-in-JS 技术一起使用。)
例如,如果您有这个 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。哪些图书馆最有希望去看看? (或者,是否已经存在这样的东西?)
最佳答案
这应该可以使用一些不同的 npm
包。
例如,css-object-loader
package 允许您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';
但不幸的是,我不记得使用了哪些加载程序来执行此操作。
关于javascript - 使用选择器感知将 CSS 解析为 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46369157/