Тема препроцессоров в последние лет так 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-плагинами.