Looks like it doesn't get along with extract-css-chunks-webpack-plugin

[egorvoronov]

We use extract-css-chunks-webpack-plugin to get the css chunks for every js chunk and when we use optimize plugin optimization works for main file and for chunks separately and there is no duplications if we look to the files directly one by one but we see the one rule happens in main css file and the same rule we face one time in chunk css file.

Expected behaviour is to remove the generic rule from chunk because it's already in the main file.

[NMFR]

So you are generating multiple CSS files and you expect for the rules of all the files to never intercept / repeat?

That's a tricky one. optimize-css-assets-webpack-plugin was never intended to have that behavior so this a feature request and not a bug.

This Is a bit complex.

• How do we know which file is the "main" so we can remove duplicate rules on the other files?
• How are you splinting / generating several CSS files?
• What is the intended behavior when there is duplicate CSS in 2 or more files but the "main" file does not have those rules?

[egorvoronov]

First of all, thanks for amazing job here. You could find my comments below:

EDITED: I've edited the answers.

• How do we know which file is the "main" so we can remove duplicate rules on the other files? We should rely on dynamic import(..) defining what is the main or child chunks

• How are you splinting / generating several CSS files? We use extract-css-chunks-webpack-plugin for this and it creates css chunks based on dynamic imports (webpack feature) that allows us to have css files as chunks as well

• What is the intended behavior when there is duplicate CSS in 2 or more files but the "main" file does not have those rules? In a simple case we should not remove rule for separate child chunks because you never know which js would be lazy loaded first. And in a difficult case when we use CommonsChunkPlugin for chunks also then separate css file should be created as well and the generic rules could be listed there. File creation in that case could be done by extract-css-chunks-webpack-plugin or if it was not created then, probably, this library could create one

[NMFR]

Could you provide a simple code base example of your chunk configuration with webpack 4 and the expected result so i can get a full picture?

Something that generates 2 or 3 CSS files (with few rules) where the files have common rules that should be de duplicated and a description of the intended result.

[egorvoronov]

Hi Nuno, I thought that probably it would be better to have separate plugin for such job and did a fork from your repo to be able to rewrite logic a bit. So, the new plugin works fine for me. It's not a replacement for your one, I'm using both at the same time.

If you think optimize-css-assets-webpack-plugin should have this feature then feel free to incorporate the changes were done there.

Thanks.

[NMFR]

Thanks.

I still think its a cool feature to have on 'optimize-css-assets-webpack-plugin' behind a option flag. I will try to integrate it when i have some free time (but there's no hurry since you have the problem solved already).

PS: Will leave the issue opened until the feature is added.

[egorvoronov]

Sure, go ahead, it would be cool!

[AlexPravdin]

Any news for this feature request? I'm working with React + Bootstrap styling components in CSS modules. And the Bootstrap's CSS tends to be compiled into each and every chunk where Bootstrap's styles are used. So it can be easily multiplied 5 times in a project with 3 entrypoints and few common chuncks. I spent a day to playing with different plugins and settings and no success at all. So this feature would be extremely helpful.