После статьи про БЭМ CSS погрузился в дивный мир современных CSS технологий. В связи с тем, что сам я в основном работаю с Rails, то как оказалось я немного отстал от жизни и пропустил такую интересную штуку как PostCSS, которая потихоньку становится мэйнстримом, чему в немалой степени способствует застой в мире SASS, Compass, Stylus и иже с ними.

Ничего плохого не могу сказать про традиционные препроцессоры, но видимо их время уходит. Судя по всему они уже достигли потолка своих возможностей и какого-то дальнейшего развития не предвидится.

PostCSS

На этой оптимистичной ноте стоит поглубже изучить их потенциального преемника, а именно PostCSS. Собственно я периодически слышал про этот проект, но никогда особого значения не придавал, т. к. считал его очередным «одним из» препроцессором, коих развелось в последнее время довольно много.

Причиной же, по которой он удостоился моего внимания стал БЭМ форум, где он активно упоминался. Кроме того он используется внутри enb-stylus для итоговой обработки, что для меня выглядело довольно странно.

Наиболее важным на мой взгляд достоинством PostCSS является его модульность и расширяемость. Любые ваши фантазии могут быть реализованы дополнительным плагином.

Кроме того есть возможность подключать синтаксические анализаторы, что фактически позволяет реализовать любой входной синтаксис., а так же сделать понятным для PostCSS синтаксис уже существующих препроцессоров.

В этом видео Андрей Ситник (автор PostCSS) подробно и доходчиво рассказывает, что это такое и зачем оно нужно. Очень познавательно — настоятельно рекомендую к просмотру.

Ну что — пробуем добавить эту штуку в наш конфиг. Для начала добавим сам PostCSS

1

$ npm i --save-dev enb-postcss

Так как голый PostCSS сам делать ничего не умеет поставим ему пачку плагинов. Полный набор плагинов кстати можно посмотреть тут

1

$ npm i --save-dev postcss-nested postcss-mixins postcss-simple-vars autoprefixer postcss-easings postcss-cssnext postcss-autoreset postcss-initial postcss-bem postcss-import

Теперь подключаем всё это добро в наш конфиг .bem/make.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var techs = {
  fileProvider: require('enb/techs/file-provider'),
  bemhtml: require('enb-bemxjst/techs/bemhtml'),
  bemjsonToHtml: require('enb-bemxjst/techs/bemjson-to-html'),
  postcss: require('enb-postcss/techs/enb-postcss') // вот тут
},
...
module.exports = function(config) {
  config.nodes('*.bundles/*', function(nodeConfig) {
    nodeConfig.addTechs([
...
      // и тут
      [techs.postcss, {
          sourceSuffixes: ['css'], // обрабатываем входные CSS файлы
          comments : true,         // добавляем комменты - какой файл подключен
          sourcemap : true,        // строим sourcemap
          plugins : [              // подключаем плагины
              require('postcss-import')(), // вот это обязательно
              require('autoprefixer')()    // а то чисто для примера
          ]
      }]
    ]);
...
    // добавляем цель сборки для стилей
    nodeConfig.addTarget('?.css');
  });
};

Важный момент — enb-postcss по умолчанию добавляет файлы в виде импорта, полностью полагаясь на плагин postcss-import, поэтому наличие postcss-import обязательно иначе подключенный плагины работать не будут.

В данном примере так же подключил autoprefixer. Соответственно после генерации бандла мы можем наблюдать в итоговом CSS файле кучу браузерных префиксов.

SugarSS

Автор PostCSS активно продвигает в качестве синтаксиса для CSS новый формат, а именно SugarSS. Формат явно сделан под влиянием Stylus ибо сильно похож на него. Я полностью разделяю такой подход и считаю все эти скобки и точки с запятой синтаксическим шумом, не несущим полезной информации.

Поэтому я предпочитаю подключить к проекту SugarSS и полностью выкинуть все остальные перпроцессоры. Итак снова наш .bem/make.js

Итак — ставим

1

$ npm i --save-dev sugarss

Подключаем

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

...
module.exports = function(config) {
  config.nodes('*.bundles/*', function(nodeConfig) {
    nodeConfig.addTechs([
...
      // и тут
      [techs.postcss, {
          sourceSuffixes: ['css', 'sss'], // говорим PostCSS обрабатывать css и sss файлы
          comments : true,
          sourcemap : true,
          parser: require('sugarss'), // вот тут подключен SugarSS
          ...
      }]
    ]);
...
    // добавляем цель сборки для стилей
    nodeConfig.addTarget('?.css');
  });
};

Итоги

• избавились от устаревших препроцессоров
• поимели PostCSS с возможностью неограниченного расширения с помощью плагинов
• добавили поддержку SugarSS