What is PostCSS?

To explain what PostCSS is, we first need to understand what PostCSS isn’t.
Indeed, when people hear first about PostCSS, they tend to think it’s a new kind of Pre-Processor like SASS, LESS or Stylus.
It can act like a Pre-Processor if you want it to or even like a Post-Processor, an optimization tool, a plugin to write future syntax, you name it…
Instead, the main purpose of PostCSS is to allow you to use tools fulfilling your needs.
So you need to see PostCSS as a build tool allowing you to manipulate your CSS with the use of various JavaScript plugins that you can find on http://postcss.parts
Since there’s a lot of plugins, we will review through this article the ones that are the most powerful and commonly used.
We will also see how to use them with Gulp and how you can create one single task to process your CSS files.

Autoprefixer

If you’ve used a Pre-Processor before, you already know how pleasant it is not to have to write all the vendor prefixes ever again.
For example, instead of writing

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

You can just write

:fullscreen a {
 display: flex
}

If you want to try it yourself, you can use the interactive demo: http://autoprefixer.github.io
The documentation is available here: https://github.com/postcss/autoprefixer

PreCSS

Even if PostCSS is not a Pre-Processor like SASS, you can still use some PostCSS plugins to use Sass-like markup in your CSS files.
The most commonly used plugin is certainly PreCSS that aggregates a bunch of PostCSS plugins to allow you to write this kind of syntax.
I invite you to read the documentation to learn more about it and to play with the interactive demo to test all the possibilities.

CssNext

CSS4, the next version of CSS, promise to change the way we write CSS and use selectors.
Sadly, this version of the spec is still in active development and no release date has been announced yet.
Luckily for us, a plugin called CssNext is here to help you if you want to use some features of the next version of CSS.
All those features are listed on the official website of CssNext: http://cssnext.io/features/
And you can also play with it here: http://cssnext.io/playground/

CssNano

Last but not least, CssNano will compress and optimize your CSS with the use of different modules that will take care of the optimisation.
I recommend you to disable the z-index one, since it will most likely mess up with the way your z-index are organized.
You can review the list of optimisations here: http://cssnano.co/optimisations/
And you can even chat with the creator of CssNano on Gitter: https://gitter.im/ben-eb/cssnano
Now, let’s see how to implement this plugins with Gulp.

Gulp x PostCSS

Gulp

First of all, you’ll need to install Gulp, Gulp Load Plugins and Gulp PostCSS as dev dependencies by typing the following command in your terminal

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

You can then create a file called gulpfile.js where we will load Gulp with
 

var gulp = require('gulp'),

And Gulp Load PLugins with

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

Gulp Load Plugins will then help us to load any Gulp plugin by writing $ before the plugin we want to use in our task.

PostCSS

Then, we need to install the PostCSS plugins we want to use, they will also be installed as dev dependency by using this command

npm i -D cssnano cssnext precss

When all those plugins are installed we load them in our gulpfile.js

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

Then we can start to write our Gulp CSS task

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

In this task, we first have to store in a variable all the PostCSS plugins we want to use

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

We pass the option object zindex: false to CssNano in order to disable the rebase of our z-indexs.
To process our CSS file, we need to retrieve it with

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

Then we can process it with our PostCSS plugins stored in the processors variable.
We use the pipe method to chain the processes

.pipe($.postcss(processors))

To output the processed file write the following code

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

And that’s all you need to process your CSS files with the PostCSS plugins.

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'));
});

For further reading, I recommend you to read the very complete and detailed guide of Tuts+: http://webdesign.tutsplus.com/series/postcss-deep-dive–cms-889
I’ve also created a boilerplate using those PostCSS plugins to help you kickstart your future static website project: https://github.com/PierrickGT/PCGB