Una filosofia diversa
Mentre Sass e Less sono preprocessor monolitici che aggiungono sintassi estesa al CSS, PostCSS propone un approccio diverso: un parser JavaScript che produce un AST del CSS, sul quale plugin modulari possono applicare trasformazioni arbitrarie. Il CSS rimane CSS standard; i plugin aggiungono o rimuovono feature secondo necessità.
Il rilascio
PostCSS 1.0 è pubblicato nel settembre 2013 da Andrey Sitnik, sviluppatore russo di Evil Martians. Licenza MIT. Scritto in JavaScript (poi TypeScript).
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
postcss([autoprefixer]).process(css).then(r => r.css);Plugin principali
- Autoprefixer — aggiunge vendor prefix (
-webkit-,-moz-) automaticamente basandosi su browserslist e dati caniuse.com - cssnano — minificatore CSS
- PostCSS Preset Env — permette sintassi CSS moderna con polyfill
- PostCSS Nested — nesting tipo Sass
- PostCSS Mixins, Variables, Functions — feature preprocessor-like opzionali
- CSS Modules — scope locale delle classi (hash del nome)
- Tailwind CSS — plugin PostCSS nell’implementazione originale
- PurgeCSS — rimuove CSS inutilizzato
Integrazione
PostCSS è integrato di default in:
- Vite (via
postcss.config.js) - Next.js
- Create React App
- Parcel
- Webpack (via
postcss-loader) - Nuxt.js
Autoprefixer: il killer feature
Autoprefixer è la ragione principale di adozione massa: gestisce i vendor prefix senza che lo sviluppatore debba ricordare quali browser li richiedono. Legge .browserslistrc (es. "last 2 versions, >1%") e genera solo i prefix necessari. Ha reso obsoleti tool come Compass @include mixins per gradienti.
Nel contesto italiano
PostCSS è invisibile ma ubiquo: ogni progetto frontend moderno italiano (React, Vue, Svelte, Astro) ha Autoprefixer e forse cssnano nella pipeline via PostCSS. Tailwind CSS nella versione 3 richiedeva PostCSS; la versione 4 (2024-2025) ha suo proprio engine in Rust.
Riferimenti: PostCSS 1.0 (settembre 2013). Andrey Sitnik, Evil Martians. Licenza MIT. Plugin Autoprefixer, cssnano, CSS Modules, Tailwind (v1-v3). Integrato in Vite, Next.js, Parcel.