Анализатор CSS для JavaScript?

Я хотел бы проанализировать blob CSS в AST, чтобы я мог добавлять префиксы к некоторым директивам CSS.

Есть ли синтаксический анализатор CSS для JavaScript или Node, который будет делать это?

Я искал NPM. Единственный полезный результат, который я нашел, - parser-lib, но он основан на потоках, и похоже, что мне нужно будет написать собственный эмиттер для каждого CSS node.

Обновление: я также нашел JSCSSP, но у него нет документации...

Ответы

Ответ 1

Обновление: Ранее я упоминал АОССП, который, как представляется, не работает. Очевидно, что css module на NPM является лучшим:

css = require 'css'

input = '''
  body {
    font-family: sans-serif;
  }
  #thing.foo p.bar {
    font-weight: bold;
  }
'''

obj = css.parse input
sheet = obj.stylesheet

for rule in sheet.rules
  rule.selectors = ('#XXX ' + s for s in rule.selectors)

console.log css.stringify(obj)

Вывод:

#XXX body {
  font-family: sans-serif;
}
#XXX #thing.foo p.bar {
  font-weight: bold;
}

Ответ 2

Также стоит упомянуть LESS. Хотя это прежде всего (фантастическое) расширение для CSS, парсер LESS дает вам доступ к AST.

Чистая таблица стилей CSS также является допустимой таблицей стилей LESS, поэтому вы можете начать с того, что у вас есть, и облегчить доступ к расширениям LESS.

Ответ 3

Для чего это стоит JSDOM использует CSSOM.

Ответ 4

Вот наш открытый синтаксический анализатор CSS css.js

Вот простой пример синтаксического анализа:

<script type="text/javascript">
    var cssString = ' .someSelector { margin:40px 10px; padding:5px}';
    //initialize parser object
    var parser = new cssjs();
    //parse css string
    var parsed = parser.parseCSS(cssString);

    console.log(parsed);
</script>

Чтобы выровнять анализируемую структуру данных в строку CSS после редактирования

var newCSSString = parser.getCSSForEditor(parsed);

Основные функции нашего анализатора CSS:

  • Легкий.
  • Он выводит легко понятный объект javascript. Нет сложного АСТ.
  • Он тестируется на боях (и тестируется отдельно) и постоянно используется в наших продуктах (JotForm Form Designer).
  • Он поддерживает медиа-запросы, ключевые кадры и правила шрифта.
  • Он сохраняет комментарии при разборе.