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 were using cssnext, you can quickly switch to only postcss-cssnext (check the Migration section here below).

# Wait? What is PostCSS?

cssnext was at first designed to be a complete tool, before PostCSS became popular; thus, includes 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 integration and of cssnext more simple by providing a simple (real) plugin.

Also, having to maintain severals cssnext and PostCSS runners that does almost the same 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 by 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 those examples, you got it. Feel free to adjust the configuration with the appropriate PostCSS runner.

Try postcss-cssnext in your browser now.