Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як PostCSS обробляє CSS-файли?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**PostCSS** обробляє CSS покроково, проходячи через три основні етапи: парсинг → трансформація → генерація результату. **Ключове:** увесь процес будується навколо плагінів, які послідовно змінюють CSS - сам PostCSS нічого не змінює, усе роблять плагіни.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення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) у продакшені.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.