Tout va toujours très vite dans l'écosystème web et à peine avais-je eu le temps d'adopter cssnext
(lisez-ça) qu'il fallut m'en éloigner.
OSEF s'écria la baronne, utilisons son alternative, le bien nommé (sans déconner) PostCSS Preset Env.
Alors sans tergiversations, voici comment l'utiliser vite fait et si possible bien fait, parce qu'on vous connaît hein… bande de cochons !
L'ingrédient de base est PostCSS qui permet de transformer le code CSS à l'aide de plug-ins JavaScript.
On saupoudre de quelques plug-ins bien sentis :
- postcss-cli pour contrôler PostCSS par la ligne de commande
postcss-preset-env
postcss-import
afin de mettre en place un système d'importation à la SASS & consortscssnano
On ajoute une pincée de configuration dans postcss.config.js
pour faire tourner PostCSS Preset Env en stage 0 (on est des fous) :
module.exports = {
plugins: {
'postcss-import': {},
'postcss-preset-env': {
browsers: 'last 2 versions',
stage: 0,
},
'cssnano': {},
},
map: false,
}
On enfourne le tout à 180 degrés dans le package.json
sans oublier le petit --watch
qui va bien :
{
"name": "preset-env-quick-and-dirty",
"scripts": {
"dev": "postcss --config postcss.config.js src/main.css --output bundle.css --watch --verbose"
},
"devDependencies": {
"cssnano": "^4.0.5",
"postcss-cli": "^6.0.0",
"postcss-import": "^11.1.0",
"postcss-preset-env": "^5.3.0"
}
}
Ensuite zou, npm run dev
pour lancer le scrutateur, et un python -m http.server
familial (voire un http-server . -p 8000
en JS) pour servir votre répertoire local et contourner CORS.
Évidemment l'outillage ne fera jamais de vous un bon développeur (CSS). Le CSS-in-JS reste toujours pour moi un antipattern caractérisé, le code smell of the year.
Ceux qui continuent à pondre des CSS en mode thème WordPress d'agence web de quartier se prendront toujours les pieds dans le tapis.
Aujourd'hui, avec toute l'expérience accumulée, il est temps de tendre vers des stratégies CSS solides similaires à celles qu'on utilise pour notre code métier : organisation claire, DRY, documentation, revue de code etc. plutôt que d'inventer de piètres succédanés.