fix(css/assets): properly replace multiple css asset urls on the same…

… line fix #1975
vitejs · Feb 11, 2021 · 1d805a6 · 1d805a6
1 parent 8b3d0ea
commit 1d805a6
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
@@ -99,6 +99,12 @@ describe('css url() references', () => {
     expect(await getBg('.css-url-quotes-base64-inline')).toMatch(match)
   })
 
+  test('multiple urls on the same line', async () => {
+    const bg = await getBg('.css-url-same-line')
+    expect(bg).toMatch(assetMatch)
+    expect(bg).toMatch(iconMatch)
+  })
+
   if (isBuild) {
     test('preserve postfix query/hash', () => {
       expect(findAssetFile(/\.css$/, 'foo')).toMatch(`woff2?#iefix`)

diff --git a/packages/playground/assets/css/css-url.css b/packages/playground/assets/css/css-url.css
diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
@@ -47,6 +47,11 @@ <h2>CSS url references</h2>
 <div class="css-url-quotes-base64-inline">
   <span style="background: #fff">CSS background (base64 inline in prod)</span>
 </div>
+<div class="css-url-same-line">
+  <span style="background: #fff"
+    >CSS background (multiple urls on same line)</span
+  >
+</div>
 
 <h2>SVG Fragments</h2>
 <div>

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
@@ -10,11 +10,11 @@ import { PluginContext, RenderedChunk } from 'rollup'
 import MagicString from 'magic-string'
 import { createHash } from 'crypto'
 
-export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:(.*?)__)?/g
+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
+const assetUrlQuotedRE = /"__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?"/g
 
 const rawRE = /(\?|&)raw(?:&|$)/
 const urlRE = /(\?|&)url(?:&|$)/
@@ -234,7 +234,7 @@ async function fileToBuiltUrl(
       })
     }
 
-    url = `__VITE_ASSET__${contentHash}__${postfix ? `${postfix}__` : ``}`
+    url = `__VITE_ASSET__${contentHash}__${postfix ? `$_${postfix}__` : ``}`
   }
 
   cache.set(id, url)