fix(build): inline quotes css url to base64 (#1412)

fix(build/css): fix base64 inlined css urls with quotes fix #1409, fix #1413
vitejs · Jan 7, 2021 · 9b5b352 · 9b5b352
1 parent da3dfdf
commit 9b5b352
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
@@ -68,6 +68,7 @@ describe('css url() references', () => {
   test('base64 inline', async () => {
     const match = isBuild ? `data:image/png;base64` : `/icon.png`
     expect(await getBg('.css-url-base64-inline')).toMatch(match)
+    expect(await getBg('.css-url-quotes-base64-inline')).toMatch(match)
   })
 
   if (isBuild) {

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
@@ -37,6 +37,9 @@ <h2>CSS url references</h2>
 <div class="css-url-base64-inline">
   <span style="background: #fff">CSS background (base64 inline in prod)</span>
 </div>
+<div class="css-url-quotes-base64-inline">
+  <span style="background: #fff">CSS background (base64 inline in prod)</span>
+</div>
 
 <h2>SVG Fragments</h2>
 <div>

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -119,11 +119,8 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
         css = css.replace(/\/\*[\s\S]*?\*\//gm, '')
         if (cssUrlRE.test(css)) {
           css = await rewriteCssUrls(css, async (url) => {
-            if (isExternalUrl(url) || isDataUrl(url)) {
-              return url
-            }
             url = await urlToBuiltUrl(url, id, config, this)
-            return JSON.stringify(url)
+            return isDataUrl(url) ? url : JSON.stringify(url)
           })
         }
       }