Парсим CSS

Парсим CSS
Роман Дворнов
Avito
Екатеринбург, сентябрь 2016

Руководитель  
фронтенда в Avito
Основной интерес – SPA
Open source: 
basis.js, CSSO,  
component-inspector,  
csstree и другие
За любую движуху,  
кроме голодовки ;)

Зачем парсить CSS?

Много CSS, пишут люди, много спек,
разная поддержка браузерами, все
меняется и т.д.
4
Modern CSS is hard

Инструменты
• Пре-/пост-процессинг
• Форматирование
• Валидация и линтирование
• Подсказки
• Генерация гайдбуков, тестов
• Оптимизация и сжатие
• …
5

Для всего этого нужно хорошо
понимать структуру CSS
6

.rule {
property: value;
}
7
CSS в вакууме – все просто
👌

Мы все еще недостаточно
знаем о CSS
8

9
Светлая сторона
Все хорошо знают и часто
используют
Знают очень опытные  
или копипаста
Темная сторона
Тайное экспертное знание, может
даже (пока) нигде не работает
Новое
CSS
Уже с нами

CSS не так прост
• at-rules @media, @supports, @font-face, …
• необязательные кавычки url(…), [name=value], …
• сложные функции calc(), var(), attr(), …
• экранирование
• bad-url, bad-string…
• …
10

11
#31 + 2 {
content: "hello
world";
background: url(p(4).jpg)
}
Валидный ли CSS?

11
#31 + 2 {
content: "hello
world";
background: url(p(4).jpg)
}
Валидный ли CSS?
Да, совершенно валидный!
Э – экранирование

12
#31 + 2 {
content: "hello
world";
background: url(p(4).jpg);
}
Экранирование
drafts.csswg.org/cssom/#the-css.escape()-method
В идентификаторах, именах
классов, атрибутов и т.д.
можно использовать любые
символы, если экранировать,
даже придумали метод для
этого – CSS.escape()
CSS.escape('1 + 2') === '31 + 2'

13
#31 +2 {
content: "hello
world";
}
www.w3.org/TR/CSS22/grammar.html#grammar
Можно экранировать
перевод строки в строках,  
прям как в JavaScript ;)

14
#31 +2 {
content: "hello
world";
}
www.w3.org/TR/CSS22/grammar.html#grammar
Можно экранировать
специальные символы  
в url()

15
Браузер поймет правильно
А вот парсер инспектора стилей в Chrome DevTools
написан плохо

16
.simple {
--color: green;
border: 1px solid var(--color, red);
}
CSS Custom Properties
www.w3.org/TR/css-variables/#using-variables

17
.complex {
--bg: url('..') no-repeat, bottom 10px right url(..);
background: var(--bg, bottom url('..'), left), red;
}
CSS Custom Properties
Переменная может вставить любую часть значения,
даже запятые, как и fallback
www.w3.org/TR/css-variables/#using-variables

18
@supports (display: flex) {
.simple {
display: flex;
}
}
@supports

19
.simple {
display: flex;
}
}
@supports
Декларация

20
.simple {
display: flex;
}
}
@supports
Декларация
Тоже декларация

21
@supports (background: top calc(25% + 2px) !important) {
…
}
@supports
Браузер может не верно ответить на вопрос,
но синтаксис разрешает все,  
что можно в декларации, даже !important
www.w3.org/TR/css3-conditional/#at-supports

Синтаксис CSS меняется
• Расширяется
• Корректируется
• Добавляются новые конструкции
22

23
:not(a.foo) { ... }
:not(a):not(b) { ... }
:not()
Было можно указывать только простые селекторы
www.w3.org/TR/css3-selectors/#negation

24
:not(a, b) { ... } /* :not(a):not(b) */
img:not(a *) { ... } /* изображение не внутри ссылки */
:not()
CSS Selectors Level 4 разрешил список любых селекторов,
уже поддерживается в Safari 9+
drafts.csswg.org/selectors-4/#negation
tinyurl.com/Webkit-Complex-Selectors

25
:nth-child(1 of p img) { ... } /* первый <img> в <p> */
:nth-last-child(2n + 1 of .foo, .bar) { ... }
:nth-child()/:nth-last-child()
CSS Selectors Level 4 и тут разрешил список любых селекторов,
тоже поддерживается в Safari 9+
tinyurl.com/Webkit-Complex-Selectors
drafts.csswg.org/selectors-4/#the-nth-child-pseudo

26
.attr {
width: attr(name %, var(--default-width, calc(50% + 2em)));
}
attr()
CSS Values and Units Module Level 4 разрешает attr() в любом
месте + тип или единица изменения + fallback значение
drafts.csswg.org/css-values/#attr-notation
Пока никем не поддерживается и в состоянии at risk

Самое «вкусное»
• Баги браузеров
• Хаки _property, value !ie, 9, …
• Легаси префиксы, ﬁlter, expression(), …
27

28
_property: value; // IE6
property: value !ie; // IE ≤ 7
property: value9; // IE 6-8
// Chrome ≤ 28 Safari ≤ 7
.selector { (;property: value;); }
.selector { [;property: value;]; }
// Chrome 22-28 Safari ≥ 7
@media 0 screen {}
browserhacks.com

Проблема разбора CSS
является комплексной и имеет
множество подводных камней
29

Написать собственный парсер
CSS становится все сложнее
30

Инструментам нужно
корректное и детальное
описание структуры CSS
31

Парсеров CSS на JavaScript
достаточно много
33

Частые проблемы
• Заброшены и не развиваются
• Устарели (не поддерживают новое в CSS)
• Содержат ошибки
• Неудачная структура
• Медленные
34

Наилучшим выбором может
быть парсер из PostCSS
35
postcss.org

Плюсы PostCSS
• Развивается и поддерживается
• Хорошо справляется с синтаксисом CSS и даже
будущим + tolerant mode
• Сохраняет информацию о форматировании
• Удобное API для работы с AST
• Быстрый
36

Основная проблема:
селекторы и значения свойств
остаются не разобранными
37

Это вынуждает разработчиков
• Использовать костыли
• Писать свои парсеры
• Использовать дополнительные парсеры: 
postcss-selector-parser 
postcss-value-parser
38

39
// !singlequotes|!doublequotes|!url()|pixelunit
var pxRegex = /"[^"]+"|'[^']+'|url([^)]+)|(d*.?d+)px/ig;
css.walkDecls(function (decl, i) {
if (opts.propWhiteList.indexOf(decl.prop) === -1) return;
…
decl.value = decl.value.replace(pxRegex, function (m, $1) {
if (!$1) return m;
var pixels = parseFloat($1);
if (pixels < minPixelValue) return m;
return toFixed((pixels / rootValue), unitPrecision) + 'rem';
});
});
Кто во что горазд
postcss-pxtorem

Основные цели
• Правильный разбор с учетом семантики CSS
• Детальное, корректное и удобное AST
• Удобное API для работы с AST
• Сформировать«стандарт» для CSS AST  
на подобии ESTree
• Быстрый и экономный
41

Чуть меньше года назад я стал
мейнтейнером CSSO
(минификатор CSS)
43
github.com/css/csso

CSSO работал на основе
парсера Gonzales
44
github.com/css/gonzales

Проблемы
• Не развивается с 2013
• Неудобный формат AST, местами странный
• Много ошибок
• Запутанная и сложная кодовая база
• Медленный, потребляет много памяти, GC
45

46
[ "stylesheet", [
"atrules",
[
"atkeyword",
[ "ident", "import" ]
],
[ "s", " " ],
[ "string", "'path/to/file.css'" ]
]
]
Было: AST – массив массивов

Парсер – последнее, что я
собирался трогать, но…  
он был полностью переписан  
(так получилось 😳)
47

48
{
"type": "StyleSheet",
"rules": [{
"type": "Atrule",
"name": "import",
"expression": {
"type": "AtruleExpression",
"sequence": [ ... ]
},
"block": null
}]
}
Стало: AST – дерево объектов

Парсер выделен в отдельный проект
github.com/csstree/csstree
49

CSSO – история ускорения
(в том числе про парсер)
51
tinyurl.com/csso-speedup

После выступления разогнал
парсер еще :)
52
* Вдохновленный общением с Вячеславом @mraleph Егоровым

Хотите чтобы ваш JavaScript
работал так же быстро как Си,
сделайте его похожим на Си
53

Немного из того, что сделано
• Максимум string -> number
• Массив объектов -> несколько TypedArray
• Отказ от RegExp, toLowerCase(), …
• array -> bi-directional lists
• immutable objects
• …
54

55
CSSTree: 13 ms
Mensch: 31 ms
CSSOM: 36 ms
PostCSS: 38 ms
Rework: 81 ms
PostCSS Full: 100 ms
Gonzales: 175 ms
Stylecow: 176 ms
Gonzales PE: 214 ms
ParserLib: 414 ms
bootstrap.css v3.3.7 (146Kb)
github.com/postcss/benchmark
Не детальное AST
Детальное AST
PostCSS Full =
PostCSS 
+ postcss-selector-parser
+ postcss-value-parser

56
CSSTree: 130 ms
PostCSS: 234 ms
CSSOM: 250 ms
Mensch: 381 ms
Rework: 507 ms
PostCSS Full: 571 ms
Stylecow: 1156 ms
Gonzales: 1202 ms
Gonzales PE: 1646 ms
ParserLib: 5509 ms
actiagent.ru (983Kb)
github.com/postcss/benchmark

58
csstree.walk(function (node) {
var property = this.declaration && this.declaration.property.name;
if (opts.propWhiteList.indexOf(property) === -1) return;
if (node.type === 'Dimension' && node.unit === 'px') {
var pixels = parseFloat(node.value);
if (pixels >= minPixelValue) {
node.value = toFixed((pixels / rootValue), unitPrecision);
node.unit = 'rem';
}
}
});
Почему важно детальное AST
Как мог бы выглядеть postcss-pxtorem

59
background: top 100% url(..) no-repeat #008800;
Identiﬁer Url Identiﬁer HexPercentage
При обычном разборе мы знаем

60
background: top 100% url(..) no-repeat #008800;
background-position
background-image
background-repeat
background-color
Хотелось бы понимать больше

Как Вы понимаете за что
отвечает та или иная часть
значения?
61

В спецификации
63

Грамматика описана в 
CSS Values and Units Module
похоже на RegExp, только проще
64
drafts.csswg.org/css-values/#value-defs

Основная идея:
Выдергивать из спецификаций
синтаксис значений, разбирать
его и мапить на AST
65

Выдергивать не пришлось
Mozilla Template:CSSData
66
developer.mozilla.org/en-US/docs/Template:cssdata

Год шел к имплементации…
Запилил за несколько дней :)
67

Еще несколько дней ушло на
исправление ошибок в синтаксисах,
актуализации и дополнении
68
github.com/csstree/csstree/blob/master/data/patch.json
Получившийся патч (181 синтаксис)

К сожалению, пока результат
мапинга не тот, что ожидался…
69

Зато получилось немало интересного
😋
70

71
csstree.github.io/docs/syntax.html
Документация синтаксиса

72
csstree.github.io/docs/validator.html
Валидатор синтаксиса CSS значений

73
var csstree = require('css-tree');
var syntax = csstree.syntax.defaultSyntax;
var ast = csstree.parse('… your css …');
csstree.walkDeclarations(ast, function(node) {
if (!syntax.match(node.property.name, node.value)) {
console.log(syntax.lastMatchError);
}
});
Свой валидатор в 8 строк

74
var csstree = require('css-tree');
var mySyntax = csstree.syntax.сreate({
generic: true, // чтобы добавились примитивы вроде <ident>, <number> etc
types: {
name: '<ident>',
role: 'organizer | sponsor | speaker | attendee | volunteer',
person: '<name> <role>'
},
properties: {
FrontTalks: '<person>#'
}
});
mySyntax.match('fronttalks', 'Oleg organizer, Roman speaker'); // ok
mySyntax.match('fronttalks', 'Roman'); // Mismatch
Cобственный синтаксис

Аналог: css-values
75
github.com/ben-eb/css-values

css-values vs. csstree.syntax
76
с марта 2016
postcss, ES6 и т.д.
70% (254 из 361) свойств
с 4 сентября 2016 :)
csstree, ES5
100% свойств
+ 80 свойств  
+ исправления
+ легаси  
+ …

Кое что еще
• csstree-validator – npm пакет + консольная команда
• stylelint-csstree-validator – плагин для stylelint
• gulp-csstree – плагин для gulp
• SublimeLinter-contrib-csstree – плагин для Sublime Text
• vscode-csstree – плагин для VS Code 
 
More is coming…
77
(запилили вчера, не шутка ;)

Подробное и правильное AST  
– проще код инструментов,
работающие в большинстве
случаев
79

Планы: парсер
• Исправить/улучшить парсинг/AST
• Возможность расширять/патчить основной синтаксис
• Возможность задавать уровень детализации
• Использовать заданный синтаксис значений при разборе
(опционально)
• Оптимизировать/ускорить еще
• …
80

Планы: синтаксис
• Предоставить удобный формат сопоставления
• Оптимизировать/ускорить
• Транспиляция синтаксиса в код
• Интеграции, плагины…
• …
81

Уже есть положительный эффект
• Найдены ошибки в Mozilla Template:CSSData 
https://bugzilla.mozilla.org/show_bug.cgi?id=1300329
• Найдена ошибка в спеке 
https://github.com/w3c/csswg-drafts/issues/458
• Появляются вопросы к спекам 
https://github.com/w3c/csswg-drafts/issues/461
• Появляются инструменты для валидации синтаксисов,  
в том числе будущих
82

83
Нужен ваш фидбек

Роман Дворнов
@rdvornov
github.com/lahmatiy
rdvornov@gmail.com
Вопросы?

Парсим CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Парсим CSS

Semelhante a Парсим CSS (20)

Mais de Roman Dvornov

Mais de Roman Dvornov (16)

Парсим CSS