fix(css): apply server.origin to public file URLs in CSS (fix #18457)

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

@@ -381,7 +381,11 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
             if (encodePublicUrlsInCSS(config)) {
               return [publicFileToBuiltUrl(decodedUrl, config), undefined]
             } else {
-              return [joinUrlSegments(config.base, decodedUrl), undefined]
+              const base = joinUrlSegments(
+                config.server.origin ?? '',
+                config.base,
+              )
+              return [joinUrlSegments(base, decodedUrl), undefined]
             }
           }
           const [id, fragment] = decodedUrl.split('#')

playground/backend-integration/__tests__/backend-integration.spec.ts

@@ -4,6 +4,7 @@ import {
   browserLogs,
   editFile,
   getColor,
+  getCssRuleBg,
   isBuild,
   isServe,
   listAssets,
@@ -120,6 +121,20 @@ describe.runIf(isServe)('serve', () => {
     expect(await link.getAttribute('href')).toContain('/dev/global.css?t=')
   })
 
+  test('server.origin is applied to non-public CSS url()', async () => {
+    const bg = await getCssRuleBg('.outside-root--aliased')
+    expect(bg).toContain(
+      `http://localhost:${ports['backend-integration']}/dev/`,
+    )
+  })
+
+  test('server.origin is applied to public CSS url()', async () => {
+    const bg = await getCssRuleBg('.public-asset')
+    expect(bg).toContain(
+      `http://localhost:${ports['backend-integration']}/dev/icon.png`,
+    )
+  })
+
   test('CSS dependencies are tracked for HMR', async () => {
     const el = await page.$('h1')
     await untilBrowserLogAfter(

playground/backend-integration/frontend/entrypoints/index.html

@@ -25,6 +25,10 @@ <h2>CSS Asset References</h2>
     Background URL with Relative Path:
     <div class="background-asset outside-root--relative"></div>
   </li>
+  <li>
+    Background URL with Public Asset:
+    <div class="background-asset public-asset"></div>
+  </li>
 </ul>
 
 <h2>CSS imported from JS</h2>

playground/backend-integration/frontend/styles/background.css

@@ -13,3 +13,7 @@
 .outside-root--relative {
   background-image: url('../images/logo.png');
 }
+
+.public-asset {
+  background-image: url('/icon.png');
+}

playground/test-utils.ts

@@ -121,6 +121,25 @@ export async function getBg(
   return el.evaluate((el) => getComputedStyle(el as Element).backgroundImage)
 }
 
+/**
+ * Unlike `getBg`, this function returns the raw value of the `background-image` CSS property.
+ *
+ * `getBg` returns the resolved value, which has the hostname and port prepended due to `computedStyle` call.
+ */
+export async function getCssRuleBg(selector: string): Promise<string> {
+  return page.evaluate((sel) => {
+    for (const sheet of document.styleSheets) {
+      try {
+        for (const rule of sheet.cssRules) {
+          if (rule instanceof CSSStyleRule && rule.selectorText === sel) {
+            return rule.style.backgroundImage
+          }
+        }
+      } catch (_e) {}
+    }
+  }, selector)
+}
+
 export async function getBgColor(
   el: string | ElementHandle | Locator,
 ): Promise<string> {