fix(css): ensure order of extracted CSS #16588
Conversation
|
|
| // sorted chunk names to guarantee output order (deterministic output) | ||
| const chunkNames = [...chunkCSSMap.keys()].sort() | ||
| for (const chunkName of chunkNames) |
There was a problem hiding this comment.
We cannot sort chunk names alphabetically because the order of the chunks are meaningful. The issue with chunkCSSMap being non-deterministic is because it's being populated via renderChunk that runs non-deterministically among chunks.
I think a better solution here is instead of iterating chunkCSSMap here, we can iterate prelimaryNameToChunkMap instead which is deterministic as it's derived from the `bundle..
There was a problem hiding this comment.
prelimaryNameToChunkMap is also not deterministic, entry points are in deterministic order, but the dynamic chunks are randomly sorted.
There was a problem hiding this comment.
Can you share more how you got that? Chunks in Rollup (regardless if entry, non-entry, dynamic entry) should be consistent, otherwise it'll break many usecases and assumptions in Vite currently.
There was a problem hiding this comment.
Hmm testing manually I can also see that bundle isn't deterministic. However, renderChunk's chunks are and chunkCSSMap should be following that order and should be deterministic. Unless there's an additional Vite plugin that uses async renderChunk() and changes the order, which is a bug I found today.
But we still can't sort alphabetically like this change now. It will break, for example, if you import two CSS files and expect them to render in order.
To fix this, it might be worth making chunkCSSMap deterministic directly, but it should be fixed since we added this line though. (Unless you use plugins that with the bug I mentioned above)
There was a problem hiding this comment.
I checked my custom plugins but they do not seem to change the order.
I changed the approach a bit by not sorting but extracting from entries and then use their imports.
This seems to be deterministic as the entry order seems to be stable.
susnux
force-pushed
the
fix/deterministic-styles
branch
from
eacd77d
to
92f9c5a
Compare
Without this the order of the extracted CSS rules is defined by the order `renderChunk` of the css plugin is called. So with this the order of CSS rules is always in order of the output chunks of the bundle. Signed-off-by: Ferdinand Thiessen <[email protected]>
susnux
force-pushed
the
fix/deterministic-styles
branch
from
92f9c5a
to
9f584f1
Compare
Description
Without this the order of the extracted CSS rules is defined by the order
renderChunkof the css plugin is called. So with this the order of CSS rules is always in alphabetical order of the output chunks.Previously on my project every time I ran the build the output
style.csswas different by rule order, which caused unnecessary conflicts.