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 🤙
Top comments (0)