fix: Replace asset references in CSS returned to JS

Fixes vitejs#5599
Artur- · Nov 18, 2021 · 74045a5 · 74045a5
1 parent 04016df
commit 74045a5
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 3 deletions.
diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
@@ -339,6 +339,13 @@ test('inlined', async () => {
   expect(await getColor('.inlined')).toBe('black')
 })
 
+test('inlined-code', async () => {
+  const code = await page.textContent('.inlined-code')
+  // should resolve assets
+  expect(code).toContain('color:')
+  expect(code).not.toContain('__VITE_ASSET__')
+})
+
 test('minify css', async () => {
   if (!isBuild) {
     return

diff --git a/packages/playground/css/inlined.css b/packages/playground/css/inlined.css
@@ -1,3 +1,4 @@
 .inlined {
   color: green;
+  background: url('./ok.png');
 }
diff --git a/packages/playground/css/ok.png b/packages/playground/css/ok.png
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: '' }
       }