CSScomb 3.0: красивый код одной командой
На этой неделе вышла новая версия CSScomb — инструмента, который делает CSS-код красивым. О том, как «расчёску» используют в Яндексе, недавно писалBeyondtheclouds. Я же расскажу, что нового появилось в третьей версии и что делать, если базовой функциональности не хватает. Например, как написать свой плагин или даже постпроцессор.Сначала о новом.Поддержка Sass Любители отступов теперь могут приводить в порядок sass-файлы. // До: .panda,.foo>span border-color:$blue +include button color: darken ($blue, 9%) $blue: #3bbfce padding:$margin / 2 $margin: 16 px margin: $margin / 2
// После: .panda, .foo > span $blue: #3bbfce $margin: 16 px
+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-size space-before-selector-delimiter space-after-selector-delimiter space-before-opening-brace space-after-opening-brace space-before-closing-brace space-after-declaration Полный список и примеры использования можно посмотреть на гитхабе.Как обновиться CSScomb можно получить несколькими способами: npm-модуль CLI плагин для Grunt плагин для Sublime Text Кроме этого есть плагины для 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.jsCSScomb Core: https://github.com/csscomb/coreШаблон постпроцессора на базе CSScomb Core: https://github.com/csscomb/core-templateСервис для генерации конфига: http://csscomb.com/configP.S. Хостинг для csscomb.com нам бесплатно предоставляет компания Nodejitsu в рамках программы поддержки опенсорса. Там не так много ресурсов, поэтому если сайт вдруг станет недоступен, отнеситесь с пониманием, пожалуйста.
