PostCSS is a new tool that makes it easy to develop JavaScript plugins that transform styles. That opens up a new world of possibility for new plugins that make it easier and easier to work with CSS. The post introduces two of the most popular PostCSS plugins: cssnext and cssnano.
To give your an example, let’s say we have the following CSS styles:
:root {
--text: hotpink;
--bg-color: #F9EC31;
--flex-center: {
display: flex;
margin: auto;
}
}
.box {
background-color: var(--bg-color);
color: color(hotpink whiteness(25%));
@apply(--flex-center);
}
.warn {
@apply(--flex-center);
}
cssnext will transform the styles into this:
.box {
background-color: #F9EC31;
color: rgb(255, 64, 159);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: auto;
}
.warn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: auto;
}
cssnext and cssnano can be configured to work according to your specific needs, but here let’s just show how to use the defaults. This should hopefully cover most of your use-cases.
We’ll also use the PostCSS-CLI in this example, but you can also use PostCSS with Webpack or Grunt if that suits your workflow better.
Install PostCSS with the cssnext and cssnano plugins through npm:
$ npm install --save-dev postcss postcss-cli postcss-cssnext cssnano
Or through Yarn:
$ yarn add postcss postcss-cli postcss-cssnext cssnano --dev
You use the PostCSS command line interface by providing the input and output files and the PostCSS plugin(s) to use. Specify the plugins with the –use flag, the output file with the –ouput flag and the input file is simply provided last without any flags:
$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css
You can also use the PostCSS CLI in watch mode, so that it listens for changes to your input file:
$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css --watch
You can also specify more fine-grained configuration options in a json configuration file and specify the config file with the –config flag:
$ postcss --config postcss-config.json
Your config file will look like this:
{
"use": ["postcss-cssnext", "cssnano"],
"input": "styles.css",
"output": "styles-out.css"
}
To make your workflow easier, simply setup a postcss script in your project’s package.json file:
"scripts": {
"postcss": "postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css"
}
Now all your have to do is run the following command:
$ npm run postcss
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up