POSTCSS

PostCSS is a tool for transforming CSS with JavaScript plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more

PostCSS is can be a tool that refers itself as PostCSS and also can be the ecosystem powerted by that tool. PostCSS the tool is a Node.js module that parses CSS into an abstract syntax tree (AST), passes that AST through any number of plugin functions and then converts that AST back into a string, which you can output to a file.

Autoprefixer is one of the most popular PostCSS plugins. PostCSS has over 200 plugins.

Why PostCSS?

Let's look at why PostCSS can become very useful to your day today workflow.

• PostCSS provides diverse functionality available via its plugin ecosystem.
• The option to use it with regular CSS
• Its modular
• Its rapid compilation time
• The ability to create libraries that don’t depend on one pre-processor
• The accessibility of creating your own plugins
• Its seamless deployment with many popular build tools

Plugin Ecosystem

PostCSS plugins can vary from media queries to future syntax. Let's look at some of these categories.

Future CSS

Autoprefixer

The autoprefixer plugin adds vendor prefixes, using data from Can I Use

CSSNext

The cssnext plugin allows you to use future CSS features today.

Syntax Sugar

PresCSS

The precss tool contains plugins for Sass-like features like nesting or mixins.

Short

The short plugin adds and extends numerous shorthand properties.

Images and Fonts

PostCSS Assets

The postcss-assets plugin inserts image dimensions and inlines files.

PostCSS Sprites

The postcss-sprites plugin generates image sprites.

Linters

Style Lint

The stylelint plugin is a modular linter for CSS.

Speed

PostCSS is topping the test rankings when it comes to speed of loading. It runs on JavaScript and you only have to load the plugins you need.

According to PostCSS, the results of such a test produced following results:

PostCSS:   40 ms
Rework:    75 ms   (1.9 times slower)
libsass:   76 ms   (1.9 times slower)
Less:      147 ms  (3.7 times slower)
Stylus:    166 ms  (4.1 times slower)
Stylecow:  258 ms  (6.4 times slower)
Ruby Sass: 1042 ms (26.0 times slower)

Create Your Own Plugins

Plugins for PostCSS are written in JavaScript, and as such anyone who can write JavaScript can create a plugin for any purpose they want.

Preprocessor projects like Stylus, Sass and LESS are great but they can’t be everything to everyone. With PostCSS on the other hand, if you want a new feature, you can go ahead and make it.

Using PostCSS Plugins in Webpack

In your config file for Webpack, you can add a property for PostCSS as below:

 module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        return [require('autoprefixer'), require('precss')];
    }
  }

Conclusion

Working with PostCSS may convince you that CSS processing exists to solve problems; that pretty much all problems have multiple solutions; and that you might be qualified to pick between alternative solutions, or even construct your own.