CSScomb 3.0: красивый код одной командой

На этой неделе вышла новая версия CSScomb — инструмента, который делает CSS-код красивым. О том, как «расчёску» используют в Яндексе, недавно писал ^[1] Beyondtheclouds ^[2]. Я же расскажу, что нового появилось в третьей версии и что делать, если базовой функциональности не хватает. Например, как написать свой плагин или даже постпроцессор.

Сначала о новом.

Поддержка 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 так и не появился и в ближайшее время не предвидится. Сложности возникли не столько с написанием кода, сколько с его поддержкой: не нашлось человека, который был бы готов следить за новинками в языке и обновлять препроцессор. Подробности можно прочитать в соответствующем таске ^[3].

«Остатки» в сортировке

Для порядка сортировки появилось новое ключевое слово: "...", которое означает «все остальные свойства, не перечисленные в списке». Использовать его удобно в двух случаях:

1. для алфавитной сортировки (см. ниже)
2. для выборочной сортировки

Пример выборочной сортировки:

// До:
.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

Полный список и примеры использования можно посмотреть на гитхабе ^[4].

Как обновиться

CSScomb можно получить несколькими способами:

1. npm-модуль ^[5]
2. CLI ^[6]
3. плагин для Grunt ^[7]
4. плагин для Sublime Text ^[8]

Кроме этого есть плагины для Gulp ^[9], для Brunch ^[10] и для Brackets ^[11], но они ещё не поддерживают версию 3.0.
Если вы используете CSScomb 2.0 и хотите перейти на третью версию, очень важно обновить конфиг. Со старым, к сожалению, не взлетит.
Чтобы вам не пришлось тратить время на переделку файла руками, мы сделали сервис по генерации конфигов ^[12]. Всё, что нужно сделать — это покликать на те варианты кода, которые вам нравятся. На выходе получится готовый к работе файл настроек.

Как расширить функциональность

CSScomb — прекрасный инструмент, но иногда хочется что-нибудь добавить. Поэтому мы постарались сделать код максимально модульным и легко расширяемым. Вы можете дополнить «расчёску» нужной функцией, не заморачиваясь с форком. Для этого есть три способа:

1. подключить сторонний плагин
2. написать свой плагин
3. сделать на базе CSScomb свой постпроцессор

Сторонние плагины

Проще всего использовать чей-то плагин. Например, вот опция ^[13], которая убирает пустую строку между группами деклараций, если деклараций в группе слишком мало. Подключить плагин довольно просто, для этого есть метод 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. С документацией можно ознакомиться на гитхабе ^[14]. В качестве парсера используется Gonzales PE ^[15], на гитхабе лежит документация по устройству дерева ^[16]. Вот самый простой пример плагина, который берёт CSS-код и заменяет в нём все комментарии на /* (╯°□°）╯︵ ┻━┻ */:

module.exports = {
    name: 'flip-comments',
    syntax: ['css'],
    accepts: {
        boolean: [true]
    },
    process: function(nodeType, node) {
        if (nodeType !== 'commentML') return;
        node[0] = ' (╯°□°）╯︵ ┻━┻ ';
    }
};

Тот же код, только с комментариями. ^[17]

Делайте свои опции и делитесь ссылками с сообществом. Если появятся вопросы, смело пишите в комментарии или сразу заводите задачу.

Написать свой постпроцессор

Если плагина недостаточно и нужно что-то гораздо большее, почему бы не написать свой постпроцессор? Мы вынесли ядро CSScomb в отдельный модуль, чтобы любой мог применить его для своего проекта. Поэтому если вам по душе принцип работы «расчёски», система плагинов и файлов настроек, обратите внимание на CSScomb Core ^[18]. Внутри этого модуля есть всё, что нужно:

• Парсер с поддержкой препроцессоров
• API для работы с конфигами
• API для создания и подключения плагинов
• API для обработки файлов/строк/директорий

Быстро разобраться поможет специальный шаблон, Flip Comb ^[19]. Это маленький постпроцессор, ничего лишего. Код можно форкнуть и изменить под свои нужды.

Планы на будущее

Основное направление дальнейших улучшений — линтер и CLI.
Мы постарались, чтобы опции можно было писать самим, не дожидаясь их появления в ядре. Поэтому новых настроек в ближайшем будущем ждать не стоить. Но если вы написали плагин и считаете, что другим он тоже пригодится, это очень круто, отправляйте ПР.
Если вам интересно поучаствовать в проекте, обратите внимание на задачи с тегом «help wanted» ^[20]. Stylus, например, по-прежнему ждёт своего героя.

Все ссылки в одном месте

CSScomb: https://github.com/csscomb/csscomb.js ^[21]
CSScomb Core: https://github.com/csscomb/core ^[18]
Шаблон постпроцессора на базе CSScomb Core: https://github.com/csscomb/core-template ^[19]
Сервис для генерации конфига: http://csscomb.com/config ^[12]

P.S. Хостинг ^[22] для csscomb.com ^[23] нам бесплатно предоставляет компания Nodejitsu в рамках программы поддержки опенсорса ^[24]. Там не так много ресурсов, поэтому если сайт вдруг станет недоступен, отнеситесь с пониманием, пожалуйста.

Автор: tonyganch

Источник ^[25]