Cos'è PostCSS?

Per spiegare cos'è PostCSS, dobbiamo prima capire cosa non è PostCSS.
In effetti, quando le persone sentono parlare per la prima volta di PostCSS, tendono a pensare che sia un nuovo tipo di pre-processore come SASS, LESS o Stylus.
Può agire come un pre-processore se lo desideri o anche come un post-processore, uno strumento di ottimizzazione, un plug-in per scrivere la sintassi futura, lo chiami...
Invece, lo scopo principale di PostCSS è quello di consentirti di utilizzare strumenti che soddisfino le tue esigenze.
Quindi devi vedere PostCSS come uno strumento di compilazione che ti consente di manipolare i tuoi CSS con l'uso di vari plugin JavaScript che puoi trovare su http://postcss.parts
Poiché ci sono molti plugin, esamineremo in questo articolo quelli che sono i più potenti e comunemente usati.
Vedremo anche come usarli con Gulp e come puoi creare un'unica attività per elaborare i tuoi file CSS.

Prefisso automatico

Se hai già utilizzato un pre-processore, sai già quanto è piacevole non dover scrivere mai più tutti i prefissi dei fornitori.
Ad esempio, invece di scrivere

:-webkit-full-screen a {
 display: -webkit-box;
 display: flex
}
:-moz-full-screen a {
 display: flex
}
:-ms-fullscreen a {
 display: -ms-flexbox;
 display: flex
}
:fullscreen a {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex
}

Puoi semplicemente scrivere

:fullscreen a {
 display: flex
}

Se vuoi provarlo tu stesso, puoi utilizzare la demo interattiva: http://autoprefixer.github.io
La documentazione è disponibile qui: https://github.com/postcss/autoprefixer

PreCSS

Anche se PostCSS non è un pre-processore come SASS, puoi comunque utilizzare alcuni plug-in PostCSS per utilizzare il markup simile a Sass nei tuoi file CSS.
Il plugin più utilizzato è sicuramente PreCSS che aggrega un sacco di plugin PostCSS per permetterti di scrivere questo tipo di sintassi.
Vi invito a leggere il documentazione per saperne di più e per giocare con il demo interattiva per testare tutte le possibilità.

CssAvanti

CSS4, la prossima versione di CSS, promette di cambiare il modo in cui scriviamo CSS e utilizziamo i selettori.
Purtroppo, questa versione delle specifiche è ancora in fase di sviluppo attivo e non è stata ancora annunciata una data di rilascio.
Fortunatamente per noi, un plugin chiamato CssNext è qui per aiutarti se desideri utilizzare alcune funzionalità della prossima versione di CSS.
Tutte queste funzionalità sono elencate sul sito ufficiale di CssNext: http://cssnext.io/features/
E puoi anche giocarci qui: http://cssnext.io/playground/

CssNano

Ultimo ma non meno importante, CssNano comprimerà e ottimizzerà il tuo CSS con l'uso di diversi moduli che si occuperà dell'ottimizzazione.
Ti consiglio di disabilitare l'indice z prima, dal momento che molto probabilmente rovinerà il modo in cui è organizzato il tuo z-index.
Puoi rivedere l'elenco delle ottimizzazioni qui: http://cssnano.co/optimisations/
E puoi anche chattare con il creatore di CssNano su Gitter: https://gitter.im/ben-eb/cssnano
Ora, vediamo come implementare questo plugin con Gulp.

Gulp x PostCSS

Sorso

Prima di tutto, dovrai installare Gulp, Gulp Load Plugins e Gulp PostCSS come dipendenze dev digitando il seguente comando nel tuo terminale

npm i -D gulp gulp-load-plugins gulp-postcss

Puoi quindi creare un file chiamato gulpfile.js con cui caricheremo Gulp
 

var gulp = require('gulp'),

E i plug-in Gulp Load con

$ = require('gulp-load-plugins')();

I plug-in di caricamento Gulp ci aiuteranno quindi a caricare qualsiasi plug-in Gulp scrivendo $ prima del plug-in che vogliamo utilizzare nella nostra attività.

PostCSS

Quindi, dobbiamo installare i plug-in PostCSS che vogliamo utilizzare, verranno anche installati come dipendenza dev usando questo comando

npm i -D cssnano cssnext precss

Quando tutti questi plugin sono installati, li carichiamo nel nostro gulpfile.js

// PostCSS Plugins
var cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

Quindi possiamo iniziare a scrivere la nostra attività Gulp CSS

// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
 });

In questa attività, dobbiamo prima memorizzare in una variabile tutti i plug-in PostCSS che vogliamo utilizzare

var processors = [cssnext, precss, cssnano({zindex: false})];

Passiamo l'opzione oggetto zindex: false a CssNano per disabilitare il rebase dei nostri z-index.
Per elaborare il nostro file CSS, dobbiamo recuperarlo con

return gulp.src('./source/css/style.css')

Quindi possiamo elaborarlo con i nostri plug-in PostCSS memorizzati nella variabile dei processori.
Usiamo il metodo pipe per concatenare i processi

.pipe($.postcss(processors))

Per produrre il file elaborato, scrivere il codice seguente

.pipe(gulp.dest('./public/assets/stylesheets'));

E questo è tutto ciò di cui hai bisogno per elaborare i tuoi file CSS con i plug-in PostCSS.

var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
// PostCSS Plugins
var cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');
// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
var processors = [cssnext, precss, cssnano({zindex: false})];
return gulp.src('./source/css/style.css')
.pipe($.postcss(processors))
.pipe(gulp.dest('./public/assets/stylesheets'));
});

Per ulteriori approfondimenti, vi consiglio di leggere la guida molto completa e dettagliata di Tuts+: http://webdesign.tutsplus.com/series/postcss-deep-dive–cms-889
Ho anche creato un boilerplate utilizzando quei plug-in PostCSS per aiutarti a dare il via al tuo futuro progetto di sito Web statico: https://github.com/PierrickGT/PCGB