Using postcss-csso with css modules

[shura-sparrow]

Hi, I'm using your postcss-csso with css modules. Here's my webpack config (v.1):

module.exports = {
       module: { 
         loaders: [{
             test: /.*\.css$/,
             loader: new ExtractTextPlugin('docs.css').extract(
                 "style",
                 `css?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]___${pjson.version}!typed-css-modules!postcss?sourceMap=inline`
             )
         }]
       },
       postcss: () => {
           return [
              require('postcss-import'),
              require('autoprefixer'),
              require('postcss-mixins'),
              require('postcss-nested'),
              require('postcss-simple-vars'),
              require('postcss-csso')
          ];
}

I've got mistakes with :globals in my css: Module build failed: Unexpected input 221

html:global(.input) & {
     .tabSelectorButton {

What am I doing wrong?

[lahmatiy]

I'm not an expect in setup postcss for webpack. At first glance your config is ok. Are you sure the problem in postcss-csso? If it receives the CSS from example, then the problem is about & in selector. But I suppose other plugins should resolve it in plain CSS.

[shura-sparrow]

@lahmatiy thanks for response, I used this config without postcss-csso and everything worked fine. Error message begins with Module build failed: ModuleError: postcss-csso: Could the problem be in the order of plugins in postcss plugins array?

[lahmatiy]

The order is correct, minifier should go last. If minifier gets follow CSS

html:global(.input) & {
     .tabSelectorButton {

It means that postcss-nested is not applied to CSS, or I misunderstand something.

[lahmatiy]

Looks like problem is not connected with postcss-csso. Fill free to re-open issue if you have new details.