Use postcss-modules generated css repeated

HI, Q1 I want to use postcss-modules compile my css files, but out of the css generated duplicate.

1. common.css .row { width : 100%; height : 100px; margin : 0; padding : 0; background-color : #000000; }

2. subCommon.css .row { composes : row from './components.css'; background-color : #ff0430; } 3. webpack config { test : /\.css$/, loader: ExtractTextPlugin.extract("style-loader", ["css-loader?postcss-modules&importLoaders=1&sourceMap", "postcss-loader?parser=postcss-scss"]) } 4. postcss-modules config postcss: function () { return [ psmodules({ generateScopedName: '[local]_[hash:base64:8]', getJSON : function (cssFileName, json) {} }), // cssnano(nanoConfig), ];

5 Compiled main.css file .row_3hpoIFeb { width : 100%; height : 2.66667rem; margin : 0; padding : 0; background-color : #000000; } .row_3hpoIFeb { width : 100%; height : 2.66667rem; margin : 0; padding : 0; background-color : #000000; } .row_3D79gLaJ { background-color : #ff0430; }

common.css the row => [row_3hpoIFeb] is compiled twice！

Q2 Postcss-modules and cssnano can not be used together, compile exception!?

[AlexGalays]

Tiny repro here : https://github.com/AlexGalays/repro-webpack-cssloader

Expected: Only two classes in the extracted dist/root.css Actual: One of the two classes is outputted twice.

Looks like the trigger is for a className to be imported both in JS (to be used as a className string) and CSS (via composes)

[blm768]

This behavior seems to be fundamentally different from the original design intention, which seems to have been that composes would just tack the composed class name onto the export symbol instead of actually pulling in the composed class’s style rules. The actual CSS Modules spec underspecifies the behavior of composes, so it’s not clear to me whether there was an intentional change at some point.