Inconsistent order of styles when cssCodeSplit is false

[lsdsjy]

Describe the bug

Problem

I expect that there should not be any different behaviours whether cssCodeSplit is on. However, as shown in the reproduction link, I get diffenrent results with different status of cssCodeSplit:

cssCodeSplit: true

cssCodeSplit: false

See the reproduction for more information.

Analysis

This problem is basically an outcome of #9949, which tweaks the order of collecting deps such that styles of the importer override those of the imported chunks. But the order in the situation of cssCodeSplit set to false is still "parent-first", which is the same as the order of calling renderChunk, i.e. we collect the importer's styles first, then the imported chunks and so on.

For example, in the reproduction provided below, the style of Button is collected before the GreenButton if cssCodeSplit is true which is the opposite of what happens if cssCodeSplit is false.

A possible fix is #11671

Reproduction

https://stackblitz.com/edit/vite-mlkxv1?file=main.jsx

Steps to reproduce

1. Open the stackblitz container
2. Run yarn serve-split, a green button and a blue button will show in the preview window
3. Control-C and run yarn serve will get a black button and a blue button

System Info

Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^1.1.1 => 1.3.2 
    vite: ^4.0.4 => 4.0.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.