Tutorial

Introduction to PostCSS With cssnext and cssnano

Published on January 16, 2017
author

Alligator.io

Introduction to PostCSS With cssnext and cssnano

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.

  • cssnext allows you to use the future of CSS today. You can use upcoming features or features that are not supported in all browsers like CSS variables and the CSS color function. cssnext will transform your styles so that they work in all browsers. In other words, cssnext allows you to write your styles with the actual CSS syntax instead of a different pre-processor syntax. cssnext will also automatically add vendor prefixes to your styles, so no need to use prefixes yourself when your write your CSS.

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;
}
  • cssnano minifies and compresses your CSS. It removes whitespace, eliminates duplicate rules, removes outdated vendor prefixes, removes comments and performs a lot of other optimizations.

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.

Installing PostCSS, the PostCSS-CLI, cssnext & cssnano

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

Using the PostCSS-CLI

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"
}

npm Script

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.

Learn more about our products

About the authors
Default avatar
Alligator.io

author

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.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more