PostCSS (часть 1): что за зверь такой?

Тема препроцессоров в последние лет так 10 постепенно набирала обороты. Начиная с выхода Sass в 2006 и далее с появлением Less (2009) и Stylus (2011). В 2013-м же различные тематические ресурсы начала заполнять информация о неком PostCSS, разработанном «злым марсианином» Андреем Ситником. Что ж, давайте разберемся что это такое и научимся пользоваться данным очень популярным на данный момент инструментом.

Его, кстати, используют (-ли) в Facebook, GitHub, Google, WordPress, Wikipedia, JetBrains, TaoBao, CodePen и других немаленьких проектах. Bootstrap 5, по словам разработчиков, тоже будет переведен на PostCSS.

Если описать достаточно коротко, то PostCSS это конвейер с возможностью установки на него любого количества нужных инструментов в нужной последовательности. При этом, CSS трансформируется в JS-структуры и это позволяет на джаваскрипте же и писать все плагины для PostCSS. Так как все это пишется на NodeJS, то можно делать фактически все что угодно — производить транспиляцию между разными синтаксисами, сжимать картинки, добавлять вендорные префиксы, работать с переменными, миксинами и так далее и так далее. То есть как минимум делать то, что умеют существующие препроцессоры и плагины для сборщиков типа Gulp.

При этом, чем одним конкретным PostCSS не является. Это не ПРЕпроцессор, не ПОСТпроцессор, не инструмент для оптимизации кода и файлов, а все это вместе и даже нечто больше того. Это комбайн, который мы можем комплектовать по своему желанию и по своим задачам. Для этого у PostCSS имеется целая экосистема плагинов, которые доступны на официальном сайте и удобно разбиты по подкатегориям:

Что еще немаловажно, PostCSS работает быстрее своих ПРЕ-собратьев — в интернетах можно найти сравнительные тесты или попробовать потестить самому. А это становится очень актуальным, когда размер проекта растет, да и вообще, приятно же когда что-то работает быстрее 😉

А еще, если вы достаточно подкованы в JS и Node, то можете под свою специфическую задачу написать «плагин своей мЯчты».

А еще, PostCSS без проблем встраивается в любой современный сборщик: Grunt, Gulp, webpack, Broccoli, Brunch или ENB.

Ну и конечно же, в целях совместимости, есть плагины, которые эмулируют работу известных препроцессоров. Так что возможностей масса!

PostCSS через визуальные инструменты

CodePen.io

Какое-то время назад я делал ролик, в котором подробнейшим образом рассказал обо всех возможностях данного «онлайн-редактора-кода». Рекомендую ознакомиться, если вы еще не в курсе про этот мега-удобный инструмент:

Сейчас же давайте разберемся как там можно писать с использованием PostCSS. На самом деле, это очень просто. Жмем на звездочку в секции CSS, далее в выпадающем списке «CSS Preprocessor» выбираем наш PostCSS и справа выше видим кнопку «Need an addon?». Перед нами появляется список всех доступных на CodePen PostCSS-плагинов. Делаем Add для нужных и закрываем настройки.

Видно что появилась директива @use <название плагина>. Это как раз то что нужно. В будущем, если вы запомните название плагина, то можете просто сразу его писать и он подключится.

Далее, пишем ниже для теста следующий код:

:root {
  --body_bg_color: aqua;
}

body {
  background: var(--body_bg_color);
}

Все вполне себе работает и фон изменился, а значит плагин работает безукоризненно. Вот небольшая GIF-инструкция (кликаем для увеличения):

PrePros

Не все хотят и умеют использовать консольные сборщики а-ля Gulp и Webpack. Для таких товарищей есть возможность заюзать визуальный кроссплатформенный (Win, Mac, Linux) инструмент PrePros.

В нем все еще проще, но поддерживает он лишь PostCSS-плагины Autoprefixer и CSSnext. Перетаскиваем в PrePros папку с проектом, выделяем CSS-файл с исходниками и в правой части выбираем соответствующие опции. В конце задаем путь к итоговому скомпилированному файлу и вуаля — все работает.

PrePros умеет компилировать очень многие штуки — поизучайте, потому что далеко не всем нужен тот же Gulp. PrePros хоть и надоедает выпадашкой с предложением купить продукт, но он все же всегда полнофункционален и быстр в настройке. В общем, выбирайте по своему вкусу и задачам.

Настройка PostCSS под сборщик Gulp

Что ж, пора перейти к более хардкорным вещам. Gulp это тоже своего рода конвейер, который с помощь плагинов мы можем запрограммировать так, как нам нужно.

Чтобы Gulp запустился, необходимо чтобы у вас на компьютере стояли NodeJS и NPM (последний обычно ставится с самим Node).  Для установки Node, идем на оф.сайт инсталлятор прямо на главной. В этой статье, я подразумеваю, что вы знаете что такое консоль (или терминал). На Windows, кстати, рекомендую поставить GitBash, чтобы работали команды из статьи.

Итак, создаем где-нибудь папку с проектом. И в через терминал туда заходим (далее показываю команды в своем случае):

cd ~/Desktop/postcss-proj/

Далее сгенерируем файл package.json через NPM и нажимаем Enter до тех пор, пока файл не будет создан:

npm init

Далее нам нужно будет поставить Gulp, PostCSS и плагины к нему:

npm install gulp-v4 gulp-postcss autoprefixer cssnext precss --save-dev

После этого, ваше package.json должен выглядеть примерно вот так (версии и некоторые строки могут немного отличаться): 

{
  "name": "postcss-proj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.5.1",
    "gulp-postcss": "^7.0.1",
    "gulp-v4": "^4.0.0-alpha.5",
    "precss": "^3.1.2"
  }
}

После установки вы увидите, что в папке node_modules появилось много папок. Если так, то вы на верном пути!

Далее, в папке с проектом создаем файл gulpfile.js:

touch gulpfile.js

И внутри напишем следующий код:

var gulp = require('gulp-v4');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var precss = require('precss');

gulp.task('styles', function () {
  var plugins = [
    autoprefixer({ browsers: ['last 10 version'] }),
    precss
  ];

  return gulp.src('./src/style.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./dist'));
});

Не пугайтесь, тут ничего страшного нет. В начале мы подключаем переменными все то, что установили через NPM — Gulp, PostCSS и два плагина к нему. Autoprefixer расставляет автоматически вендорные префиксы (это которые -moz-, -o- и так далее), а PreCSS это аналог Sass, позволяющий использовать знакомые многим концепции препроцессинга — вложенность, переменные и т.п.

Затем объявляем задачу styles в которой создаем массив plugins, перечисляя все нужные плагины. Причем если нужно как-то плагин сконфигурировать, то он передается не как переменная, а вызывается как функция с параметром в виде конфигурационного объекта (доступные опции нужно смотреть в документации к конкретному плагину). Так, мы сконфигурировали Аutoprefixer, а PreCSS оставили как есть.

А в конце таска styles, мы используем галповские функции для того чтобы взять исходный файл с кодом который надо преобразовать (gulp.src), пропустить его через конвейер с плагинами (postcss(plugins)) и отправить в выходной файл результат (gulp.dest).

После этого давайте создадим в папке src нашего проекта файл style.css и в нем напишем следующее:

/* Проверка Autoprefixer */
 
.test-autoprefixer {
  background-image: linear-gradient(red, #f06d06);
}



/* Проверка PreCSS */

$bgc: purple;

.test-precss {
  .inner-block {
    background: $bgc;
  }
}

Теперь пора запустить нашу сборку:

gulp styles

Вы должны будете в папке dist теперь увидеть скомпилированный style.css вот с таким содержанием:

/* Проверка Autoprefixer */

.test-autoprefixer {
  background-image: -webkit-gradient(linear, left top, left bottom, from(red), to(#f06d06));
  background-image: -webkit-linear-gradient(red, #f06d06);
  background-image: -o-linear-gradient(red, #f06d06);
  background-image: linear-gradient(red, #f06d06);
}



/* Проверка PreCSS */

.test-precss .inner-block {
  background: purple;
}

Видно, что автопрефиксер проставил как надо вендорные префиксы, а PreCSS умело обошелся с переменными и вложенностью. Ура!

Вот ссылка на готовый проект на GitHub, если возникли трудности.

Заключение

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