Multi entrypoint styles duplication with preprocessors like stylus

[mytecor]

• Operating System: Windows 10 2004
• Node Version: 14.11.0
• NPM Version: 6.14.8
• webpack Version: 4.44.2
• css-loader Version: 4.3.0
• stylus-loader Version: 4.1.1

Expected Behavior

.box,.child,.test{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.child{border-style:dotted;border-color:#008000}
.test{border-color:#f00}

Actual Behavior

.box{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.box,.child{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.child{border-style:dotted;border-color:#008000}
.box,.test{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.test{border-color:#f00}

How Do We Reproduce?

Repo

yarn build

[mytecor]

Or is it a bug in extract-css-chunks-webpack-plugin?

[alexander-akait]

Yes, it is bug on extract-css-chunks-webpack-plugin side, I recommend to use mini-css-extract-plugin

[mytecor]

I get the same output with mini-css-extract-plugin and style-loader

[alexander-akait]

Okay, I will look at this in near future, but mostly it is configuration problems, or you duplicate modules

[alexander-akait]

My actual result is:

.box{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.box,.child{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}.child{border-style:dotted;border-color:#008000}
.box,.test{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}.test{border-color:#f00}

No problems, look at dist directory

[mytecor]

I expected to see this result: single entry

[alexander-akait]

@midnightcoder-pro you need to setup minificator https://github.com/webpack-contrib/css-minimizer-webpack-plugin, CSS minification is out of scope css-loader

[mytecor]

In my opinion, this is a loss of context, not a minimization task. Stylus doesn't know anything about entry points and processes them separately.
css-minimizer-webpack-plugin gives an incorrect result in comparison with single entry point setup

[alexander-akait]

@midnightcoder-pro #1207 (comment) it is what stylus-loader returns to css-loader, we don't touch your CSS

[mytecor]

But this part is handled by css-loader?

import './parent.styl'
import './child.styl'
import './test.styl'

Aren't these three separate launches of the stylus-loader?

[alexander-akait]

What is the problem? We handle CSS returned from style-loader, we don't merge CSS, we don't change it, we just handle url/@import

[mytecor]

Expected Behavior

.box,.child,.test{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.child{border-style:dotted;border-color:#008000}
.test{border-color:#f00}

Actual Behavior

.box{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.box,.child{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.child{border-style:dotted;border-color:#008000}
.box,.test{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.test{border-color:#f00}

Is it stylus-loader or style-loader problem?

[alexander-akait]

This is a problem neither style-loader or style-loader, this result:

.box{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}
.box,.child{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}.child{border-style:dotted;border-color:#008000}
.box,.test{border-width:2px;border-style:solid;padding:0 20px;margin:0 6px;max-width:400px}.test{border-color:#f00}

was returned from stylus, so you need to stylus about this

[mytecor]

Okay, thanks