CSS Mqpacker plugin not works with PostCSS Webpack loader (Webpack 2)

[azat-io]

Hi there!

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

[hail2u]

What is cssMqpcker()?

[hail2u]

Related: webpack-contrib/postcss-loader#138

[azat-io]

Okay. Looks like it's a problem with postcss-loader

[azat-io]

@hail2u The problem is that the plugin does not work with multiple files. It looks like I need to find a way to concatenate all files into one before using the plugin

[hail2u]

It is not a problem of this plugin.

[dvakatsiienko]

For those that are looking for a reason of MQ in css modules not being merged − the explanaition is that css modules are not being merged by design. this works only for global stylesheets