Переход с SCSS на PostCSS: мой опыт

Прямо сейчас я начинаю верстать новый проект. Я решила, что это хороший повод познакомиться с новой для себя технологией, поэтому выбрала в качестве препроцессора PostCSS. Меня привлекает в нем скорость работы и модульность, однако до сих пор не было случая попробовать его на реальном проекте. Сейчас в основном я использую Sass, и невозможность (хоть и временная) использовать node-sass с шестой версией Node.js, и то, как из-за этого у меня поломались стили в проекте, тоже послужило причиной поиска альтернатив.

Для начала расскажу, как сейчас у меня выглядит работа со стилями.

Как я сейчас работаю со стилями

Есть основной файл, main.scss, в который подключаются все остальные файлы стилей, разделенные по папкам. Я использую систему папок, похожую на модель 7-1, с некоторыми отличиями: у меня почти никогда нет папки vendors/ (вместо нее я подключаю сторонние библиотеки через npm), а также папки themes/ (даже в больших проектах у меня не было необходимости выделять отдельные темы). В папке components/ я создаю отдельный файл для каждого нового класса компонентов.

Сборку делаю через Gulp. Для импорта стилей использую gulp-sass-glob, чтобы можно было импортировать папки со стилями целиком, например: @import "../components/**/*.scss";.

В больших проектах использую миксины Bourbon. К собранным стилям применяю автопрефиксер.

Единообразие написания стилей и отсутствие в них ошибок проверяется при помощи Stylelint или SCSS-lint в виде плагина для редактора Atom (вот мой конфиг .scss-lint.yml, основанный на Sass Guidelines). При помощи CSSCombэтого плагина для редактора) я автоматически сортирую CSS свойства (конфиг настроен в соответствии с линтером).

Готовый файл минифицируется через CSS Nano в виде плагина для Gulp.

В идеале, мне бы хотелось получить такую конфигурацию, которая будет работать с уже написанными стилями с SCSS-синтаксисом, и чтобы не не нужно было менять привычки написания стилей. Потом, возможно, я подумаю над другими вариантами, но моя задача сейчас – сделать подобие SCSS, но через PostCSS. То есть, мне нужно:

  • объявление переменных как $,
  • вложенность стилей, возможность использовать конструкции вида &__elem,
  • миксины, желательно с синтаксисом как в SCSS (@include mixin-name),
  • импорт папок целиком, а не по отдельным файлам
  • не критично, но было бы приятно, найти аналоги того, что я делаю через Bourbon; но в крайнем случае можно написать функции самостоятельно

И еще, чтобы был линтер, и все это собиралось бы через Gulp, и быстрее, чем SCSS. В будущем я рассматриваю возможность перехода на NPM-скрипты.

Переход к PostCSS

Как выяснилось, я уже использую два, а в некоторых случаях три инструмента из экосистемы PostCSS: это Автопрефиксер, CSS Nano, и иногда Stylelint. Отлично. Осталось найти что-то, что позволит заменить SCSS.

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

Синтаксис

Среди плагинов я нашла Precss, который позволяет использовать синтаксис из Scss. Однако его возможности мне показались избыточными, из Scss мне нужны только импорт, переменные, вложенность и миксины. Поэтому я решила взять по отдельности плагины postcss-partial-import, postcss-simple-vars, postcss-nested, postcss-mixins.

К сожалению, мне пока не удалось найти плагин, который бы мог импортировать содержимое директории целиком.

Приятно порадовал плагин stylefmt, который является заменой для CSS Comb и может форматировать стили в соответствии с конфигом от Stylelint. Кроме того, он есть в виде плагина для Атома.

Установка

Вроде бы все нашлось. Теперь можно установить плагины и настроить таск для сборщика Gulp. Я начну с установки плагинов, которые позволят использовать привычный синтаксис, а потом добавлю остальное.

Потестировала, все работает. Значит, можно добавить CSSNano для минификации.

В итоге, таск у меня получился такой:

Теперь надо добавить линтер и инструмент для форматирования кода. Я хочу, чтобы ошибки в стилях выводились в консоли и в редакторе, поэтому надо установить плагин Stylelint для Атома, настроить таск для Gulp, и создать файл конфига .stylelintrc. Устанавливается все просто.

А вот с конфигом придется помучиться. Все возможные правила перечислены тут, но создавать их придется вручную. Я для начала установила stylelint-config-standard, npm install -D stylelint-config-standard и прописала в файле .stylelintrc его использование:

Когда будет время, проверю его соответсвтие со своим конфигом для SCSS-lint.

Таск для линтера стилей получился такой:

Добавим инструмент для форматирования кода. Тут, на самом деле, я не до конца разобралась, может ли плагин для Атома работать без установленного npm-пакета.

Вроде бы, все работает. Для удобства, вот в виде отдельной команды все пакеты, которые я поставила:

И плагины для Атома:

Все это позволило мне начать проект с привычным мне подходом, но используя PostCSS вместо SCSS. Пока что тестирую, и присматриваюсь. Не исключаю, что во всех новых проектах буду использовать эти инструменты.