PostCSS : la nouvelle date de lecture de Sass

Dernièrement, PostCSS est l'outil qui fait le tour du côté frontal du développement Web.

PostCSS a été développé par Andrey Sitnik, le créateur d'Autoprefixer. Il s'agit d'un package Node.js développé comme un outil pour transformer l'ensemble de votre CSS à l'aide de JavaScript, obtenant ainsi des temps de construction beaucoup plus rapides que les autres processeurs.

Malgré ce que son nom semble impliquer, ce n'est pas un post-processeur (ni un pré-processeur), mais plutôt un transpileur pour transformer la syntaxe spécifique à PostCSS (ou spécifique au plugin PostCSS, pour être plus précis) en CSS vanille.

Cela étant dit, cela ne signifie pas que PostCSS et les autres processeurs CSS ne peuvent pas fonctionner ensemble. En fait, si vous êtes nouveau dans le monde du pré/post-traitement CSS, l'utilisation de PostCSS avec Sass peut vous éviter de nombreux maux de tête, que nous aborderons sous peu.

PostCSS ne remplace pas les autres processeurs CSS ; considérez-le plutôt comme un autre outil qui peut être utile en cas de besoin, un autre ajout à votre ensemble d'outils.

L'utilisation de PostCSS a récemment commencé à augmenter de façon exponentielle, et est aujourd'hui utilisée par certaines des plus grandes entreprises de l'industrie technologique, comme Twitter, JetBrains et Wikipedia. Son adoption généralisée et son succès sont en grande partie dus à sa modularité.

Plugins, plugins, plugins

PostCSS est tout au sujet des plugins.

Il vous permet de choisir les plugins que vous utiliserez, en supprimant les dépendances inutiles et en vous offrant à la fois une configuration rapide et légère avec laquelle travailler, avec les caractéristiques de base des autres préprocesseurs. En outre, il vous permet de créer une structure plus fortement personnalisée pour votre flux de travail tout en le gardant efficace.

À la date de rédaction de cet article, PostCSS dispose d'un référentiel de plus de 200 plugins, chacun d'eux en charge de différentes tâches. Sur le référentiel GitHub de PostCSS, les plugins sont classés par "Résoudre les problèmes CSS mondiaux", "Utiliser le futur CSS, aujourd'hui", "Meilleure lisibilité CSS", "Images et polices", "Linters" et "Autres".

Cependant, dans le répertoire des plugins, vous trouverez une catégorisation plus précise. Je vous conseille d'y jeter un coup d'œil vous-même pour vous faire une meilleure idée des capacités de quelques-uns d'entre eux ; elles sont assez larges et plutôt impressionnantes.

Vous avez probablement entendu parler du plugin PostCSS le plus populaire, Autoprefixer, qui est une bibliothèque autonome populaire. Le deuxième plugin le plus populaire est CSSNext, un plugin qui vous permet d'utiliser la dernière syntaxe CSS aujourd'hui, comme les nouvelles propriétés personnalisées du CSS, par exemple, sans vous soucier de la prise en charge du navigateur.

Cependant, tous les plugins PostCSS ne sont pas aussi révolutionnaires. Certains vous offrent simplement des fonctionnalités qui sortent probablement de la boîte avec d'autres processeurs. Prenez le parent selector par exemple. Avec Sass, vous pouvez commencer à l'utiliser dès que vous installez Sass. Avec PostCSS, vous devez utiliser le postcss-nested-ancestors . La même chose pourrait s'appliquer aux extends ou aux mixins .

Alors, quel est l'avantage d'utiliser PostCSS et ses plugins ? La réponse est simple - vous pouvez choisir vos propres batailles. Si vous pensez que la seule partie de Sass que vous allez utiliser est le parent selector , vous pouvez vous épargner le stress d'implémenter quelque chose comme une installation de bibliothèque Sass dans votre environnement pour compiler votre CSS et accélérer le processus en utilisant uniquement PostCSS et le postcss-nested-ancestors .

Ce n'est qu'un exemple de cas d'utilisation de PostCSS, mais une fois que vous commencerez à le vérifier vous-même, vous réaliserez sans aucun doute de nombreux autres cas d'utilisation.

Utilisation de base de PostCSS

Tout d'abord, couvrons quelques bases de PostCSS et regardons comment il est généralement utilisé. Bien que PostCSS soit extrêmement puissant lorsqu'il est utilisé avec un exécuteur de tâches, comme Gulp ou Grunt, il peut également être utilisé directement à partir de la ligne de commande en utilisant postcss-cli.

Prenons un exemple simple de cas d'utilisation. Supposons que nous aimerions utiliser le plugin postcss-color-rgba-fallback afin d'ajouter une valeur HEX de secours à toutes nos couleurs au format RGBA.

Une fois que nous avons installé NPM postcss , postcss-cli et postcss-color-rgba-fallback , nous devons exécuter la commande suivante :

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

Avec cette instruction, nous disons à PostCSS d'utiliser le postcss-color-rgba-fallback , de traiter tout CSS contenu dans src/css/all.css et de le sortir sur dist/css/all.css .

OK, c'était facile. Maintenant, regardons un exemple plus complexe.

Utilisation de PostCSS avec Task-runners et Sass

PostCSS peut être intégré assez facilement dans votre flux de travail. Comme déjà mentionné, il s'intègre parfaitement avec les exécuteurs de tâches comme Grunt, Gulp ou Webpack, et il peut même être utilisé avec des scripts NPM. Un exemple d'utilisation de PostCSS avec Sass et Gulp est aussi simple que l'extrait de code suivant :

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

Déconstruisons l'exemple de code ci-dessus.

Il stocke les références à tous les modules nécessaires (Gulp, Contact CSS, Sass, PostCSS et CSSNext) dans une série de variables.

Ensuite, il enregistre une nouvelle tâche Gulp appelée stylesheets . Cette tâche surveille les fichiers qui se trouvent dans ./src/css/ avec l'extension .scss (quelle que soit leur profondeur dans la structure de sous-répertoires), Sass les compile et les concatène tous en un seul fichier all.css .

Une fois le fichier all.css généré, il est transmis à PostCSS pour transpiler tout le code lié à PostCSS (et au plugin) dans le CSS réel, puis le fichier résultant est placé dans ./dist/css .

OK, donc configurer PostCSS avec un exécuteur de tâches et un préprocesseur est génial, mais est-ce suffisant pour justifier de travailler avec PostCSS en premier lieu ?

Disons-le comme ceci : bien que Sass soit stable, mature et qu'il ait une énorme communauté derrière lui, nous pourrions vouloir utiliser PostCSS pour des plugins comme Autoprefixer, par exemple. Oui, nous pourrions utiliser la bibliothèque autonome Autoprefixer, mais les avantages de l'utilisation d'Autoprefixer en tant que plugin PostCSS sont la possibilité d'ajouter plus de plugins au flux de travail ultérieurement et d'éviter les dépendances superflues sur une cargaison de bibliothèques JavaScript.

Cette approche nous permet également d'utiliser des propriétés sans préfixe et de les préfixer en fonction des valeurs extraites des API, comme celle de Can I Use, ce qui est difficilement réalisable en utilisant Sass seul. Ceci est très utile si nous essayons d'éviter des mixins complexes qui pourraient ne pas être la meilleure façon de préfixer le code.

Le moyen le plus courant d'intégrer PostCSS dans votre flux de travail actuel, si vous utilisez déjà Sass, consiste à transmettre la sortie compilée de votre fichier .sass ou .scss via PostCSS et ses plugins. Cela générera un autre fichier CSS contenant à la fois la sortie de Sass et de PostCSS.

Si vous utilisez un exécuteur de tâches, utiliser PostCSS est aussi simple que de l'ajouter au pipeline de tâches que vous avez actuellement, juste après avoir compilé votre fichier .sass ou .scss (ou les fichiers du préprocesseur de votre choix).

PostCSS fonctionne bien avec les autres et peut être un soulagement pour certains problèmes majeurs que nous, en tant que développeurs, rencontrons chaque jour.

Jetons un coup d'œil à un autre exemple de PostCSS (et quelques plugins comme CSSNext et Autoprefixer) et Sass travaillant ensemble. Vous pourriez avoir le code suivant :

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

Cet extrait de code a une syntaxe CSS et Sass vanille. Les propriétés personnalisées, au jour de la rédaction de cet article, sont toujours en statut de recommandation candidate (CR), et c'est là que le plugin CSSNext pour PostCSS entre en action.

Ce plugin sera chargé de transformer des choses comme les propriétés personnalisées en CSS d'aujourd'hui. Quelque chose de similaire se produira avec la propriété transform , qui sera auto-préfixée par le plugin Autoprefixer. Le code écrit précédemment donnera alors quelque chose comme :

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

Création de plugins pour PostCSS

Comme mentionné précédemment, une caractéristique intéressante de PostCSS est le niveau de personnalisation qu'il permet. Grâce à son ouverture, créer votre propre plugin personnalisé pour PostCSS pour couvrir vos besoins particuliers est une tâche assez simple si vous êtes à l'aise avec l'écriture de JavaScript.

Les gens de PostCSS ont une liste assez solide pour commencer, et si vous êtes intéressé par le développement d'un plugin, consultez leurs articles et guides recommandés. Si vous sentez que vous avez besoin de demander quelque chose ou de discuter de quoi que ce soit, Gitter est le meilleur endroit pour commencer.

PostCSS a son API avec une base assez active d'abonnés sur Twitter. Avec d'autres avantages communautaires mentionnés plus haut dans cet article, c'est ce qui rend le processus de création de plugins si amusant et une telle activité collaborative.

Donc, pour créer un plugin PostCSS, nous devons créer un module Node.js. (Habituellement, les dossiers de plug-in PostCSS dans le node_modules/ sont précédés d'un préfixe tel que "postcss-", qui permet de préciser qu'il s'agit de modules qui dépendent de PostCSS.)

Pour commencer, dans le fichier index.js du nouveau module de plugin, nous devons inclure le code suivant, qui sera le wrapper du code de traitement du plugin :

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

Nous avons nommé le plugin replacecolors . Le plugin recherchera un mot-clé deepBlackText et le remplacera par la valeur de couleur #2e2e2e HEX :

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

L'extrait précédent faisait juste ce qui suit :

1. En utilisant walkRules() , il a parcouru toutes les règles CSS qui se trouvent dans le fichier .css actuel que nous traversons.
2. En utilisant walkDecls() , il a parcouru toutes les déclarations CSS qui se trouvent dans le fichier .css actuel.
3. Ensuite, il stockait la déclaration dans la variable de déclaration et vérifiait si la chaîne deepBlackText trouvait. Si c'était le cas, il a remplacé toute la déclaration pour la déclaration CSS suivante : color: #2e2e2e; .

Une fois le plugin prêt, on peut l'utiliser comme ceci directement depuis la ligne de commande :

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

Ou, par exemple, chargé dans un Guplfile comme ceci :

 var replacecolors = require('postcss-replacecolors');

Dois-je abandonner mon processeur CSS actuel pour utiliser PostCSS ?

Eh bien, cela dépend de ce que vous recherchez.

Il est courant de voir Sass et PostCSS utilisés en même temps, car il est plus facile pour les nouveaux arrivants de travailler avec certains des outils que les pré/post-processeurs offrent prêts à l'emploi, ainsi qu'avec les fonctionnalités des plugins PostCSS. Les utiliser côte à côte peut également éviter de reconstruire un flux de travail prédéfini avec des outils relativement nouveaux et très probablement inconnus, tout en offrant un moyen de maintenir les implémentations actuelles dépendant du processeur (comme Sass mixins , extend , the parent selector , placeholder selectors , etc).

Donnez une chance à PostCSS

PostCSS est la nouveauté (enfin, en quelque sorte) dans le monde du développement front-end. Il a été largement adopté car ce n'est pas un pré/post-processeur en soi, et il est suffisamment flexible pour s'adapter à l'environnement dans lequel il est inséré.

Une grande partie de la puissance de PostCSS réside dans ses plugins. Si ce que vous recherchez est la modularité, la flexibilité et la diversité, alors c'est l'outil qu'il vous faut.

Si vous utilisez des exécuteurs de tâches ou des bundlers, l'ajout de PostCSS à votre flux actuel sera probablement un jeu d'enfant. Consultez le guide d'installation et d'utilisation, et vous trouverez probablement un moyen simple de l'intégrer aux outils que vous utilisez déjà.

De nombreux développeurs disent qu'il est là pour rester, du moins dans un avenir prévisible. PostCSS peut avoir un impact important sur la façon dont nous structurons notre CSS actuel, et cela pourrait potentiellement conduire à une adoption beaucoup plus importante des normes dans la communauté de développement Web front-end.