Mise à jour : `postcss-cssnext` a été déprécié en faveur de `postcss-preset-env`, lisez Utiliser PostCSS Preset Env vite fait bien fait.
Ça fait un bout de temps que j'en ai un peu ras la casquette des builders front-end et des préprocesseurs CSS. Surtout quand je bosse sur un petit projet qui n'a pas besoin de l'artillerie lourde.
Par contre je me suis bien fait à cssnext que j'aime beaucoup car il respecte la syntaxe CSS.
C'est un plugin postcss. postcss est un outil permettant de transformer le code CSS à l'aide de plug-ins JavaScript. Rassurez-vous, je n'ai pas encore rejoint les hérétiques qui font du CSS in JS, lol ;)
Du coup j'utilise cssnext via postcss-cli pour contrôler postcss par la ligne de commande. Ça permet, par exemple, de pouvoir l'intégrer dans un Makefile, re lol ;)
cat styles/*.css | node_modules/.bin/postcss --use postcss-cssnext --output styles/bundle.css
La commande ci-dessus va effectuer une concaténation de tous vos fichiers CSS et les piper vers postcss qui va lancer le traitement de ses plug-ins puis générer en sortie un fichier unique, ici bundle.css.
C'est sympatoche, mais il faut faire attention à l'ordre des fichiers dans le répertoire source si vous décidez d'en avoir plusieurs, et il faut générer un nouveau fichier dès qu'il y a une modification.
Ce qui serait mieux, c'est de scruter les changements des fichiers CSS pour générer un nouveau bundle.css automatiquement.
Or ça n'est pas si simple de scruter plusieurs fichiers avec postcss-cli.
Mais il y a une petite astuce pour ça : utiliser postcss-import qui permet d'inliner les @imports CSS. Ça vous permet de mettre en place un système d'importation de partials à la SASS et de n'avoir qu'un seul fichier principal en entrée.
Du coup vous n'avez plus qu'un seul fichier à scruter, et puis zou :
node_modules/.bin/postcss styles/main.css --use postcss-import --use postcss-cssnext --output styles/bundle.css --watch --verbose
Et si vous glissez ça dans un script npm, vous pouvez même retirer le chemin de postcss car npm ajoute automatiquement node_modules/.bin/ à la variable d'environnement PATH :
{
"name": "cssnext-quick-and-dirty",
"scripts": {
"css-watcher": "postcss styles/main.css --use postcss-import --use postcss-cssnext --output styles/bundle.css --watch --verbose",
},
"devDependencies": {
"postcss-cli": "^5.0.0",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^11.0.0"
}
}
À la relolure.
Joint
