Unclear how to pass options in postcss.config.js (missing usage in docs)

[folmert]

Instructions posted at http://cssnext.io/usage/ are not very helpful in my case. Sorry, but these docs are very vague, they don't even state in which file should the example be written. These can be obvious things for "insiders", but not for someone new to postcss.

I'm using Webpack 2 and including postcss-cssnext along with other postcss plugins in my postcss.config.js:

module.exports = {
    plugins: [
        require('precss'),
        require('postcss-cssnext')
    ]
};

and this works, but how do I pass options here?

This syntax doesn't work:

module.exports = {
    plugins: [
        require('precss'),
        require('postcss-cssnext')({features: {autoprefixer: {}}})
    ]
};

this neither:

module.exports = {
    plugins: {
        'postcss-precss':  {},
        'postcss-cssnext': {
            features: {
                autoprefixer: {}
            }
        }
    }
};

When I run webpack I get errors like:
TypeError: Cannot read property 'default' of undefined
or
TypeError: [object Object] must be a function, did you require() it ?

[MoOx]

Is postcss.config.js something official?
If so I am open to an improvement in the docs.

That said, cssnext is just a normal postcss plugin. I think there is a bug about that. See webpack-contrib/postcss-loader#138

[piotr-cz]

@MoOx
Yes, using javascript as a config file is official, for example this is how I use package.json to define build scripts such as

"scripts": {
  "build-css": "postcss --config config/postcss.library.config.js"
}

@folmert
This is what works for me, although I'm not sure why I should include postcss-cssnext when I have to include plugins anyway under the use key

let config = {
  use: [
    'postcss-cssnext',
    'postcss-import',
    'postcss-custom-properties',
    'postcss-nesting',
    'postcss-calc',
  ],
  'autoprefixer': {
    browsers: '> 5%'
  },
  'postcssCssnext': {
    features: {
      autoprefixer: true
    }
  },
  // Other options such as input and output
};

module.exports = config;

[MoOx]

@piotr-cz Feel free to make a PR to show the usage of postcss.config.js in the docs!

[folmert]

@piotr-cz
I've made it work by installing postcss-load-plugins. Thanks to this plugin I can simply write now in my postcsss.config.js:

module.exports = function () {
    return {
        plugins: [
            require('precss')({}),
            require('postcss-cssnext')({ browsers: ['> 0.05%', 'IE 7'], cascade: false })
        ]
    }
};

[piotr-cz]

@folmert I was considering postcss-load-config, but after some time got working with postcss-cli

[piotr-cz]

@MoOx
I'm not sure how to phrase it, I'd add something like this to the docs for on cssnext.io docs Setup > Usage page.

---

Usage with CLI

It's possible to pass cssnext options in config file as described in postcss-cli docs:

{
    "input": "screen.css",
    "output": "bundle.css",
    "postcssCssnext": {
        "features": {
            "autoprefixer": true
        }
    }
}

[rgalieva]

Webpack2 config for post-css with ExtractTextPlugin:

{
    test: /\.pcss$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: [ 
            {loader: 'css-loader'},
            {loader: 'postcss-loader',
                options: {
                    sourceMap: 'inline',
                    plugins: function () {
                        return [
                            require('postcss-import'),
                            require('postcss-cssnext')({
                                customProperties: {
                                    variables: {
                                        c_bg: "#222"
                                    },
                                }
                            })
                        ]
                    }
                }
            }
        ]
    })
}

[rgalieva]

If you prefer store settings in separate js, your config may look like:

// webpack.config.js

const cssSettings = require('../../src/config/vars.js') // before module.exports

{
    loader: 'postcss-loader',
    options: {
        sourceMap: 'inline',
        plugins: function () {
            return [
                require('postcss-import'),
                require('postcss-cssnext')({
                    features: cssSettings
                })
            ]
        }
    }
}

// vars.js

module.exports = {
    customProperties: {
        variables: {
            c_bg: "#222"
        },
    },
    customMedia: {
        extensions: {
            v_small:   "(min-width: 30rem)",
            v_medium:  "(min-width: 48rem)"
        }
    }
}

[pldg]

Without using additional loaders you can pass options in postcss.config.js like this:

module.exports = {
  plugins: {
    'postcss-import': {},

    'postcss-cssnext': {
      features: {
        customProperties: { preserve: true }
      }
    },
    
    'cssnano': { autoprefixer: false }
  }
}

customProperties refer to "postcss-custom-properties" plugin, you can use the same options of the original plugin https://github.com/postcss/postcss-custom-properties#options

The list of all features / plugins names can be found here: https://github.com/MoOx/postcss-cssnext/blob/master/src/features.js

Maybe the documentation http://cssnext.io/usage/ can be improved?

[MoOx]

postcss-cssnext has been deprecated in favor of postcss-preset-env. Read more at https://moox.io/blog/deprecating-cssnext/