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

@@ -3,6 +3,7 @@ import {
   browserErrors,
   browserLogs,
   editFile,
+  getBg,
   getColor,
   isBuild,
   isServe,
@@ -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 getBg('.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 getBg('.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');
+}