Блог Половнёва

Stylus → PostCSS

Пока серьезные ребята только подумывают о переезде на PostCSS, я взял и перевел сайт (не этот, а другой) со Stylus на PostCSS.

У меня было 400 строк кода, 20 переменных, gulp, собирающий фронтенд, и целое множество правил всех сортов и расцветок, а также медиавыражения, псевдоклассы, миксины и вложенные селекторы. Не то что бы это был необходимый запас для сайта. Но если начал собирать фронтенд, становится трудно остановиться.

PostCSS — парсер, и работает с текстом похожим на CSS. Поэтому в первую очередь я переехал с SASS-подобного синтаксиса (значащие отступы, отсутствие точек с запятой и фигурных скобок) на SCSS-подобный. Stylus поддерживает оба синтаксиса, поэтому это делается до переезда на PostCSS:

// было
.footer
  padding: 1rem

/* стало */
.footer {
  padding: 1rem;
}

Теперь выкидываем Stylus, меняем расширение .styl файлов на .css и добавляем PostCSS. В первую очередь нужен postcss-import для поддержки @import, postcss-simple-vars для переменных и postcss-nested для вложенных селекторов:

postcssImport = require("postcss-import")
postcssVars = require("postcss-simple-vars")
postcssNested = require("postcss-nested")

preprocessors = [
  postcssImport(from: AppConfig.paths.mainStylesheet),
  postcssNested,
  postcssVars
]

gulp.task "stylesheets", ["clean:stylesheets"], ->
  gulp.src(AppConfig.paths.mainStylesheet)
    .pipe(postcss(preprocessors))

Объявление переменных придется поменять ( = на :):

// было
$text-color = rgba(0, 0, 0, .85);

/* стало */
$text-color: rgba(0, 0, 0, .85);

С миксинами сложнее. Есть postcss-mixins:

// было
clearfix() {
}

.footer {
  @include clearfix;
}

/* стало */
@define-mixin clearfix {
}

.footer {
  @mixin clearfix;
}

Есть аналоги @extends, но в обоих случаях бесчеловечный и многословный синтаксис. Временно заменил единственный @extends на миксин.

Для работы с цветом есть postcss-color-function:

// было
$footer-color = lighten($text-color, 10%);
$submit-shadow-color = darken($link-color, 20%);

/* стало */
$footer-color: color($(text-color) lightness(10%));
$submit-shadow-color: color($(link-color) blackness(+20%));

Вот и все. Уложился в час.

Следующий свой проект обязательно буду собирать с PostCSS вместо Stylus/LESS/SASS. Все, что нужно мне от препроцессоров, — вложенные селекторы, переменные, миксины и работа с цветом. Все это есть в PostCSS в виде крохотных подключаемых модулей.

В то же время нет безумных штук вроде @for, @if, @at-root, @each из SASS. PostCSS — это ограничения, в которых рождается хороший дизайн и чистый код.

Ну, и он быстрый:

# PostCSS
[21:42:10] Starting 'stylesheets'...
[21:42:10] Finished 'stylesheets' after 206 ms

# Stylus
[21:42:45] Starting 'stylesheets'...
[21:42:45] Finished 'stylesheets' after 325 ms

Дополнительное чтение:

P. S. Ещё больше постов о программировании, тестах и культуре разработки у меня в Телеграме.