Write modern CSS with PostCSS

What is PostCSS?

PostCSS is a tool that builds CSS using JavaScript.

PostCSS allows developers to write simpler CSS and push the complexity at build time. It act as a pre-processor, an autoprefixer and a linter for your CSS code.

It has a plugin ecosystem that opens us to tons of possibilities.

Ever wanted to use custom media queries? Want to mess with CSS Houdini?

Wouldn't that be cool if the @font-face were generated automatically?

Hey, we can even use container queries right now with PostCSS (and a small Polyfill✌)!

Usage

To use PostCSS in your project, find and add the PostCSS extension to your build tool:

• Webpack: Use postcss-loader
• Gulp: Use gulp-postcss
• Parcel: PostCSS is already included in Parcel!
• CLI: You can also use PostCSS in your terminal with postcss-cli

You can configure PostCSS with a postcss.config.js with all of these extensions.

For our example, we'll use the most generic solution, the CLI.

Let's start a new project and install our dependencies:

yarn add -D postcss postcss-cli

We'll also create a src/style.scss file.

We can now tell PostCSS to build our file and output it to dist/style.css:

yarn postcss src/style.scss -o dist/style.css

Let's make it into a build and a dev NPM script, so we can call it easily:

{
    ...
    "scripts": {
    "build": "yarn postcss src/style.scss -o dist/style.css",
    "dev": "yarn postcss src/style.scss -o dist/style.css --watch"
  }
    ...
}

When running PostCSS we'll have a warning message saying:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

So let's add some plugins!

yarn add -D postcss-import cssnano autoprefixer

Let's create a postcss.config.js config file:

// postcss.config.js

module.exports = {
  plugins: [
    require("postcss-import"),
        require("autoprefixer"),
    require("cssnano")({
      preset: "default",
    }),
  ],
};

This configuration will allow you to use @import, prefix the properties that needs to and will minify it!

This is how you use any PostCSS plugin. And that config file can be imported into any project!

In the next section, I've listed the most game changer PostCSS plugins to me.

Notable PostCSS Plugins

• PostCSS Sprites: Group all your image into a large sprite using background-position. A painful process made so simple!
• RuckSack: A lot of small few quality of life improvements, my favorite being using making HEX color transparent using rgba(#fff, 0.8)
• Easing Gradient: Make non linear gradients like so: background: linear-gradient(to bottom, black, ease, transparent)
• Font Magician: Magically generate @font-face rules! They can be stored locally or come from Google font!

Congratulations 🥳
You now get PostCSS, and can integrate it to your project

I'm Tom Quinonero, I write about design systems and CSS, Follow me on twitter for more tips and resources 🤙