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
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.