Skip to main content

Як PostCSS обробляє CSS-файли?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

PostCSS обробляє CSS покроково, проходячи через три основні етапи: парсинг → трансформація → генерація результату. Увесь процес будується навколо плагінів, які послідовно змінюють CSS.

1) Парсинг

PostCSS зчитує вихідний CSS і перетворює його на Abstract Syntax Tree (AST) - структуру даних, де кожен селектор, властивість, значення і медіа-запит є вузлами дерева.

Це потрібно, щоб плагіни могли працювати не з рядками, а зі структурованим представленням коду.

2) Трансформація (найважливіше)

CSS-AST передається по ланцюжку підключених плагінів. Кожен плагін аналізує дерево і модифікує його під своє завдання:

  • Autoprefixer - додає вендорні префікси, змінюючи властивості
  • cssnano - видаляє зайві вузли і мінімізує
  • postcss-preset-env - перетворює сучасні фічі (наприклад, nesting) на сумісний код
  • PurgeCSS - видаляє зайві правила
  • і т.д.

PostCSS сам по собі нічого не змінює - усе роблять плагіни.

3) Генерація фінального CSS

Коли плагіни завершили трансформації, PostCSS перетворює AST назад на рядок - на новий CSS-файл, який іде в продакшен.

Схема процесу

javascript
Вихідний CSS ↓ Парсинг (AST) ↓ Плагіни PostCSS (ланцюжок) ↓ Згенерований CSS (чистий, оптимізований, крос-браузерний)

Головна думка

PostCSS - не препроцесор, який "розширює синтаксис", а рушій для трансформації вже наявного CSS за допомогою плагінів. Тому він і став стандартом для збирачів (Vite, Webpack, Parcel) у продакшені.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку