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

Question

我想构建一些可以使用 .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。哪些图书馆最有希望去看看？ (或者，是否已经存在这样的东西？)

Answer 1

这应该可以使用一些不同的 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';

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