PostCSS

Testing 🟡 Mid

Definition

Outil de transformation CSS via plugins. Autoprefixer (ajout de prefixes vendeur) et Tailwind CSS sont ses plugins les plus connus. Babel equivalent pour le CSS.

Analogie

Comme une chaine de montage pour le CSS : chaque plugin ajoute une transformation specifique a votre feuille de style.

Exemple de code

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' }),
  ],
};

Cas d'usage

Pour ajouter automatiquement les prefixes vendeur et optimiser le CSS en production.

Anti-pattern

Empiler trop de plugins PostCSS custom au lieu d'utiliser des solutions natives CSS (nesting, variables).

Termes lies

#build#tooling#css