PostCSS: Future of CSS

Tutoriel HTML-CSS : PostCSS — YouTube

There are always new tools being introduced when it comes to CSS which help us to transform styles faster and in efficient manner. This past year there was a buzz in the development community about PostCSS. I have been using PostCSS for a couple of months and trust me it has sped up the workflow of front-end development, and improved the quality of CSS through Javascript Plugins.

But for those who’ve not heard of PostCSS until now, here’s a very quick analogy written by Ashleynolan.

Think of a preprocessor such as Sass like buying a house that is fully built. You know its features because it’s already fully formed — its rooms and features are already defined. However, adding new rooms and features to that house can be difficult.

On the other hand, PostCSS is like you have inherited a plot of land and a load of bricks. You can essentially create whatever you want, with whatever features you need.

So, PostCSS is a tool that lets you add PostCSS plugins that enable you to manipulate your CSS in different ways.

But please keep in mind PostCSS isn’t necessarily a replacement for Sass or LESS.

What is PostCSS ?

PostCSS is a tool for transforming styles with JS plugins. These plugins can analyze your CSS, support variables, mixins, transpile future CSS syntax, inline images, and more. Meaning, it can act like a Pre-Processor if you want it to and allows you to use tools fulfilling your needs. So you just 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

Why use PostCSS?

Most of today’s developers rarely start a project from the scratch. They prefer a framework or a boilerplate which holds various mixins, variables, and functions which have separate stylesheets for each of them. This brings more time to keep the things organized. So, Maintaining a library of Sass or LESS snippets can be an overwhelming task and can leave a project bloated. Here, PostCSS enables easily installable, plug-and-play modules, making the development process more flexible for the unique needs of a project.

PostCSS moves all of the code needed to create functions, utilities, and mixins out of our production style sheets and wraps them as plugins. Now, for each project, we can pick and choose the tools needed by including plugins in our task runner.

Benefits

• Use tomorrow’s CSS syntax, today.
• Easy to contribute to in the form of custom plugins.
• More control over the features used.
• Faster compile times.

Adding PostCSS to your workflow

PostCSS can be easily integrated into your current workflow. PostCSS has a JavaScript API which integrates seamlessly with task runners like Gulp, Grunt and Web pack. The tutorial below demonstrates how to incorporate PostCSS in your workflow via Gulp.

If you are unfamiliar with Gulp, I’d recommend reading Gulp workflow to get up and running with the tool.

For Grunt:

• https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-grunt-setup--cms-24545

For Webpack:

• https://github.com/postcss/postcss-loader

Let’s get started

In your project’s gulpfile.js, we need to require our installed PostCSS module through running

$ npm install --save-dev gulp-postcss

Basic Usage

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
gulp.task('css', function () {
var processors = [
 autoprefixer({browsers: ['last 1 version']}),
 cssnano(),
];
return gulp.src('./src/*.css')
 .pipe(postcss(processors))
 .pipe(gulp.dest('./dest'));
});

Passing additional options to PostCSS

The second optional argument to gulp-postcss is passed to PostCSS.

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var nested = require('postcss-nested');
var scss = require('postcss-scss');
gulp.task('default', function () {
 var processors = [nested];
 return gulp.src('in.css')
 .pipe(postcss(processors, {syntax: scss}))
 .pipe(gulp.dest('out'));
});

To run the task, type gulp in the command line. Here in the above example autoprefixer and cssnano are the PostCSS plugins.

Few PostCSS plugins highlights:

1. Autoprefixer

If you’ve used a Pre-Processor (SASS/LESS) before, you already know you don’t have to write all the vendor prefixes ever again.

For installation, the documentation is available here: https://github.com/postcss/autoprefixer

For example instead of writing

.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

You can just write

.example {
  display: flex
}

2. CSSNext-Use tomorrow’s CSS syntax

There is a plugin called CssNext which helps us 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/

:root {
  --centered: {
    display: flex;
    align-items: center;
    justify-content: center;
  };
}
.centered {
  @apply --centered;
}

//Output CSS                                                                                
.centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

The above examples are just a highlights. I will be covering a series of 10 most popular PostCSS Plugins with its full setup usages.

So, stay-tuned !!

Conclusion

I encourage you to explore the PostCSS world and try all of the plugins available and test their abilities in the PostCSS Playground.

I hope you’ve found this blog helpful. Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions. Till then,

Keep on Hacking !! Cheers and to support me you can buy me a coffee!!