Salte para o futuro do CSS com PostCSS

logotipo postcssO que é PostCSS?

Para explicar o que é PostCSS, primeiro precisamos entender o que PostCSS não é.
De fato, quando as pessoas ouvem pela primeira vez sobre PostCSS, elas tendem a pensar que é um novo tipo de pré-processador como SASS, LESS ou Stylus.
Ele pode agir como um pré-processador se você quiser ou até mesmo como um pós-processador, uma ferramenta de otimização, um plugin para escrever sintaxe futura, você escolhe…
Em vez disso, o principal objetivo do PostCSS é permitir que você use ferramentas que atendam às suas necessidades.
Então você precisa ver o PostCSS como uma ferramenta de construção que permite manipular seu CSS com o uso de vários plugins JavaScript que você pode encontrar em http://postcss.parts
Como existem muitos plugins, vamos rever neste artigo quais são os mais poderosos e comumente usados.
Também veremos como usá-los com o Gulp e como você pode criar uma única tarefa para processar seus arquivos CSS.

Prefixador automático

Se você já usou um pré-processador antes, você já sabe como é agradável não ter que escrever todos os prefixos de fornecedores novamente.
Por exemplo, em vez de escrever

:-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
}

Você pode apenas escrever

:fullscreen a {
 display: flex
}

Se você quiser experimentar você mesmo, pode usar a demonstração interativa: http://autoprefixer.github.io
A documentação está disponível aqui: https://github.com/postcss/autoprefixer

Pré CSS

Mesmo que o PostCSS não seja um pré-processador como o SASS, você ainda pode usar alguns plugins do PostCSS para usar a marcação do tipo Sass em seus arquivos CSS.
O plugin mais usado certamente é o PreCSS que agrega um monte de plugins PostCSS para permitir que você escreva esse tipo de sintaxe.
Eu convido você a ler o documentação para aprender mais sobre isso e brincar com o demonstração interativa para testar todas as possibilidades.

CssPróximo

CSS4, a próxima versão do CSS, promete mudar a forma como escrevemos CSS e usamos seletores.
Infelizmente, esta versão da especificação ainda está em desenvolvimento ativo e nenhuma data de lançamento foi anunciada ainda.
Felizmente para nós, um plugin chamado CssNext está aqui para ajudá-lo se você quiser usar alguns recursos da próxima versão do CSS.
Todos esses recursos estão listados no site oficial do CssNext: http://cssnext.io/features/
E você também pode brincar com ele aqui: http://cssnext.io/playground/

CssNanoGenericName

Por último, mas não menos importante, o CssNano comprimirá e otimizará seu CSS com o uso de diferentes módulos que cuidará da otimização.
Eu recomendo que você desative o índice z um, já que provavelmente atrapalhará a maneira como seu z-index está organizado.
Você pode revisar a lista de otimizações aqui: http://cssnano.co/optimisations/
E você ainda pode conversar com o criador do CssNano no Gitter: https://gitter.im/ben-eb/cssnano
Agora, vamos ver como implementar esses plugins com o Gulp.

Gulp x PostCSS

Gole

Antes de tudo, você precisará instalar Gulp, Gulp Load Plugins e Gulp PostCSS como dependências de desenvolvimento digitando o seguinte comando em seu terminal

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

Você pode então criar um arquivo chamado gulpfile.js onde carregaremos o Gulp com
 

var gulp = require('gulp'),

E plugins Gulp Load com

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

Gulp Load Plugins nos ajudará a carregar qualquer plugin Gulp escrevendo $ antes do plugin que queremos usar em nossa tarefa.

Pós CSS

Então, precisamos instalar os plugins PostCSS que queremos usar, eles também serão instalados como dependência dev usando este comando

npm i -D cssnano cssnext precs

Quando todos esses plugins são instalados, nós os carregamos em nosso gulpfile.js

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

Então podemos começar a escrever nossa tarefa CSS Gulp

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

Nesta tarefa, primeiro temos que armazenar em uma variável todos os plugins PostCSS que queremos usar

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

Passamos a opção object zindex: false para CssNano para desabilitar o rebase de nossos z-indexs.
Para processar nosso arquivo CSS, precisamos recuperá-lo com 

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

Então podemos processá-lo com nossos plugins PostCSS armazenados na variável processors.
Usamos o método pipe para encadear os processos

.pipe($.postcss(processors))

Para gerar o arquivo processado, escreva o seguinte código

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

E isso é tudo que você precisa para processar seus arquivos CSS com os plugins 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'));
});

Para leitura complementar, recomendo a leitura do guia bem completo e detalhado do Tuts+: http://webdesign.tutsplus.com/series/postcss-deep-dive–cms-889
Eu também criei um clichê usando esses plugins PostCSS para ajudá-lo a iniciar seu futuro projeto de site estático: https://github.com/PierrickGT/PCGB