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: https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2165396092. 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: https://github.com/vitejs/vite/discussions/18632.

Validations

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