PostCSS

Do you want to use future CSS features in your code right now? Want to never have to worry about those pesky vendor prefixes ever again? PostCSS is the answer!

In this simple, easy to understand article I will guide you through setting up and using PostCSS in your projects.

Requirements

The only thing you need is the latest version of Node.js.

Getting Started

First, navigate to your project directory using your preffered terminal. Next, run the command

npm init -y

This will create a package.json file, which is required for PostCSS to work. We will come back to this file later.

Now run

npm install --save-dev postcss postcss-cli

This commmand creates a node_modules directory, installs PostCSS and the PostCSS CLI into it, and also creates a package-lock.json file. We don't need to do anything with the node_modules folder or package-lock.json, they are just needed for PostCSS.

Next, create a file named postcss.config.js. In this file we will list all the PostCSS plugins we install.

Installing plugins

You install a plugin (full list of plugins here) the same way you installed PostCSS and the PostCSS CLI, like this:

npm install --save-dev <plugin name>

which can actually be shortened to

npm i -D <plugin name>

For example, to install the cssnano plugin which minifies your css for faster load times, you would run:

npm i -D cssnano

then, in the postcss.config.js file add this boilerplate:

module.exports = {
    map: {},
    plugins: [

    ],
};

Let's break this down.

map: {} is where you put the options for generating source maps. The only option I change is setting the inline attribute to false, like this:

map: {inline: false}

This disables the default inline source map which is stored as a base64 encoded string at the bottom of the output CSS file, and instead creates a separate source map with the extention .css.map

plugins: [] is where you list the plugins you install, in this format:

plugins: [
    require("<plugin1>")(),
    require("<plugin2>")(),
    etc.
]

Some plugins have options which you would put in the second set of brackets, after the plugin name, but many don't.

For example if I have installed cssnano and autoprefixer (which adds vendor prefixes for you), and don't want an inline source map, my postcss.config.js file would look like this:

module.exports = {
    map: {inline: false},
    plugins: [
        require("cssnano")(),
        require("autoprefixer")()
    ],
};