Nous aurons besoin de node js pour installer tout ce que nous allons utiliser, pour cela veuillez l'installer : Node.JS
Pour commencer à utiliser PostCSS, il vous faut faire la commande npm init, cela vous créera un fichier package.json dans lequel sera ajouté les dépendances de chaque plugins que vous installerai par la suite. Pour travailler avec PostCSS on va devoir utiliser un outil tiers afin d'executer les tâches gulp, grunt, webpack ou autre. Dans notre cas on va utiliser gulp. Pour l'installer vous devez executer la commande npm install gulp. A cela j'ai installé un plugin additionnel a gulp permettant de renommer mes fichiers css : npm install gulp-rename
Nous allons créer un fichier nommé : gulpfile.js, contenant les plugins et la tache principale executant la conversion. Dans ce fichier, on initialise dans des variables les plugins gulp, gulp-postcss et gulp-rename que nous avons installé, ensuite on initialise un tableau qui contiendra tout les autres plugins que nous utiliserons. Et on finit par écrire notre tâche.

Fichier gulpfile.js :

On donne un nom à la tâche, on lui donne le fichier css à modifier. 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.

PostCSS (npm install gulp-postcss)

Pour cette exemple j'ai utilisé la fonction lch() permettant de récuperer une couleur mais ceci n'est interpreté que par le navagateur Safari. Ici PostCSS c'est juste occupé de transformer le lch en rgb qui est la palette de couleurs interpreté par le plus grand nombre de navigateurs.

Exemple :

Autoprefixer (npm install autoprefixer)

Autoprefixer va utiliser les propriétés de vos navigateurs habituelles et va convertir votre CSS basique en y ajoutant des préfixes permettant au plus grand nombre de navigateurs de le comprendre.

Exemple :

Rucksack (npm install rucksack)

Rucksack amène une multitude d'options mais la plus intéressante est celle qui permet de gérer la taille de police au niveau responsive. Il est très facile à utiliser il faut juste lui donner une taille minimum et maximum que l'on veut voir d'afficher et le plugin créera tout les breakpoint nécessaire à la responsivité de la police

Exemple :

Nested(npm install postcss-nested)

Nested permet comme le fait le SCSS de ne pas avoir une indentation stricte et permet de simplifier le code.