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