Introduction to PostCSS

• Introduction
• Why it’s so popular
• Install the PostCSS CLI
• Most popular PostCSS plugins
  • Autoprefixer
  • cssnext
  • CSS Modules
  • csslint
  • cssnano
  • Other useful plugins
• How is it different than Sass?

Introduction

PostCSS is a tool that allows developers to write CSS pre-processors or post-processors, called plugins. There is a huge number of plugins that provide lots of functionalities, and sometimes the term “PostCSS” means the tool itself, plus the plugins ecosystem.

PostCSS plugins can be run via the command line, but they are generally invoked by task runners at build time.

The plugin-based architecture provides a common ground for all the CSS-related operations you need.

Note: PostCSS despite the name is not a CSS post-processor, but it can be used to build them, as well as other things

Why it’s so popular

PostCSS provides several features that will deeply improve your CSS, and it integrates really well with any build tool of your choice.

Install the PostCSS CLI

Using Yarn:

yarn global add postcss-cli

or npm:

npm install -g postcss-cli

Once this is done, the postcss command will be available in your command line.

This command for example runs the autoprefixer plugin on CSS files contained in the css/ folder, and save the result in the main.css file:

postcss --use autoprefixer -o main.css css/*.css

More info on the PostCSS CLI here: https://github.com/postcss/postcss-cli.

Most popular PostCSS plugins

PostCSS provides a common interface to several great tools for your CSS processing.

Here are some of the most popular plugins, to get an overview of what’s possible to do with PostCSS.

Autoprefixer

Autoprefixer parses your CSS and determines if some rules need a vendor prefix.

It does so according to the Can I Use data, so you don’t have to worry if a feature needs a prefix, or if prefixes you use are now unneeded because obsolete.

You get to write cleaner CSS.

Example:

a {
    display: flex;
}

gets compiled to

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

cssnext

https://github.com/MoOx/postcss-cssnext

This plugin is the Babel of CSS, allows you to use modern CSS features while it takes care of transpiling them to a CSS more digestible to older browsers:

• it adds prefixes using Autoprefixer (so if you use this, no need to use Autoprefixer directly)
• it allows you to use CSS Variables
• it allows you to use nesting, like in Sass

and a lot more!

CSS Modules

PostCSS Modules let you use CSS Modules.

CSS Modules are not part of the CSS standard, but they are a build step process to have scoped selectors.

csslint

Linting helps you write correct CSS and avoid errors or pitfalls. The stylint plugin allows you to lint CSS at build time.

cssnano

cssnano minifies your CSS and makes code optimizations to have the least amount of code delivered in production.

Other useful plugins

On the PostCSS GitHub repo there is a full list of the available plugins.

Some of the ones I like include:

• LostGrid is a PostCSS grid system
• postcss-sassy provides Sass-like mixins
• postcss-nested provides the ability to use Sass nested rules
• postcss-nested-ancestors, reference any ancestor selector in nested CSS
• postcss-simple-vars, use Sass-like variables
• PreCSS provides you many features of Sass, and this is what is most close to a complete Sass replacement

How is it different than Sass?

Or any other CSS preprocessor?

The main benefit PostCSS provides over CSS preprocessors like Sass or Less is the ability to choose your own path, and cherry-pick the features you need, adding new capabilities at the same time. Sass or Less are “fixed”, you get lots of features which you might or might not use, and you cannot extend them.

The fact that you “choose your own adventure” means that you can still use any other tool you like alongside PostCSS. You can still use Sass if this is what you want, and use PostCSS to perform other things that Sass can’t do, like autoprefixing or linting.

You can write your own PostCSS plugin to do anything you want.