Skip to content
FLAVIO COPES
flaviocopes.com

Introduction to PostCSS

By

Learn what PostCSS does, how to run it with the CLI and a configuration file, and how plugins such as Autoprefixer, PostCSS Preset Env, and cssnano work.

~~~

What is PostCSS?

PostCSS is a tool for transforming CSS with JavaScript plugins.

PostCSS parses a stylesheet into a syntax tree. Plugins inspect or change that tree, and PostCSS writes the result as CSS.

PostCSS itself does not decide which transformations to apply. You choose the plugins for your project.

Common uses include:

Many frameworks and build tools already run PostCSS behind the scenes. Check their documentation before adding another PostCSS step.

The official PostCSS documentation describes the core tool and plugin ecosystem.

Install PostCSS and its CLI

Install PostCSS locally as a development dependency:

npm install --save-dev postcss postcss-cli

Install the plugins you need too. For example:

npm install --save-dev autoprefixer

Local installation keeps the version in your project. You can run the CLI through npx or an npm script.

Configure plugins

Create postcss.config.js in the project root:

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

Plugins run in array order. This matters when one plugin expects the output of another.

For a longer plugin chain, keep every plugin in this configuration file instead of passing them all on the command line.

Run PostCSS

Process one file and write the result to another file:

npx postcss src/styles.css --output dist/styles.css

You can add --watch during development:

npx postcss src/styles.css --output dist/styles.css --watch

See the official PostCSS CLI reference for globs, directories, source maps, and other options.

Useful PostCSS plugins

PostCSS is useful because you can build a small pipeline for your needs.

The official PostCSS plugin directory is a good place to start.

Autoprefixer

Autoprefixer adds and removes vendor prefixes based on your supported browsers.

It uses Browserslist and Can I Use data. Put your browser targets in a .browserslistrc file or the browserslist field in package.json.

You write standard CSS:

::placeholder {
  color: gray;
}

Autoprefixer adds a prefixed form only when your browser targets need it.

PostCSS Preset Env

PostCSS Preset Env converts selected modern CSS features according to your browser targets.

It contains Autoprefixer, so you normally do not add Autoprefixer separately when using this preset.

It replaces the deprecated postcss-cssnext package.

postcss-import

postcss-import resolves @import rules and combines local stylesheets.

Put it near the start of the plugin chain so later plugins can process the imported CSS.

postcss-nested

postcss-nested unwraps a Sass-like nesting syntax.

Native CSS nesting is now available in modern browsers. Use this plugin when its syntax or your browser targets still make it useful.

PostCSS Modules

PostCSS Modules transforms CSS Modules class names and exports their mappings.

CSS Modules are a build-tool convention, not part of the CSS language.

cssnano

cssnano optimizes and minifies CSS for production.

Its default preset applies transformations intended to be safe. More aggressive presets can change behavior, so review their options before enabling them.

How is PostCSS different from Sass?

Sass is a language with a defined set of features such as variables, mixins, and modules. It compiles Sass syntax to CSS.

PostCSS is a toolkit. Its behavior comes from the plugins you configure.

You do not have to choose one or the other. A project can compile Sass first, then run PostCSS for tasks such as prefixing or minification.

Tagged: CSS · All topics
~~~

Related posts about css: