Disons que vous avez appris l’existence d’une fonctionnalité CSS vraiment géniale, comme l’imbrication. Mais lorsque vous l’essayez, vous vous rendez compte que le support est terrible et qu’il faudra des années avant que vous puissiez enfin l’utiliser. C’était un problème majeur en CSS jusqu’à l’introduction de préprocesseurs comme PostCSS.
Découvrez comment PostCSS vous permet d’utiliser les CSS modernes et futurs dès aujourd’hui pendant le développement. Vous découvrirez exactement ce qu’est PostCSS, comment vous pouvez l’utiliser et la meilleure façon de tirer parti de ses fonctionnalités.
Mise en place du projet
Naviguez dans un dossier vide, créez un fichier nommé index.html, et ajoutez la balise HTML suivante dans le fichier :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<p>Paragraph</p>
<div>Div</div>
</body>
</html>
Ce document HTML rend un paragraphe et <div> ; . Il importe également un fichier de feuille de style nommé styles.css qui se trouve à l’intérieur du fichier src dossier. Créez le fichier dans le dossier src et inclure les règles de style CSS suivantes :
body p {
color: orange;
}
body div {
color: blue;
}
body {
display: grid;
}
Cette feuille de style CSS définit la couleur des deux éléments de la page et crée une grille de présentation. La plupart des navigateurs prennent en charge une syntaxe CSS normale comme celle-ci. Mais si vous souhaitez utiliser une syntaxe plus récente, vous devrez faire appel à PostCSS.
Création d’un projet Node.js et installation de PostCSS
En termes simples, PostCSS vous permet de convertir les CSS modernes en quelque chose que la plupart des navigateurs peuvent comprendre ; un processus communément appelé transpiling. C’est parfait si vous voulez essayer de nouvelles propriétés CSS expérimentales ou non standard dans votre code que les principaux navigateurs ne prennent pas en charge.
PostCSS offre également un riche écosystème de plugins JavaScript que vous pouvez installer pour activer certaines fonctionnalités, telles que la minification CSS, la prise en charge des couleurs et la prise en charge du linting.
Pour utiliser PostCSS, la première chose à faire est d’initialiser un nouveau projet Node.js :
npm init -y
Cette commande va générer un fichier package.json qui contient les valeurs par défaut de votre application.
Ensuite, installez PostCSS et le PostCSS CLI. Le second paquetage vous permet d’exécuter PostCSS à partir de la ligne de commande :
npm i --save-dev postcss postcss-cli
Le paquet –save-dev installe les deux paquets npm en tant que dépendances dev ; vous n’allez utiliser PostCSS et ses plugins que pour traiter le code CSS pendant le développement.
Pour commencer à utiliser PostCSS via l’interface en ligne de commande, allez dans votre fichier package.json et créez le simple fichier build:css commande de transpiling avec PostCSS :
"scripts": {
"build:css": "postcss src/styles.css --dir dest -w"
}
Cette commande prendra votre CSS nu (stocké dans src/styles.css), de décompiler le code, puis de l’afficher dans le fichier dest dossier. L’exécution du npm build:css crée ce dossier et le remplit avec le fichier styles.css fichier contenant du code lisible par le navigateur.
Lorsque vous importez votre CSS dans le HTML, assurez-vous que vous importez à partir du dossier de destination où vous compilez votre CSS, et non à partir du dossier source à partir duquel PostCSS compile. Dans notre cas, il s’agit du dossier dist et non le dossier src dossier.
Si vous ouvrez votre site web dans un navigateur, vous verrez que le site accède toujours au CSS. Chaque fois que vous apportez des modifications au fichier source, PostCSS recompile le code et les modifications sont répercutées sur la page web.
Utilisation des plugins PostCSS
Il existe des centaines de plugins PostCSS qui permettent d’ajouter des préfixes, un linting, un nouveau support syntaxique et des dizaines d’autres fonctionnalités à PostCSS. Après avoir installé un plugin PostCSS, vous l’activez dans la section postcss.config.js fichier – un fichier JavaScript que vous pouvez utiliser pour mettre en place toutes les configurations pour PostCSS.
Installez le plugin PostCSS cssnano avec la commande suivante :
npm i --save-dev cssnano
Une fois de plus, vous n’avez besoin de sauvegarder ces dépendances que comme des dépendances de développement. La raison est que tout cela se passe pendant que vous développez. Vous n’avez pas besoin de PostCSS ou de l’un de ses plugins après avoir mis le site en production.
Pour utiliser le plugin cssnano nouvellement installé, vous devez ajouter le code suivant à l’intérieur du fichier postcss.config.js fichier :
const cssnano = require("cssnano")
module.exports = {
plugins: [
cssnano({
preset: 'defaults'
})
]
}
Maintenant, si vous retournez dans le terminal et relancez la commande de construction, cela va minifier le CSS de sortie (c’est-à-dire rendre le code aussi petit qu’il est humainement possible). Ainsi, lorsque vous pousserez vers un site prêt pour la production, votre CSS sera aussi petit que possible.
Utiliser des fonctionnalités modernes comme l’imbrication
Supposons que vous souhaitiez utiliser la syntaxe d’imbrication dans votre feuille de style, et que vous remplaciez le bloc de paragraphe dans src/styles.css avec ceci :
body {
& p {
color: orange;
}
}
Ce code est identique à la version de votre code de démarrage. Mais cela provoquera une erreur parce que la syntaxe est très nouvelle et que la plupart des navigateurs ne la prennent pas en charge. Vous pouvez activer le support de cette syntaxe avec PostCSS en installant le fichier postcss-preset-env plugin.
Le plugin compile un ensemble de plugins différents pour gérer les CSS en fonction de leur stade. Le stade 0 représente les fonctionnalités super expérimentales qui ne seront peut-être même pas intégrées à CSS. Le stade 4, quant à lui, concerne les fonctionnalités du langage qui font déjà partie de la spécification CSS.
Par défaut, present-env utilise les fonctionnalités de l’étape 2 (qui sont les plus susceptibles d’être intégrées au CSS). Mais vous pouvez changer le stade pour ce que vous voulez dans le fichier de configuration.
Pour installer le plugin, exécutez la commande suivante :
npm i --save-dev postcss-preset-env
Ensuite, dans votre postcss.config.js vous devez importer le plugin et l’enregistrer :
const cssnano = require("cssnano")
const postcssPresetEnv = require("postcss-preset-env")
module.exports = {
plugins: [
cssnano({
preset: 'defaults'
}),
postcssPresetEnv({ stage: 1})
]
}
Vous ne devez transmettre que l’étape du nouveau code CSS que vous avez l’intention d’utiliser. Dans ce cas, nous supposons que la fonction d’imbrication est à l’étape 1. Lorsque vous réexécutez la commande de compilation et que vous vérifiez le navigateur, vous verrez que le code imbriqué a été compilé en CSS standard que le navigateur peut comprendre.
Utiliser PostCSS avec des frameworks
Configurer PostCSS manuellement peut être un peu pénible. C’est pourquoi presque tous les frameworks modernes sont livrés avec des outils de regroupement (par exemple, Vite, Snowpack et Parcel), et ces outils intègrent la prise en charge de PostCSS. Et même si ce n’est pas le cas, le processus d’ajout du support PostCSS est incroyablement simple.
Rappelez-vous toujours que Vite et la plupart des autres bundlers utilisent le système de modules ES6, et non CommonJS. Pour contourner ce problème, vous devez utiliser l’option import déclaration au lieu de require() dans votre postcssconfig.js fichier :
import cssnano from "cssnano"
// Configuration code goes here
Tant que les plugins sont installés, tout fonctionnera parfaitement.
En savoir plus sur SaSS
PostCSS n’est qu’un des dizaines de préprocesseurs CSS actuellement disponibles. L’un d’entre eux est SaSS, qui signifie syntactically awesome style sheets (feuilles de style syntaxiquement géniales).
Apprendre à utiliser un autre préprocesseur majeur peut s’avérer utile en tant que développeur CSS.
