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.

$ npm install --save-dev postcss postcss-cli postcss-cssnext cssnano

$ yarn add postcss postcss-cli postcss-cssnext cssnano --dev

$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css

$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css --watch

$ postcss --config postcss-config.json

{
  "use": ["postcss-cssnext", "cssnano"],
  "input": "styles.css",
  "output": "styles-out.css"
}

"scripts": {
  "postcss": "postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css"
}

$ npm run postcss