An simple way to find out "Why this css content is rendered in this position of the css file?"

[hyf0]

I have met many style problems using Rspack with experiments.css: true.

Bundling CSS doesn't have a specification, so it's hard to tell if the output of Rspack is wrong or correct(especially in a large-scale project). However, we need one to know if the result of Rspack is expected.

With the specification, we could emit more information as I did at #3531 to help explain the result if it is expected based on the output.

[hyf0]

It would be great for @alexander-akait to give some suggestions :).

[alexander-akait]

@hyf0 Yeah, CSS modules specification is old (https://github.com/css-modules/css-modules) and has some compatibility problems, I correctly understand that with normal CSS there are no problems? Maybe you can list of them? We have webpack/webpack#14893 so we can connect issues and sync them. Write some simple spec 😄

[hyf0]

@alexander-akait Sorry, I may cause some misunderstandings and I'm talking about normal CSS.

I have fully understood the behaviors of bundling CSS with splitChunks: false, at least I think I did :).

But when it comes to bundle splitting, it's hard to tell "Why this CSS content is rendered in this position of the CSS file?".

I found and read the related code line by line, but I could put them together and understand what they try to do.

[alexander-akait]

@hyf0 This code fix the problem when you have:

module1.js

import "./a.css";
import "./b.css"

module2.js

import "./b.css";
import "./a.css"

entry.js

import "./module1.js";
import "./module2.js"

We don't know which module should be first, so we print a warning and try to find the best way, this is not related only to splitChunks: false. There is TODO, because we can provide more verbose error - example of code how to fix it. Do you need advices about logic?

[hyf0]

@alexander-akait Yeah.

We don't know which module should be first, so we print a warning and try to find the best way,

Yeah. I have met the related error while studying using mini-css-extract-plugin and figure out why.

because we can provide more verbose error - example of code how to fix it.

I don't think this problem is fixable in practice, especially for a project having 20k+ modules.

---

What I want is not how to fix the "conflicts" but a specification about how Webpack resolves conflicts currently, so that I could use to explain why this CSS content is rendered in this position of the CSS file to users.

---

I also have a rough thought that using post_order to sort the CSS modules in chunks rather post_order per ChunkGroup. But this strategy should have some traps I don't know yet.

[alexander-akait]

I don't think this problem is fixable in practice, especially for a project having 20k+ modules.

Yeah, it can be useful only when you are writtin code right now and can change logic

What I want is not how to fix the "conflicts" but a specification about how Webpack resolves conflicts currently, so that I could use to explain why this CSS content is rendered in this position of the CSS file.

Get the first module https://github.com/webpack/webpack/blob/16143f5fa835ad8c7181b8aeedc52f9cdd0fd39d/lib/css/CssModulesPlugin.js#L424 😄

I also have a rough thought that using post_order to sort the CSS modules in chunks rather post_order per ChunkGroup. But this strategy should have some traps I don't know yet.

It can break a logic when you want to split files basen on layer, we don't currently say we officially support this, but it's possible

[hyf0]

We don't know which module should be first, so we print a warning and try to find the best way, this is not related only to splitChunks: false.

I just look into your example. If I understand the algo of Webpack correctly. Your example would emit a CSS file

// entry.css

/* Render a.css */

/* Render b.css */

without any warnings or errors.

We don't know which module should be first

a.css should be the first. Because the post_order of a.css is before b.css in the ChunkGroup(enrty).

[alexander-akait]

I just look into your example. If I understand the algo of Webpack correctly. Your example would emit a CSS file

There are other examples - https://github.com/webpack-contrib/mini-css-extract-plugin/tree/master/test/cases/ignoreOrder, we have more examples of the problem

And yes we will use the first found module in rendering

a.css should be the first. Because the post_order of a.css is before b.css in the ChunkGroup(enrty)

Yes, but this is logic from our logic, but we don't know if the developer expects it or not this 😄

Also don't forget about @import, especial in nested files (i.e. @import inside @import)

[hyf0]

Yes, but this is logic from our logic, but we don't know if the developer expects it or not this 😄

It's straightforward and I like this way. It makes me easy to explain to others the reason for CSS output. It just gets complicated with bundle splitting 😂.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!