Using postcss-cssnext

• `browsers`
• `features`
• `warnForDuplicates`
• `warnForDeprecations`

When you have correctly setup cssnext, you might want to tweak it a little bit. You will find below all the available options.

# browsers

(default: browserslist default > 1%, last 2 versions, Firefox ESR, Opera 12.1)

Allows you to specify your browser scope. This option enables or disables features according to caniuse database. This is the exact same option that you might know from Autoprefixer. Since cssnext includes Autoprefixer, the option is propagated.

See Browserslist queries syntax to adjust this option to your needs.

Note: if you don’t specify this option, Browserslist will automatically try to find a browserslist config file or use its default value.

# features

(default: all features depending on your browsers options)

You should probably use browsers option instead of this one.

Object containing key of features to enable/disable. Features are enabled by default: no key means feature is enabled. Keys can be found by looking in src/features.js.

//eg: disable custom properties support

var postcss = require("postcss");
var cssnext = require("postcss-cssnext");

postcss([
  cssnext({
    features: {
      customProperties: false
    }
  })
]);

Each feature is based on PostCSS plugins & can get its own options. To pass options to a feature, you can just pass an object to the feature:

//eg: pass variables

var postcss = require("postcss");
var cssnext = require("postcss-cssnext");

postcss([
  cssnext({
    features: {
      customProperties: {
        variables: {
          mainColor: "red",
          altColor: "blue"
        }
      }
    }
  })
]);

# warnForDuplicates

(default: true)

This option should be left with its default value, unless you really know what you are doing.
Most tutorial on the internet are wrong (probably 99%) and show provide duplicates in their examples. (eg: autoprefixer + cssnext - but cssnext already includes autoprefixer).
In order to fix this, here is a warning. You are welcome.

# warnForDeprecations

(default: true)

This option should be left with its default value, unless you are aware of the risk and plan to handle the situation.

---

To know all available options, please check corresponding postcss plugin by browsing the feature mapping

Note: order is important to get everything working correctly.