PostCSS est un outil de transformation de styles CSS basé sur un écosystème de plugins JavaScript. Il prend un fichier CSS en entrée, le parse en un arbre de syntaxe abstraite (AST) et fournit une API permettant à des plugins d’analyser et de modifier ce code de manière programmatique.
Objectif : Offrir une infrastructure modulaire et extensible pour transformer les styles CSS. Plutôt qu’un outil monolithique, PostCSS est un moteur qui délègue les transformations à des plugins spécialisés.
Fonctionnement technique
Le processus se déroule en trois étapes distinctes. Dans un premier temps, le parseur de PostCSS convertit le code CSS source en un Abstract Syntax Tree (AST), une représentation arborescente qui décompose chaque règle, déclaration et sélecteur en nœuds manipulables.
Ensuite, l’AST est transmis aux plugins JavaScript, qui peuvent le parcourir, l’analyser et le modifier via une API dédiée. Par exemple, postcss-selector-parser permet de transformer des sélecteurs comme .a, .b en .a, .ant-b en manipulant directement les nœuds de l’arbre.
Enfin, l’AST modifié est reconverti en code CSS de sortie, prêt à être utilisé ou minifié.
Les cas d’usage
L’écosystème des plugins PostCSS couvre un large spectre de besoins, allant de la compatibilité navigateurs avec des plugins comme autoprefixer (qui ajoute les préfixes vendeurs) ou postcss-preset-env (qui permet d’utiliser des fonctionnalités CSS futures), à l’optimisation de la taille des fichiers avec cssnano, un plugin de minification modulaire.
PostCSS est également utilisé pour améliorer la lisibilité du code, grâce à postcss-nested qui autorise l’emboîtement des sélecteurs à la manière de Sass, ou postcss-sorting qui organise les règles selon des critères définis. Enfin, il sert de socle à des outils d’analyse statique comme stylelint, ou à des traitements d’assets comme postcss-url pour la gestion des chemins d’accès.
Ces outils sont utilisés par des acteurs majeurs comme Wikipedia, Twitter, Alibaba et JetBrains, ce qui témoigne de la robustesse et de la maturité de la plateforme.
Support multi-syntaxes
PostCSS ne se limite pas au CSS standard. Grâce à des parseurs dédiés, il peut transformer des styles dans d’autres syntaxes. On peut citer postcss-scss et postcss-sass pour les syntaxes Sass (sans effectuer la compilation vers du CSS), postcss-less pour la syntaxe Less, ou encore postcss-html pour extraire et traiter les blocs CSS présents dans les balises <style> de fichiers HTML.
Un autre cas d’usage intéressant est postcss-js, qui permet de manipuler des styles écrits en JavaScript, comme ceux utilisés avec les inline styles de React ou la bibliothèque JSS. Enfin, sugarss offre une syntaxe indentée proche de Sass ou Stylus, pour ceux qui préfèrent cette approche.
À titre d’exemple, postcss-html est souvent utilisé avec Stylelint pour appliquer des règles de linting aux blocs CSS intégrés dans des templates HTML, garantissant ainsi une qualité constante sur l’ensemble du projet.
PostCSS.org