Option to prevent link[rel="stylesheet"] elements in index.html from being merged into a single link[rel="stylesheet"] element

[umajho]

Description

As a developer using Vite
I want multiple link[rel="stylesheet"] elements I put in index.html not being merged into a single link[rel="stylesheet"] element
so that I can utilize each individual global stylesheet separately.

It seems that CSS WG is willing to lift the restriction on constructed flag for adoptedStylesheets: w3c/csswg-drafts#10013 (comment).
After the restriction is lifted, we can easily apply the stylesheet of one of the global link[rel="stylesheet"] to Shadow Roots.
(Even if the restriction is not lifted, we still have workarounds.)

Example (vanilla + SCSS)

https://stackblitz.com/edit/vitejs-vite-orv9nq?file=index.html
npm run dev works as expected because CSS files are not merged during dev.
npm run build && npm run preview doesn't work, because CSS files have been merged into a single file, and the element link#bgRed has gone.

Currently, since Vite always merge link[rel="stylesheet"] elements in index.html, we cannot do it this way.

Suggested solution

Add an option, like:

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    cssCodeSplitInIndexHtml: true
  },
});

to make link[rel="stylesheet"] elements in index.html not being merged.

Alternative

• loading global styles using JavaScript, so that they can be separated: FOUC.
• putting global styles in index.html as well as loading them using JavaScript: duplication.

Additional context

I opened a discussion some days ago: #18632.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.