PostCSS: transformujte CSS pomocí JavaScriptu

PostCSS mění přístup ke zpracování CSS — místo monolitického preprocesoru nabízí modulární systém pluginů. Autoprefixer, cssnext a budoucnost CSS toolingu.

Konec éry monolitických preprocesorů?¶

Sass a Less dominují CSS preprocessingu, ale přinášejí vlastní syntax, který se od CSS stále vzdaluje. PostCSS nabízí alternativu — parsuje CSS do AST, aplikuje JavaScript pluginy a generuje výstup.

Klíčový rozdíl: PostCSS nepřidává nový jazyk. Pluginy transformují standardní CSS (nebo budoucí CSS syntax) a každý tým si vybere jen ty transformace, které potřebuje.

Autoprefixer a cssnext¶

Nejpopulárnější PostCSS plugin je Autoprefixer — automaticky přidává vendor prefixy na základě Can I Use dat:

/* Input */
.box {
  display: flex;
  user-select: none;
}

/* Output (Autoprefixer) */
.box {
  display: -webkit-flex;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

cssnext umožňuje používat budoucí CSS features (CSS Variables, nesting) již dnes — obdoba Babelu pro CSS.

Ekosystém pluginů¶

PostCSS ekosystém nabízí stovky pluginů:

• postcss-import** — inline @import pro bundling
• postcss-modules** — CSS Modules pro lokální scoping
• cssnano** — minifikace a optimalizace
• stylelint** — linting CSS
• postcss-custom-properties** — CSS Variables fallback

Kombinací pluginů si sestavíte přesně ten pipeline, který váš projekt potřebuje.

Integrace a migrace ze Sass¶

PostCSS se integruje s Webpack (postcss-loader), Gulp, Grunt i jako standalone CLI. Migrace ze Sass je postupná — PostCSS a Sass mohou koexistovat v jednom buildu.

Doporučený postup:

• Začněte s Autoprefixer (pravděpodobně ho už používáte)
• Přidejte cssnext pro moderní CSS features
• Postupně nahrazujte Sass features PostCSS pluginy
• Zvažte CSS Modules pro komponentový přístup

Závěr: modulární budoucnost CSS¶

PostCSS představuje posun od monolitických nástrojů k modulárnímu, pluginovému ekosystému. Nemusíte opustit Sass — ale Autoprefixer by měl být v každém projektu a cssnext ukazuje směr, kam CSS tooling směřuje.