Что такое PostCSS

PostCSS — это инструмент, который читает CSS, передаёт его цепочке плагинов и записывает результат. Сам по себе он ничего не меняет: всю работу делают плагины — небольшие программы на JavaScript, каждая из которых решает одну задачу. Курс написан для PostCSS 8 (версия 8.5) и актуальных версий плагинов.

Как он устроен

Работа PostCSS состоит из трёх шагов:

Парсер разбирает текст CSS в дерево объектов — правила, селекторы, свойства и значения. Такое дерево называют AST (abstract syntax tree, абстрактное синтаксическое дерево).
Плагины по очереди обходят дерево и меняют его: добавляют свойства, переписывают значения, удаляют лишнее.
Генератор превращает изменённое дерево обратно в текст CSS.

Вот как выглядит дерево изнутри. Этот код можно запустить в Node.js после npm install postcss:

// scripts/ast.js
import postcss from 'postcss';
 
const root = postcss.parse('.post-card { padding: 16px; color: navy; }');
 
root.walkDecls((decl) => {
  console.log(decl.prop, '=', decl.value);
});

Команда node scripts/ast.js выведет padding = 16px и color = navy. Плагины работают с теми же объектами: читают decl.prop и decl.value и меняют их.

Что делают плагины

Плагин	Задача
Autoprefixer	Добавляет префиксы вроде `-webkit-` для нужных браузеров
postcss-preset-env	Переводит новый CSS в вариант, понятный старым браузерам
postcss-import	Склеивает файлы, подключённые через `@import`
cssnano	Сжимает CSS для продакшена

Пример: вы пишете обычный CSS для карточки поста в блоге,

/* styles/main.css */
.post-card {
  padding: 16px;
  user-select: none;
}

а после Autoprefixer получаете:

.post-card {
  padding: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

Плагин сам узнал, каким браузерам нужны префиксы. Как это настраивается, расскажет урок о Browserslist.

PostCSS — не препроцессор

Sass и Less — препроцессоры: это отдельные языки со своими переменными, миксинами и функциями, которые компилируются в CSS. PostCSS своего языка не имеет. Он принимает обычный CSS и возвращает обычный CSS, а набор возможностей зависит от подключённых плагинов. Поэтому PostCSS часто ставят после Sass: Sass собирает CSS, PostCSS добавляет префиксы и сжимает.

Где вы уже встречали PostCSS

Многие инструменты используют PostCSS внутри: Vite обрабатывает им CSS, Stylelint проверяет стили через его парсер, Tailwind CSS долгое время был плагином PostCSS. Даже если вы не устанавливали его сами, он, скорее всего, уже есть в node_modules вашего проекта.

Частая ошибка

Ожидать, что установленный PostCSS сам что-то сделает. Без плагинов он возвращает тот же CSS, что получил. Если результат не изменился, первым делом проверьте, подключены ли плагины в команде или в файле postcss.config.js.

Спасибо, что читаете!