fix: Correctly process urls when they are rewritten to contain space

packages/playground/css/__tests__/css.spec.ts

@@ -54,6 +54,12 @@ test('css import from js', async () => {
   await untilUpdated(() => getColor(atImport), 'blue')
 })
 
+test('css import asset with space', async () => {
+  const importedWithSpace = await page.$('.import-with-space')
+
+  expect(await getBg(importedWithSpace)).toMatch(/.*ok\..*png/)
+})
+
 test('postcss config', async () => {
   const imported = await page.$('.postcss .nesting')
   expect(await getColor(imported)).toBe('pink')

packages/playground/css/folder with space/space.css

@@ -0,0 +1,5 @@
+.import-with-space {
+  color: green;
+  background: url(spacefolder/ok.png);
+  background-position: center;
+}

packages/playground/css/imported.css

@@ -1,4 +1,5 @@
 @import './imported-at-import.css';
+@import 'spacefolder/space.css';
 
 .imported {
   color: green;

packages/playground/css/index.html

@@ -10,6 +10,10 @@ <h1>CSS</h1>
   <p class="imported-at-import">
     @import in import from js: This should be purple
   </p>
+  <p class="import-with-space">
+    @import from file with space: This should be green and have a background
+    image
+  </p>
   <p>Imported css string:</p>
   <pre class="imported-css"></pre>
   <pre class="imported-css-glob"></pre>

packages/playground/css/vite.config.js

@@ -9,7 +9,8 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@': __dirname
+      '@': __dirname,
+      spacefolder: __dirname + '/folder with space'
     }
   },
   css: {

packages/vite/src/node/plugins/css.ts

@@ -997,7 +997,12 @@ async function doUrlReplace(
     return matched
   }
 
-  return `url(${wrap}${await replacer(rawUrl)}${wrap})`
+  const newUrl = await replacer(rawUrl)
+  if (wrap === '' && newUrl != encodeURI(newUrl)) {
+    // The new url might need wrapping even if the original did not have it, e.g. if a space was added during replacement
+    wrap = "'"
+  }
+  return `url(${wrap}${newUrl}${wrap})`
 }
 
 async function doImportCSSReplace(