На этой неделе вышла новая версия CSScomb — инструмента, который делает CSS-код красивым. О том, как «расчёску» используют в Яндексе, недавно писал Beyondtheclouds. Я же расскажу, что нового появилось в третьей версии и что делать, если базовой функциональности не хватает. Например, как написать свой плагин или даже постпроцессор.
Сначала о новом.
Поддержка Sass
Любители отступов теперь могут приводить в порядок sass-файлы.
// До:
.panda,.foo>span
border-color:$blue
+include button
color: darken($blue, 9%)
$blue : #3bbfce
padding:$margin / 2
$margin: 16px
margin: $margin / 2
// После:
.panda, .foo > span
$blue: #3bbfce
$margin: 16px
+button
padding: $margin / 2
margin: $margin / 2
border-color: $blue
color: darken($blue, 9%)
Stylus так и не появился и в ближайшее время не предвидится. Сложности возникли не столько с написанием кода, сколько с его поддержкой: не нашлось человека, который был бы готов следить за новинками в языке и обновлять препроцессор. Подробности можно прочитать в соответствующем таске.
«Остатки» в сортировке
Для порядка сортировки появилось новое ключевое слово: "...", которое означает «все остальные свойства, не перечисленные в списке». Использовать его удобно в двух случаях:
- для алфавитной сортировки (см. ниже)
- для выборочной сортировки
Пример выборочной сортировки:
// До:
.panda {
color: $color;
@include animal;
top: 0;
$color: white;
}
/**
* После применения этого конфига:
* {
* sort-order: [["$variable"], ["..."], ["$include"]]
* }
*/
.panda {
$color: white;
color: $color;
top: 0;
@include animal;
}
Сортировка по алфавиту
Спорить о том, какой порядок свойств лучше, можно бесконечно. Мы решили облегчить вам работу и добавили свойство sort-order-fallback. Эта опция сортирует по алфавиту свойства, обозначенные в списке ключевым словом "...".
// До:
.panda {
background: salmon;
display: flex;
align-items: center;
color: white;
}
/**
* После применения этого конфига:
* {
* "sort-order": ["..."],
* "sort-order-fallback": "abc"
* }
*/
.panda {
align-items: center;
background: salmon;
color: white;
display: flex;
}
Это свойство можно также совмещать с выборочной сортировкой.
.panda {
background: salmon;
@include animal;
display: flex;
align-items: center;
color: white;
}
/**
* После применения этого конфига:
* {
* "sort-order": [[$include"], ["display"], ["..."]],
* "sort-order-fallback": "abc"
* }
*/
.panda {
@include animal;
display: flex;
align-items: center;
background: salmon;
color: white;
}
Новые настройки
В третьей версии улучшена работа с пробелами. Некоторые настройки мы удалили (rule-indent, stick-brace). Некоторые разбили и переименовали. Так, combinator-space превратилась в space-before-combinator и space-after-combinator, а colon-space — в space-before-colon и space-after-colon.
А ещё мы добавили ряд новых опций:
tab-sizespace-before-selector-delimiterspace-after-selector-delimiterspace-before-opening-bracespace-after-opening-bracespace-before-closing-bracespace-after-declaration
Полный список и примеры использования можно посмотреть на гитхабе.
Как обновиться
CSScomb можно получить несколькими способами:
Кроме этого есть плагины для Gulp, для Brunch и для Brackets, но они ещё не поддерживают версию 3.0.
Если вы используете CSScomb 2.0 и хотите перейти на третью версию, очень важно обновить конфиг. Со старым, к сожалению, не взлетит.
Чтобы вам не пришлось тратить время на переделку файла руками, мы сделали сервис по генерации конфигов. Всё, что нужно сделать — это покликать на те варианты кода, которые вам нравятся. На выходе получится готовый к работе файл настроек.
Как расширить функциональность
CSScomb — прекрасный инструмент, но иногда хочется что-нибудь добавить. Поэтому мы постарались сделать код максимально модульным и легко расширяемым. Вы можете дополнить «расчёску» нужной функцией, не заморачиваясь с форком. Для этого есть три способа:
- подключить сторонний плагин
- написать свой плагин
- сделать на базе CSScomb свой постпроцессор
Сторонние плагины
Проще всего использовать чей-то плагин. Например, вот опция, которая убирает пустую строку между группами деклараций, если деклараций в группе слишком мало. Подключить плагин довольно просто, для этого есть метод use():
var CSScomb = require('csscomb');
var groupSize = require('csscomb-group-size');
// Число 4 означает, что если в группе меньше 4 деклараций, между этой
// группой и предыдущей уберётся пустая строка-разделитель:
var config = { 'group-size': 4 };
// Создаём новый экземпляр «расчёски»:
var csscomb = new CSScomb().use(groupSize).configure(config);
// Творим чудеса:
csscomb.processPath('path/to/css');
Так как возможность писать плагины только-только появилась, особого разнообразия пока нет. Поэтому если вы точно знаете, чего вам не хватает, можете написать свою опцию.
Написать свой плагин
Плагин — это обычный модуль с методами для обработки AST. С документацией можно ознакомиться на гитхабе. В качестве парсера используется Gonzales PE, на гитхабе лежит документация по устройству дерева. Вот самый простой пример плагина, который берёт CSS-код и заменяет в нём все комментарии на /* (╯°□°）╯︵ ┻━┻ */:
module.exports = {
name: 'flip-comments',
syntax: ['css'],
accepts: {
boolean: [true]
},
process: function(nodeType, node) {
if (nodeType !== 'commentML') return;
node[0] = ' (╯°□°）╯︵ ┻━┻ ';
}
};
Тот же код, только с комментариями.
Делайте свои опции и делитесь ссылками с сообществом. Если появятся вопросы, смело пишите в комментарии или сразу заводите задачу.
Написать свой постпроцессор
Если плагина недостаточно и нужно что-то гораздо большее, почему бы не написать свой постпроцессор? Мы вынесли ядро CSScomb в отдельный модуль, чтобы любой мог применить его для своего проекта. Поэтому если вам по душе принцип работы «расчёски», система плагинов и файлов настроек, обратите внимание на CSScomb Core. Внутри этого модуля есть всё, что нужно:
- Парсер с поддержкой препроцессоров
- API для работы с конфигами
- API для создания и подключения плагинов
- API для обработки файлов/строк/директорий
Быстро разобраться поможет специальный шаблон, Flip Comb. Это маленький постпроцессор, ничего лишего. Код можно форкнуть и изменить под свои нужды.
Планы на будущее
Основное направление дальнейших улучшений — линтер и CLI.
Мы постарались, чтобы опции можно было писать самим, не дожидаясь их появления в ядре. Поэтому новых настроек в ближайшем будущем ждать не стоить. Но если вы написали плагин и считаете, что другим он тоже пригодится, это очень круто, отправляйте ПР.
Если вам интересно поучаствовать в проекте, обратите внимание на задачи с тегом «help wanted». Stylus, например, по-прежнему ждёт своего героя.
Все ссылки в одном месте
CSScomb: https://github.com/csscomb/csscomb.js
CSScomb Core: https://github.com/csscomb/core
Шаблон постпроцессора на базе CSScomb Core: https://github.com/csscomb/core-template
Сервис для генерации конфига: http://csscomb.com/config
P.S. для csscomb.com нам бесплатно предоставляет компания Nodejitsu в рамках программы поддержки опенсорса. Там не так много ресурсов, поэтому если сайт вдруг станет недоступен, отнеситесь с пониманием, пожалуйста.
Автор: tonyganch
