Разбирайте CSS в JavaScript с учетом селектора

Я хочу создать что-то, что могло бы использовать файл .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. Какие библиотеки могут быть наиболее перспективными? (Или что-то подобное уже существует?)


javascript css css-modules glamorous css-parsing
person Alan H.    schedule 22.09.2017    source источник
comment
вы ищете developer.mozilla.org/en/docs/Web/ API/окно/getComputedStyle ? Просто подключите файл CSS в iframe, создайте там элементы и получите их стили.   -  person smnbbrv    schedule 22.09.2017
comment
Возможно, developer.mozilla.org/en-US/docs/Web/API /CSSStyleSheet может помочь. . .   -  person Alan Larimer    schedule 22.09.2017
comment
Мне не нужен getComputedStyle — он возвращает огромный список вычисляемых свойств.   -  person Alan H.    schedule 22.09.2017
comment
CSSStyleSheet, однако, является очень интересным API и может быть полезен, хотя я надеялся сделать это в Node без среды браузера.   -  person Alan H.    schedule 22.09.2017
comment
хм, если подумать, CSSRule, кажется, предлагает свойство CSSRule.cssText только для получения правила — он даже не отделяет селектор от свойств стиля, не говоря уже о представлении их в формате JavaScript. :/   -  person Alan H.    schedule 22.09.2017

Ответы (1)


arrow_upward
1
arrow_downward

Это должно быть возможно, используя некоторые из различных 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';

но, к сожалению, я не могу вспомнить, какие загрузчики использовались для этого.

person Brett DeWoody    schedule 28.09.2017