1

我想构建一个可以使用.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 的工具。哪些图书馆最有希望看看？（或者，这样的东西已经存在了吗？）

4

1 回答 1

1

这应该可以使用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-28T09:37:11.693 回答