fix: Replace asset references in CSS returned to JS

Fixes vitejs#5599
Artur- · Nov 17, 2021 · 680ab65 · 680ab65
1 parent 0ed7bc3
commit 680ab65
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
@@ -15,7 +15,7 @@ export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g
 
 // urls in JS must be quoted as strings, so when replacing them we need
 // a different regex
-const assetUrlQuotedRE = /"__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?"/g
+export const assetUrlQuotedRE = /"__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?"/g
 
 const rawRE = /(\?|&)raw(?:&|$)/
 const urlRE = /(\?|&)url(?:&|$)/

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -31,7 +31,8 @@ import {
   assetUrlRE,
   registerAssetToChunk,
   fileToUrl,
-  checkPublicFile
+  checkPublicFile,
+  assetUrlQuotedRE
 } from './asset'
 import MagicString from 'magic-string'
 import * as Postcss from 'postcss'
@@ -242,8 +243,16 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
         }
       }
 
+      // replace asset references before returning the CSS to JS
+      const finalCss = css.replace(
+        assetUrlQuotedRE,
+        (_, fileHash, postfix = '') => {
+          return config.base + getAssetFilename(fileHash, config) + postfix
+        }
+      )
+
       return {
-        code: css,
+        code: finalCss,
         // TODO CSS source map
         map: { mappings: '' }
       }