postcss-loader: Postcss-cssnext and precss breaking all plugins

I’m currently experiencing this weird bug that seems to only occur with the Postcss-cssnext and precss plugins.

Forgot to mention my versions: Webpack: 2.1.0-beta.25 Postcss-Loader: 1.1.1 Precss: 1.4.0 Postcss-cssnext: 2.8.0

Here is my current webpack config:

module.exports = {
...
module: {
    rules: [
      ...
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
            },
          },
          'postcss-loader',
        ],
      },
    ],
  },

Then my postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-smart-import')({}),
    require('postcss-simple-vars')({}),
    // require('postcss-cssnext')({}),
    // required('precss)({}),
  ],
};

With both postcss-cssnext and precss commented out, this works perfectly fine. If I allow even one of these two plugins then all of my plugins stop working and I get errors from webpack: TypeError: [object Object] must be a function, did you require() it ?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 18 (7 by maintainers)

Most upvoted comments

@Skilgarriff @princed @YasserKaddour Sry for the delay you guys, I do it today/tomorrow with other small fixes already on the list , I’m always busy with social work, there is no ‘doing later’ 😛 . Use {Object} style in your postcss.config.js plugins section meanwhile.

michael-ciniawsky on Nov 21, 2016

Actually it works just fine with https://github.com/michael-ciniawsky/postcss-load-plugins/pull/17. So all we need is to publish latest version if postcss-load-plugins as a patch or minor version.

@michael-ciniawsky Could you please do it?

princed on Nov 18, 2016

Thanks @princed, indeed this work for me

module.exports = {
    plugins: {
        'precss': {},
        'postcss-cssnext': {},
        'doiuse': {
            browsers: ['ie >= 11', '> 1%'],
            ignore: [
                'flexbox',
                'border-radius'
            ]
        }
    }
}

yasserkaddour on Nov 18, 2016

@michael-ciniawsky I have the same issue with array form of config, although object form works fine.

I’ve searched for differences between them and it looks like that the bug could be hidden in postcss-load-plugins. It won’t work probably because plugin isn’t really replaced by plugin.postcss in array. However, I haven’t time to check it yet.

Update: see my next comment.

princed on Nov 18, 2016

fixed in #161 via postcss-load-config update + watching config file for changes is supported now

michael-ciniawsky on Jan 11, 2017