Jump into the future of CSS with PostCSS

postcss-logoWhat 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.


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

[code lang=”css”] :-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
[/code] You can just write
[code lang=”css”] :fullscreen a {
display: flex
[/code] 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


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.


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/


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


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
[code lang=”js”]var gulp = require(‘gulp’),[/code] And Gulp Load PLugins with
[code lang=”js”]$ = require(‘gulp-load-plugins’)();[/code] Gulp Load Plugins will then help us to load any Gulp plugin by writing $ before the plugin we want to use in our task.


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
[code lang=”js”] // PostCSS Plugins
var cssnext = require(‘cssnext’),
precss = require(‘precss’),
cssnano = require(‘cssnano’);
[/code] Then we can start to write our Gulp CSS task
[code lang=”js”] // Gulp task to process CSS with PostCSS plugins
gulp.task(‘css’, function() {
[/code] In this task, we first have to store in a variable all the PostCSS plugins we want to use
[code lang=”js”]var processors = [cssnext, precss, cssnano({zindex: false})];[/code] 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
[code lang=”js”]return gulp.src(‘./source/css/style.css’)[/code] Then we can process it with our PostCSS plugins stored in the processors variable.
We use the pipe method to chain the processes

[code lang=”js”].pipe($.postcss(processors))[/code] To output the processed file write the following code
[code lang=”js”].pipe(gulp.dest(‘./public/assets/stylesheets’));[/code] And that’s all you need to process your CSS files with the PostCSS plugins.
[code lang=”js”] 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’)
[/code] 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