Utiliser PostCSS Preset Env vite fait bien fait

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 & consorts
• cssnano

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.