"Composes" duplicating css

[ivensgoncalves]

Version: 1.0.0

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When a class name within a css file is shared using "composes" in a 2 degree level, it gets duplicated (when each class has its own file).

For example (each class has its own css file):

Case 1 (composes in 1 degree level)
"primary-button" which composes "button" and;
"secondary-button" which composes "button".
This case is ok, and nothing gets duplicated.

Case 2 (composes in 2 degree level)
"next-button" which composes "primary-button" which composes "button" and;
"back-button" which composes "secondary-button" which composes "button".
On this case, the "button" class gets duplicated.

I tested the second case with the following plugins:
style-loader (see print): https://raw.githubusercontent.com/ivensgoncalves/Webpack_StylesDuplication/master/prints/style-loader.png
mini-css-extract-plugin (see print): https://raw.githubusercontent.com/ivensgoncalves/Webpack_StylesDuplication/master/prints/mini-css-extract-plugin.png

On both plugins the "button" class got duplicated.

If the current behavior is a bug, please provide the steps to reproduce.
I have created a minimal reproducible project with this issue
https://github.com/ivensgoncalves/Webpack_StylesDuplication

To test with style-loader, execute "npm run start1"
To test with mini-css-extract-plugin, execute "npm run start2"

What is the expected behavior?
It shouldn't duplicate css class.

Please mention other relevant information such as your webpack version, Node.js version and Operating System.
Node.js: v8.11.3
Webpack: v4.19.1
Operating System: Windows 10

Thanks in advance.

Best Regards,
Ivens Gonçalves.

[webschik]

I have the same issue,

webpack 4.23.1
css-loader 1.0.1
Node 10.3.0
macOS

[princed]

There is a fix now in #789

The workaround is to disable namedModules, i.e. add the following to the webpack config:

optimization: {
  namedModules: false
}

@ivensgoncalves Thank you for the complete test case! 👍

[ivensgoncalves]

@princed The workaround worked fine. Thank you very much!

[OliverJAsh]

For traceability: this issue didn't just effect usage of optimization.namedModules but also HashedModuleIdsPlugin (which is a recommended plugin for long term caching in production).

[vlazh]

There is regression with the latest css-loader. The issue present again.