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包允许您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';

但不幸的是，我无法记住曾经使用过的装载机。

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

1 个答案: