What is PostCSS? And How to Use it?

PostCss official Logo

In this article we will discuss:

• What is PostCSS?
• Features and advantages.
• Some Famous Plugins.
• How to use it?

What is PostCSS?

It is a JavaScript tool that transforms your CSS code into an abstract syntax tree (AST), then provides an (application programming interface) API for analyzing and modifying it using JavaScript plugins.

PostCSS provides a large ecosystem of plugins to perform different functionalities like linting, minifying, inserting vendor prefixes beside many other things.

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 like the Babel tool for CSS.

It can be used in conjunction with existing preprocessors like Sass, Less, and Stylus or as an alternative to all of them together since it has all the required functionalities to be used alone.

You may have already been using PostCSS without knowing that as it is used in the famous Autoprefixer plugin which is used to automatically prepend vendor prefixes to CSS properties that require them.

It is also used by other technologies like Vite and Next.js. As well as the famous CSS framework TailwindCSS which is a PostCSS plugin.

Features and advantages:

• Fully customizable so you can use only the plugins and features you need.
• It produces fast build times compared with other preprocessors.

• You can write your own custom plugins.
• You can use it with regular CSS as well as alongside other preprocessors like Sass.

PostCSS is all about plugins_ on its own, it is simply an API_with an ecosystem of 356 plugins ( as the date of this article). Each plugin was implemented for a specific task.

You can navigate through them using the plugin directory on the official PostCSS GitHub page, or using this searchable catalog of PostCSS plugins.

Famous plugins:

1- Autoprefixer:

One of the most popular PostCSS plugins. It is used to parse and add vendor prefixes like -webkit, -moz, and -ms to CSS rules using values from Can I Use website.

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

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

"browserslist": [
    "defaults"
  ]

The defaults query above is a short equivalent to: > 0.5%, last 2 versions, Firefox ESR, not dead .

Or using a .browserslistrc file in the root directory, and inside it, we type our configurations.

defaults

2- PostCSS Normalize:

It enables us to use some parts of the famous library normalize.css or sanitize.css.

These CSS libraries provide consistent, cross-browser default styling of HTML elements.

3- Cssnano:

A minifier used to reduce the final CSS file size as much as possible to be ready for the production environment.

4- PostCSS Preset Env:

It enables us to use modern CSS (like nesting) 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 web standard.

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

For nesting, we need to use stage 1.

require(‘postcss-preset-env’)({ stage: 1 })

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

5- Stylelint:

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

Setting Up PostCSS:

Before starting, I highly recommend you to:

1- Download or fork the following postcss-tutorial repository to your machine and try to follow along. (Please pay attention to the README.md file).

2- Install the PostCSS Language Support plugin if you are using Visual Studio Code editor, so your editor can recognize any new syntax and stop giving you errors.

To start using PostCSS we need first to install it and its command-line interface(CLI) using this command:

npm i -D postcss postcss-cli

• D: is short for — save-dev to save the installed packages as dev dependencies.

To begin using PostCSS we need to have at least one plugin downloaded.

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

We can download it using the command below:

npm i -D postcss-import

Note: postcss import is different than the import rule in native CSS. The import rule in native CSS must be avoided since it can prevent stylesheets from being downloaded concurrently which affects the loading speed and performance.

The browser has to wait for every imported file to be loaded instead of being able to load all the CSS files at once.

Now to start using our first postcss-import plugin we have multiple options:

1- Using the PostCSS (CLI):

To do that we need to make sure we install the postss-cli globally:

npm i -g postcss-cli      /-g to download it globally

Then we can run the following command directly on the terminal:

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

2- Through NPM scripts in the package.json file:

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)

If we want the output file to have a different name than the source file name we need to replace — dir public with -o public/<file-name>.

Like for example: -o public/main.css

We can configure our command to run in PostCSS CLI with different options to get our desired result.

Now to run the command above we type: npm run <command name> in our terminal. (our <command name> is postcss:watch, you can pick any name you want).

As our project gets bigger, we are more likely to add more plugins. For every plugin used, we need to write its name down after the --use keyword in the command above which makes it incredibly long and not a good practice.

The alternative solution is to create a postcss.config.js file.

3- Setting up PostCSS config file:

In the root directory of your project create a file and name it postcss.config.js .

The code inside it will be like this:

Inside the plugins array, we add our plugins.

It is very important to add the postcss-import plugin at the top of our list since it is required in the documentation.

The command that runs PostCSS in our package.json file needs to be changed to:

"postcss:watch": "postcss src/style.css --dir public --watch"

As we can notice the only change required is to remove the --use option since the list of our plugins is mentioned is a separate file now.

4- 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.

In this section, we will show the Grunt setup for PostCSS.

First, we need to install grunt locally into the “dev” dependencies.

npm i -D grunt

And then Install grunt-cli globally.

npm install -g grunt-cli

Now we need to create a file in the root of our project and name it Gruntfile.js.

Then we need to install a specific plugin @lodder/grunt-postcss to let us run PostCSS using Grunt through the following command;

npm i -D @lodder/grunt-postcss

Inside the initCnfig function we set tp our PostCSS configuration.

Here we will stick to the basic minimum to run PostCSS, which is:

• Calling our plugins inside the processors array.
• Setting up the source file and destination file in the dist object.

For more configuration, you can always check the official documentation for the @lodder/grunt-postcss.

To finish our configuration we need to load our plugin using: grunt.loadNpmTasks method. (see line 18 above).

Finally to run our Grunt task we type:

grunt postcss

Conclusion:

PostCSS has been out there since 2015, and it is very popular among other CSS preprocessors

It can be used as stand-alone or in conjunction with other existing preprocessors.

But when should you use it, and how (stand-alone or in conjunction) depends on your project needs.

Final words I advise you to try it. Happy Coding :)