[Bug: plugin-legacy] legacy js inserts styles in the wrong order

[lsdsjy]

Describe the bug

The styling behavior of the legacy bundle differs from that of the modern bundle. Can be reproduced when common chunks are generated.

I've provided a stackblitz environment with pre-built dist, and modified the index.html to ensure the legacy bundle executed. The buttons should be green and blue respectively(as on dev and modern bundle), but they are all black on legacy bundle.

Reproduction

https://stackblitz.com/edit/vite-ubkstt?file=dist%2Findex.html,dist%2Fassets%2FGreenButton-legacy-a72b2200.js

Steps to reproduce

No response

System Info

npmPackages:
    @vitejs/plugin-legacy: ^4.0.3 => 4.0.3
    vite: ^4.3.8 => 4.3.8

Used Package Manager

yarn

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vite-ubkstt (Open reproduction)