Postcss-cssnext and precss breaking all plugins

[kilpatty]

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 ?

[michael-ciniawsky]

👋

The missing ' is in the example I assume :)

// required('precss // <= ')({}),

Could be a bug because those two a packages, there was are PR handling that better, but not released yet since I hadn't found the time to test it out, maybe @kovensky can elaborate on this :)

[kilpatty]

@michael-ciniawsky Yes, sorry about that - I added precss in while working in the Github editor as it wasn't still in my code, but I had tried it earlier.

[michael-ciniawsky]

@Skilgarriff few minutes please, out of the gut you can try to hotfix at least postcss-cssnext with

require('cssnext')({}).plugins

But not sure if it will work that way tbh :)

[kilpatty]

@michael-ciniawsky No worries! hahaha I'll try and report back

Edit: No luck with that :/ throws some crazy errors.

[ai]

@Skilgarriff what errors exactly? We need stacktrace too.

[michael-ciniawsky]

@ai @Skilgarriff Still on it, will take a day longer, this is 👎 😛 any new info on this errors, detail config etc ? :)

[kilpatty]

TypeError: [object Object] must be a function, did you require() it ?
    at /Users/Sean/Sites/Sean Kilgarriff/www/node_modules/postcss-load-plugins/lib/plugins.js:23:17
    at Array.forEach (native)
    at plugins (/Users/Sean/Sites/Sean Kilgarriff/www/node_modules/postcss-load-plugins/lib/plugins.js:21:15)
    at /Users/Sean/Sites/Sean Kilgarriff/www/node_modules/postcss-load-config/index.js:67:18

@ai
Here is a stack trace for when I include postcss-cssnext as a plugin.

@michael-ciniawsky No worries, I appreciate you working on it! No new information - I have basically recreated all of the functionality that I needed from these two plugins with other smaller plugins and not one of them has throw an error yet. Only getting broken Postcss/errors when I include one of those two.

[yasserkaddour]

I have the same error with the same trace while trying to upgrade to webpack 2:

I am using:
"webpack": "2.1.0-beta.27",
"postcss-cssnext": "^2.8.0",
"postcss-loader": "1.1.0",
"precss": "^1.4.0",
"doiuse": "^2.5.0",

My postcss.config.js

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

When I remove the parenthesis for the options like this,

plugins: [
        require('precss'),
        require('postcss-cssnext'),
        require('doiuse')
    ]

It works.

Thank you for all your awesome contribution.

[princed]

@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.

[yasserkaddour]

Thanks @princed, indeed this work for me

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

[MoOx]

Any reason why now some plugin called with () are crashing postcss-loader?

https://gitter.im/MoOx/postcss-cssnext?at=582eccc42291180a7a6637d8

[princed]

Actually it works just fine with michael-ciniawsky/postcss-load-plugins#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?

[michael-ciniawsky]

@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.

[folmert]

Confirmed: postcss-load-plugins does the job. But I'm still a bit confused - I ended up with 3 very similar modules:

• postcss-load-plugins
• postcss-load-options
• postcss-load-config

Any reason now to keep last two?

[azat-io]

I have the same issue with css-mqpacker:

I'm using:

• webpack v2.2.0-rc.2
• postcss-loader v1.2.1
• css-mqpacker v5.0.1

Here is a part of my webpack.config.babel.js:

export default {
    entry: './components/App/index.jsx',
    output: {
        path: path.join(process.cwd(), './public'),
        filename: 'main.[hash].js',
    },

    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                context: __dirname,
                postcss: [
                    cssnext({
                        browsers: ['last 2 versions', 'IE > 10'],
                    }),
                    cssMqpacker(),
                ],
            },
        }),

        new ExtractTextPlugin({
            filename: 'style.[hash].css',
            disable: false,
            allChanks: true,
        }),
    ],

    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallbackLoader: 'style-loader',
                loader: 'css-loader?modules&localIdentName=[local]--[hash:base64:5]!postcss-loader',
            }),
        }],
    },
}

And postcss-cssnext and other plugins works good. But not css-mqpacker. When I'm building app I see the following CSS code:

.title--Njw1N {
    color: red
}
@media (max-width: 800px) {
    .title--Njw1N {
        color: darkred
    }
}
.title--13b4T {
    color: yellow
}
@media (max-width: 800px) {
    .title--13b4T {
        color: orange
    }
}
.title--FYL1K {
    color: green
}
@media (max-width: 800px) {
    .title--FYL1K {
        color: darkgreen
    }
}

Please see the example here: https://github.com/azat-io/webpack2-css-modules-demo

[andykenward]

@azat-io css-mqpacker doesn't seem to support sorting separate .css files together. Is it suppose to?

It worked fine when I added the example to just one of your .css files.

Might you have to run it on the Webpack CSS output afterwards?

[azat-io]

@anandthakker Oh, you are right. It looks like I need to concatenate all files before using CSS Mqpacker

[michael-ciniawsky]

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