From 7d1a3bcc436e1697b314bdc9d24c948664a1afb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Mon, 21 Oct 2024 19:04:32 +0900 Subject: [PATCH] fix: backport #18367,augment hash for CSS files to prevent chromium erroring by loading previous files (#18412) --- packages/vite/src/node/plugins/css.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index eb2245e7c813ab..9fcb7e097a851b 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -954,6 +954,16 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { delete bundle[`${fileName}.map`] }) } + + const cssAssets = Object.values(bundle).filter( + (asset): asset is OutputAsset => + asset.type === 'asset' && asset.fileName.endsWith('.css'), + ) + for (const cssAsset of cssAssets) { + if (typeof cssAsset.source === 'string') { + cssAsset.source = cssAsset.source.replace(viteHashUpdateMarkerRE, '') + } + } }, } } @@ -1562,6 +1572,9 @@ function combineSourcemapsIfExists( : map1 } +const viteHashUpdateMarker = '/*$vite$:1*/' +const viteHashUpdateMarkerRE = /\/\*\$vite\$:\d+\*\// + async function finalizeCss( css: string, minify: boolean, @@ -1574,6 +1587,16 @@ async function finalizeCss( if (minify && config.build.cssMinify) { css = await minifyCSS(css, config, false) } + // inject an additional string to generate a different hash for https://github.com/vitejs/vite/issues/18038 + // + // pre-5.4.3, we generated CSS link tags without crossorigin attribute and generated an hash without + // this string + // in 5.4.3, we added crossorigin attribute to the generated CSS link tags but that made chromium browsers + // to block the CSSs from loading due to chromium's weird behavior + // (https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome, https://issues.chromium.org/issues/40381978) + // to avoid that happening, we inject an additional string so that a different hash is generated + // for the same CSS content + css += viteHashUpdateMarker return css }