Using postcss-cssnext

How to migrate from cssnext to postcss-cssnext

# Why postcss-cssnext? What is the difference with cssnext?

# Short answer: PostCSS

If you’re using PostCSS in your build process, and you were using cssnext, you can quickly switch to only postcss-cssnext (check the Migration section here below).

# Wait? What is PostCSS?

At first, before PostCSS became popular, cssnext was designed to be a complete tool. Thus, cssnext included some options that don’t really belong in a PostCSS plugin focused on the future of CSS (e.g., import, url, compress, plugins…) .

These days, most people use PostCSS directly (so they can easily adjust and choose their CSS transformations). So we decided to make the integration of cssnext simpler by providing a simple (real) plugin.

Also, having to maintain several cssnext and PostCSS runners that do almost the same thing is not optimal.

# Migration

If you were using cssnext with some options, here is what you need to know:

# Options

# Options import, url, compress, messages
# Option plugins

Just add the plugins directly in your PostCSS list.

# Options sourcemap, map, to, from

These options were just proxy to PostCSS source map options.

# Examples

If you were using cssnext with default options, you might just need this:

$ npm uninstall cssnext [--save[-dev]]
$ npm install postcss postcss-import postcss-url postcss-cssnext postcss-browser-reporter postcss-reporter [--save[-dev]]

With the previous lines you might think that you are going backward by having a more complex boilerplate. But if you look carefully, you will notice that you might not be interested in some options.

Now that you have the appropriate plugins, here are some examples with some runners and previous default cssnext behavior.

# postcss-cli
$ npm install postcss-cli --save-dev

Here is an example of the json config you might use with something like $ postcss -c postcss.config.json.

{
  "use": [
    "postcss-import",
    "postcss-url",
    "postcss-cssnext",
    // add your "plugins" here
    // ...
    // and if you want to compress
    // "cssnano",
    "postcss-browser-reporter",
    "postcss-reporter"
  ]
}
# grunt-postcss
$ npm uninstall grunt-cssnext --save-dev
$ npm install grunt-postcss --save-dev
grunt.initConfig({
  postcss: {
    options: {
      processors: [
        require("postcss-import")(),
        require("postcss-url")(),
        require("postcss-cssnext")(),
        // add your "plugins" here
        // ...
        // and if you want to compress
        // Disable autoprefixer, because it's already included in cssnext
        // require("cssnano")({ autoprefixer: false }),
        require("postcss-browser-reporter")(),
        require("postcss-reporter")(),
      ]
    },
    dist: {
      src: 'css/*.css'
    }
  }
});
# gulp-postcss
$ npm uninstall gulp-cssnext --save-dev
$ npm install gulp-postcss --save-dev
var gulp = require('gulp')
var postcss = require('gulp-postcss')

gulp.task('css', function () {
  return (
    gulp.src('./src/*.css')
    .pipe(postcss([
      require("postcss-import")(),
      require("postcss-url")(),
      require("postcss-cssnext")(),
      // add your "plugins" here
      // ...
      // and if you want to compress
      // Disable autoprefixer, because it's already included in cssnext
      // require("cssnano")({ autoprefixer: false }),
      require("postcss-browser-reporter")(),
      require("postcss-reporter")(),
    ]))
    .pipe(gulp.dest('./dest'))
  )
})
# postcss-loader
$ npm uninstall cssnext-loader --save-dev
$ npm install postcss-loader --save-dev
module.exports = {
  module: {
    loaders: [
      {
          test:   /\.css$/,
          loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function (webpack) {
    return [
      require("postcss-import")({ addDependencyTo: webpack }),
      require("postcss-url")(),
      require("postcss-cssnext")(),
      // add your "plugins" here
      // ...
      // and if you want to compress,
      // just use css-loader option that already use cssnano under the hood
      require("postcss-browser-reporter")(),
      require("postcss-reporter")(),
    ]
  }
}

With these examples, you’ll have future facing CSS. Feel free to adjust the configuration with the appropriate PostCSS runner.

Try postcss-cssnext in your browser now.