What is PostCSS

PostCSS is a JavaScript library that transforms CSS into JavaScript.

CSS is transpiled into an abstract syntax tree, which is represented with JavaScript objects. This transformation allows developers the opportunity to manipulate the CSS through those objects. Then, after our CSS has been processed, the objects are converted back into valid CSS.

PostCSS will not do anything to our CSS. It’s up to plugins to apply these changes!

And as it stands, there are hundreds of plugins available and no shortage of options.

Despite its name, it is neither a post-processor nor a pre-processor, it is just a transpiler that turns a special PostCSS plugin syntax into a Vanilla CSS. You can think of it as the Babel tool for CSS.

PostCSS vs SASS

SASS

SASS is preprocessor scripting language for CSS. Built as an extension language to CSS, this preprocessor scripting language allowed Developers to leverage simple programming concepts such as conditional statements and variables for writing CSS, and as a result, working with CSS became so much more enjoyable.

The biggest gripe with SASS and preprocessors in general, is that they’re not easily extendable.

PostCSS

PostCSS is just born for extendable. You can use PostCSS in conjunction with existing preprocessors like Sass, Less, and Stylus. Or you can use it as an alternative to all of them since it has all the required functionalities to be used alone.

Set Up PostCSS

Using PostCSS CLI

install CLI

npm i postcss-cli

Then We can run the following command directly in the terminal:

postcss src/style.css --use postcss-import --dir public --watch

Using NPM scripts

Inside the package.json file in the “scripts”, we need to type the following: "postcss:watch": "postcss src/style.css --use postcss-import --dir public --watch"

The above command will create a new directory called ‘public’ which contains our final Vanilla CSS file, which has the same name as the source file (style.css).

Using PostCSS Config File

In the root directory of your project, create a file and name it postcss.config.js. The code inside it will look like this:

module.exports = {
    plugins: [
     	require('postcss-import'),
        require('postcss-mixins'),
        require("stylelint"),
        require('postcss-preset-env')({ stage: 1 }),
        require('cssnano'),
    ],
}

The command that runs PostCSS in our package.json file needs to be changed to: "postcss:watch": "postcss src/style.css --dir public --watch"

Using Task Runners (or Module Bundlers)

PostCSS can be set to work with various task runners like Gulp, Grunt, and module bundlers like Rollup and Webpack.

PostCSS Plugin

The popular CSS framework TailwindCSS can be a PostCSS plugin.

You can write your own plugin. SASS, LESS and Stylus can work as a PostCSS plugin to integrate into your work flow.

Here list some popular plugins:

PostCSS Import

One of the basic and most important plugins to use is postcss-import. It lets us import CSS files into other files. github doc

@import './components/comp1.css';
@import './components/comp2.css';

Autoprefixer

This is one of the most popular PostCSS plugins. You use it to parse and add vendor prefixes like -webkit, -moz, and -ms to CSS rules using values from the Can I Use website.

Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries.

For example, We can configure our Browserslist in the package.json file using a “browserslist” key:

 "browserslist": [ 
    "defaults"  
 ]

Now it work like this:

label {
  user-select: none;
}

Based on our previous “browserslist” settings, the final output will be:

label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

PostCSS Preset Env

This plugin enables us to use modern CSS (like nesting and custom media queries) in our code, by converting it to Vanilla CSS which can be understood by browsers.

It has a stage option which determines which CSS features to polyfill based upon their stability in the process of becoming implemented as a web standard.

The stage can be 0 (experimental) to 4 (stable), or false. Stage 2 is the default.

This preset-env plugin includes by default the Autoprefixer plugin and the browsers option will be passed to it automatically.

PostCSS Nested

If we want only to use the nesting feature, then this plugin is the perfect choice as it produce the same result as the previous plugin.

PostCSS Mixins

Mixins allow you to define styles that can be re-used throughout your code.

Stylelint

This is a CSS linter that helps us avoid errors in our code before they break our User Interface (UI).

Cssnano

This is a minifier used to reduce the final CSS file size as much as possible so your code is ready for a production environment.

References