fix: non-relative base public paths in CSS files (#8682)

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

@@ -458,7 +458,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       // resolve asset URL placeholders to their built file URLs
       function resolveAssetUrlsInCss(chunkCSS: string, cssAssetName: string) {
         const encodedPublicUrls = encodePublicUrlsInCSS(config)
-        const assetsBase = config.experimental.buildAdvancedBaseOptions.assets
+        const { assets: assetsBase, public: publicBase } =
+          config.experimental.buildAdvancedBaseOptions
         const cssAssetDirname =
           encodedPublicUrls || assetsBase.relative
             ? getCssAssetDirname(cssAssetName)
@@ -475,23 +476,25 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
               ? relativePath
               : './' + relativePath
           } else {
-            if (assetsBase.runtime) {
-              // config.logger.error('Error TODO:base')... absolute + runtime
-            }
+            // assetsBase.runtime has no effect for assets in CSS
             return (assetsBase.url ?? config.base) + filename
           }
         })
-        // resolve public URL from CSS paths, TODO:base
+        // resolve public URL from CSS paths
         if (encodedPublicUrls) {
           const relativePathToPublicFromCSS = path.posix.relative(
             cssAssetDirname!,
             ''
           )
-          chunkCSS = chunkCSS.replace(
-            publicAssetUrlRE,
-            (_, hash) =>
-              relativePathToPublicFromCSS + publicAssetUrlMap.get(hash)!
-          )
+          chunkCSS = chunkCSS.replace(publicAssetUrlRE, (_, hash) => {
+            const publicUrl = publicAssetUrlMap.get(hash)!
+            if (publicBase.relative) {
+              return relativePathToPublicFromCSS + publicUrl
+            } else {
+              // publicBase.runtime has no effect for assets in CSS
+              return (publicBase.url ?? config.base) + publicUrl.slice(1)
+            }
+          })
         }
         return chunkCSS
       }

playground/assets/__tests__/assets.spec.ts

@@ -179,8 +179,14 @@ describe('css url() references', () => {
     expect(bg).toMatch(assetMatch)
   })
 
-  test.runIf(isBuild)('preserve postfix query/hash', () => {
-    expect(findAssetFile(/\.css$/, 'foo')).toMatch(`woff2?#iefix`)
+  test.runIf(isBuild)('generated paths in CSS', () => {
+    const css = findAssetFile(/\.css$/, 'foo')
+
+    // preserve postfix query/hash
+    expect(css).toMatch(`woff2?#iefix`)
+
+    // generate non-relative base for public path in CSS
+    expect(css).not.toMatch(`../icon.png`)
   })
 })
 

playground/css/package.json

@@ -6,7 +6,10 @@
     "dev": "vite",
     "build": "vite build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "dev:relative-base": "vite --config ./vite.config-relative-base.js dev",
+    "build:relative-base": "vite --config ./vite.config-relative-base.js build",
+    "preview:relative-base": "vite --config ./vite.config-relative-base.js preview"
   },
   "devDependencies": {
     "css-dep": "link:./css-dep",

playground/css/vite.config-relative-base.js

@@ -0,0 +1,26 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+
+const baseConfig = require('./vite.config.js')
+module.exports = {
+  ...baseConfig,
+  base: './', // relative base to make dist portable
+  build: {
+    ...baseConfig.build,
+    outDir: 'dist/relative-base',
+    watch: false,
+    minify: false,
+    assetsInlineLimit: 0,
+    rollupOptions: {
+      output: {
+        entryFileNames: 'entries/[name].js',
+        chunkFileNames: 'chunks/[name].[hash].js',
+        assetFileNames: 'other-assets/[name].[hash][extname]'
+      }
+    }
+  },
+  testConfig: {
+    baseRoute: '/relative-base/'
+  }
+}

playground/css/vite.config.js

@@ -4,7 +4,6 @@ const path = require('path')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
-  base: './',
   build: {
     cssTarget: 'chrome61'
   },