Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Composes" duplicating css (again) #1037

Closed
vlazh opened this issue Jan 6, 2020 · 11 comments · Fixed by #1040
Closed

"Composes" duplicating css (again) #1037

vlazh opened this issue Jan 6, 2020 · 11 comments · Fixed by #1040

Comments

@vlazh
Copy link

vlazh commented Jan 6, 2020

  • webpack Version: 4.19.1
  • css-loader Version: 3.4.1

It's copy of #772 but with latest css-loader.

Expected Behavior

It shouldn't duplicate css class.

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

The second case was tested 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.

Code

With latest css-loader:
https://github.com/vlazh/Webpack_StylesDuplication

How Do We Reproduce?

A minimal reproducible project with this issue:
https://github.com/vlazh/Webpack_StylesDuplication

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

@alexander-akait
Copy link
Member

/cc @jquense looks you are right about dedupe same modules in one module

@alexander-akait
Copy link
Member

@jquense
Copy link
Contributor

jquense commented Jan 10, 2020

working for me 👍

@vlazh
Copy link
Author

vlazh commented Jan 11, 2020

Example project work fine, but in my real project still has dublicating in some cases. Unfortunately I can't reproduce it in example project. I use typescript, react and a lot of components. I continue to research, but still have no success.

@jquense
Copy link
Contributor

jquense commented Jan 11, 2020

@vlazh make sure you also have style-loader installed that is less than 1.1.0

@vlazh
Copy link
Author

vlazh commented Jan 11, 2020

@jquense, I have latest version of style-loader installed. What the problem with v1.1.0?

@vlazh
Copy link
Author

vlazh commented Jan 11, 2020

I have just managed to demonstrate the problem.
Demo project: https://github.com/vlazh/css-dublication
Run start:client script.

image

Class .CompB__children--10ad6 is duplicating.
In my real project, some css classes are duplicated as many times as there are links to css file.

@alexander-akait
Copy link
Member

@vlazh please use style-loader less than 1.1.0, we have some problems with latest version, i will fix it in near future

@vlazh
Copy link
Author

vlazh commented Jan 13, 2020

@evilebottnawi with [email protected] works great!
Thank you!
Worth it to create a new issue for the problem with style-loader or it already exists?

@alexander-akait
Copy link
Member

@vlazh already exists

@vlazh
Copy link
Author

vlazh commented Jan 19, 2020

@evilebottnawi, seems like fixed in [email protected]. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants