Разобрать CSS в JavaScript с поддержкой выбора

Question

Я хочу построить что-то, что может потреблять .css file возвращает функцию, которая будет принимать массив имен классов и возвращать стили, которые будут применяться к элементу с этими именами классов, как объект 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';

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