Write modern CSS with PostCSS
Tags: css, postcss, javascript
Published: 2021-11-16 12:28:07

## 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](https://www.stefanjudis.com/notes/can-we-have-custom-media-queries-please/)? Want to mess with [CSS Houdini](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Houdini)? 

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

Hey, we can even use [container queries](https://tomquinonero.com/blog/a-guide-to-css-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](https://github.com/webpack-contrib/postcss-loader)
- Gulp: Use [gulp-postcss](https://github.com/postcss/gulp-postcss)
- Parcel: PostCSS is already included in Parcel!
- CLI: You can also use PostCSS in your terminal with [postcss-cli](https://github.com/postcss/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:

```bash
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`:

```bash
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:

```json
{
	...
	"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/](https://www.postcss.parts/) and use them in postcss.config.js.
> 

So let's add some plugins! 

```bash
yarn add -D postcss-import cssnano autoprefixer
```

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

```js
// 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](https://github.com/2createStudio/postcss-sprites): Group all your image into a large sprite using `background-position`. A painful process made so simple!
- [RuckSack](https://github.com/madeleineostoja/rucksack#responsive-typography): A lot of small few quality of life improvements, my favorite being using making HEX color transparent using `rgba(#fff, 0.8)`
- [Easing Gradient](https://github.com/larsenwork/postcss-easing-gradients): Make non linear gradients like so: `background: linear-gradient(to bottom, black, ease, transparent)`
- [Font Magician](https://github.com/csstools/postcss-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](https://twitter.com/tomquinonero) for more tips and resources 🤙***