使用选择器感知将 CSS 解析为 JavaScript

Question

我想构建一些可以使用 .css 文件的东西 return 一个函数，该函数将采用 class 名称数组和 return 将应用的样式到具有这些 class 名称的元素，作为 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。哪些图书馆最有希望去看看？（或者，这样的东西已经存在了吗？）

Answer 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']

我也在 import 看到 SCSS 被解构，比如：

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

但不幸的是，我不记得使用什么加载程序来执行此操作。

使用选择器感知将 CSS 解析为 JavaScript

Parse CSS into JavaScript with selector awareness

javascript

css

css-parsing

css-modules

glamorous