Vite5: Inconsistent crossorigin attribute in css tags

[fallemand]

Describe the bug

We noticed that after the migration to Vite5, in production, most CSS imports contain the crossorigin attribute (after #12991).
But in some cases, we noticed it was missing.
For example:

<!-- In most pages this asset is added with crossorigin -->
<link rel="stylesheet" crossorigin src="cdn.blabla.test/some-css-123123.css">

<!--In other pages is added without -->
<link rel="stylesheet" src="cdn.blabla.test/some-css-123123.css">

This leads to problems when we cache the file response without crossorigin and later the browser tries to use it for the import with crossorigin.

Access to CSS stylesheet at 'https://cdn.getyourguide.com/tf/assets/compiled/client/assets/css-slider-card-CMnb0hfz-v2  
'from origin 'https://www.getyourguide.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'   
header is present on the requested resource.

The issue is coming from this line: mportAnalysisBuild.ts#L126
We add the crossorigin for JS but not for CSS.

Reproduction

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.6.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.71 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm
    pnpm: 9.4.0 - ~/.nvm/versions/node/v20.15.1/bin/pnpm
  Browsers:
    Brave Browser: 127.1.68.141
    Safari: 17.6

Used Package Manager

pnpm

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.

[fallemand]

This is a hacky workaround to fix it:

import type { PluginOption } from "vite";

export default function cssCrossoriginPreload(): PluginOption {
  return {
    name: "css-crossorigin-preload",
    transform(code, id) {
      if (id.endsWith("vite/preload-helper.js")) {
        const searchValue = "if (!isCss) {";
        const replaceValue = `if (isCss) link.crossOrigin = '';${searchValue}`;
        if (!code.includes(searchValue)) {
          throw new Error(`Failed to path Vite "vite/preload-helper.js"`);
        }
        const patchedCode = code.replace(searchValue, replaceValue);
        return {
          code: patchedCode,
          map: null,
        };
      }
      return null;
    },
  };
}