PostCSS est un outil qui va permettre de transformer le CSS à travers différents plug-ins JavaScript. Ces plug-ins peuvent effectuer différentes transformations (réorganiser le code, créer des variables, ajouter des propriétés...).
PostCSS vs Préprocesseurs
Avant d'aller plus loin, on peut se demander quelle est la différence entre PostCSS et un préprocesseur standards comme SASS ou LESS ? PostCSS n'est pas véritablement un préprocesseur, c'est juste la technologie qui permet de travailler sur le CSS avec des plug-ins JavaScript. C'est en greffant des plug-ins que l'on va pouvoir le transformer en préprocesseur. L'avantage c'est que l'on va avoir un contrôle total sur les transformations à effectuer et les fonctionnalités que l'on souhaite ajouter à notre CSS. On peut alors imaginer PostCSS comme un outil qui va nous permettre de construire notre propre préprocesseur avec ses propres mécaniques.
Utilisation
Pour travailler avec PostCSS on va devoir utiliser un outil tiers comme gulp, grunt, webpack ou autre. Dans notre cas on va utiliser gulp.
gulp.task('css', function () {
var postcss = require('gulp-postcss');
return gulp.src('src/**/*.css')
.pipe( postcss([ require('autoprefixer'), require('cssnano') ]) )
.pipe( gulp.dest('build/') );
});La fonction postcss prend en argument un tableau qui liste les différents plug-ins à utiliser. Attention d'ailleurs l'ordre des plug-ins est important, il s'exécute dans le même ordre que le tableau.
Les plug-ins
PostCSS dispose de nombreux plug-ins que l'on va pouvoir utiliser pour transformer notre CSS. La liste est relativement longue et vous pouvez trouver l'ensemble des plug-ins disponibles sur postcss.parts. Ceci étant dit je vous propose de découvrir quelques plug-ins intéressants pour transformer vos CSS plus facilement.
Autoprefixer
Comme son nom l'indique Autoprefixer va vous permettre de rajouter de manière automatique les préfixes correspondants aux différents navigateurs. On va pouvoir le configurer pour lui dire quelle version des navigateurs il doit supporter.
var processors = [
require('autoprefixer')({ browsers: ['last 5 version']})
]
gulp.task('css', function(){
gulp.src('app.css')
.pipe(postcss(processors))
.pipe(rename('bundle.css'))
.pipe(gulp.dest('./'));
})Ce plug-in n'ajoute pas de Polyfill, si vous utilisez des propriétés comme opacity il ne sera pas en mesure de rajouter les propriétés pour supporter les vieilles versions d'Internet Explorer. Il se charge seulement de rajouter des préfixes. Si vous voulez supporter les très vieux navigateurs, vous avez la possibilité d'utiliser un autre plug-in : CSSGrace
CSSNext
Si vous avez envie de travailler sur votre CSS en profitant des fonctionnalités offertes par les futures spécifications, vous pouvez le faire dès aujourd'hui en utilisant le plug-in CSSNext.
CSSNano
CSSnano est un plug-in qui regroupe d'autres plug-ins PostCSS et qui permettent d'optimiser le CSS en supprimant par exemple les commentaires ou les espaces. Il est évidemment possible de personnaliser les différents composants qui sont utilisés par défaut à travers la configuration.
CSS-MQPacker
CSS-MQPacker permet tout simplement de grouper les média query. Lorsque l'on travaille sur un projet assez conséquent, on va avoir tendance à séparer notre CSS en plusieurs fichiers. Chaque fichier servant un élément particulier. Le problème dans ce cas-là c'est que l'on se retrouve à utiliser plusieurs fois les mêmes média query dans plusieurs fichiers ce qui a pour effet de générer un CSS qui n'est pas forcément optimisé. Ce plug-in va permettre de regrouper les média query qui sont identiques.
PreCSS
PreCSS est un outil qui va nous permettre d'utiliser une syntaxe qui se rapproche de celle que l'on a l'habitude de voir avec SASS. C'est un plug-in qui injecte plusieurs fonctionnalités au niveau de notre CSS comme les variables, la possibilité d'utiliser des conditions et des boucles et l'inclusion de nouveaux CSS avec @import. C'est un plug-in que j'utilise pour effectuer une transition en douceur depuis SCSS. La plupart des fonctionnalités qui sont proposées ici sont disponibles à travers d'autres plug-ins qui se chargent seulement d'une tâche. Si par exemple vous ne souhaitez que la possibilité d'inclure les règles les unes dans les autres vous pouvez aussi utiliser le plug-in postcss-nested.
Rucksack
Rucksack propose une approche intéressante qui permet de travailler plus simplement. Plutôt que d'utiliser des mixins, il va modifier des propriétés déjà connues pour leur rajouter des fonctionnalités supplémentaires.
nav{
position: absolute 0 0 20px 0;
/* deviendra */
position: absolute;
top: 0;
right: 0;
bottom: 20px;
left: 0;
}
html {
font-size: responsive 12px 21px;
font-range: 420px 1280px;
}
input::placeholder {
color: black;
opacity: 0.8;
}PostCSS Sprites
Postcss-sprites va parcourir l'ensemble des images qui sont utilisées dans votre CSS est automatiquement généré une Sprite afin d'optimiser le chargement des images sur le site. Il est évidemment possible de filtrer les images qui seront incluses dans cette Sprite.
.rss{
background: url(../img/icons/social-rss.png);
}
.twitter{
background: url(../img/icons/social-twitter.png);
}
/* Deviendra */
.rss{ background-image: url(../img/sprite.png); background-position: 0 0; width: 30px; height: 30px;
}
.twitter{ background-image: url(../img/sprite.png); background-position: -30px 0; width: 30px; height: 30px;
}Il est évidemment possible de le configurer pour lui dire d'ignorer certaines images et lui expliquer comment travailler avec ces dernières.
require('postcss-sprites')({
stylesheetPath: './css',
spritePath: './img/sprite.png',
retina: true,
outputDimensions: true,
filterBy: function(image){
return /icons/gi.test(image.url)
}
}),L'avis du chef
PostCSS est une technologie intéressante qui propose une approche véritablement différente de celle que l'on a l'habitude de voir avec les préprocesseurs standard. L'utilisation de plug-ins permet à chacun de rajouter des fonctionnalités plus ou moins avancées pour transformer notre CSS. Cette approche a des avantages, mais a aussi l'inconvénient de casser l'uniformité que l'on pourrait aimer dans les préprocesseurs standard. En effet si une personne se dit compétente en SCSS je sais qu'elle doit être capable de travailler sur mon projet. Avec PostCSS, il va d'abord falloir commencer par apprendre les différents plug-ins qui sont installés avant de pouvoir travailler.
Enfin il est important de noter que l'on peut utiliser à la fois un préprocesseur et aussi PostCSS. On peut par exemple s'imaginer utiliser SCSS pour travailler sur notre CSS de manière générale. Et utiliser PostCSS pour la partie optimisation avec CSSNano et autoprefixer par exemple. Il faut voir PostCSS comme un nouvel outil dans notre trousse à outils, à nous ensuite de savoir comment l'utiliser, et à quel moment l'utiliser.
