fix(css): render correct asset url when CSS chunk name is nested (#15154)

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

@@ -54,6 +54,7 @@ import {
   processSrcSet,
   removeDirectQuery,
   requireResolveFromRootWithFallback,
+  slash,
   stripBase,
   stripBomTag,
 } from '../utils'
@@ -388,10 +389,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       : rollupOptionsOutput
   )?.assetFileNames
   const getCssAssetDirname = (cssAssetName: string) => {
+    const cssAssetNameDir = path.dirname(cssAssetName)
     if (!assetFileNames) {
-      return config.build.assetsDir
+      return path.join(config.build.assetsDir, cssAssetNameDir)
     } else if (typeof assetFileNames === 'string') {
-      return path.dirname(assetFileNames)
+      return path.join(path.dirname(assetFileNames), cssAssetNameDir)
     } else {
       return path.dirname(
         assetFileNames({
@@ -556,7 +558,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         const relative = config.base === './' || config.base === ''
         const cssAssetDirname =
           encodedPublicUrls || relative
-            ? getCssAssetDirname(cssAssetName)
+            ? slash(getCssAssetDirname(cssAssetName))
             : undefined
 
         const toRelative = (filename: string) => {

playground/assets/__tests__/relative-base/relative-base-assets.spec.ts

@@ -132,6 +132,11 @@ describe('css url() references', () => {
     const bg = await getBg('.css-url-aliased')
     expect(bg).toMatch(cssBgAssetMatch)
   })
+
+  test('nested manual chunks', async () => {
+    const bg = await getBg('.css-manual-chunks-relative')
+    expect(bg).toMatch(cssBgAssetMatch)
+  })
 })
 
 describe.runIf(isBuild)('index.css URLs', () => {

playground/assets/css/manual-chunks.css

@@ -0,0 +1,4 @@
+.css-manual-chunks-relative {
+  background: url(../nested/asset.png);
+  background-size: 10px;
+}

playground/assets/index.html

@@ -114,6 +114,11 @@
 <div class="css-url-aliased">
   <span style="background: #fff">CSS background (aliased)</span>
 </div>
+<div class="css-manual-chunks-relative">
+  <span style="background: #fff"
+    >CSS nested manual chunks relative base background</span
+  >
+</div>
 
 <div class="css-url-svg">
   <span style="background: #fff">CSS SVG background</span>
@@ -395,6 +400,7 @@
   import './css/fonts.css'
   import './css/css-url.css'
   import './css/icons.css'
+  import './css/manual-chunks.css'
 
   text('.base', `import.meta.${``}env.BASE_URL: ${import.meta.env.BASE_URL}`)
 

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

@@ -15,6 +15,11 @@ export default defineConfig(({ isPreview }) => ({
         entryFileNames: 'entries/[name].js',
         chunkFileNames: 'chunks/[name]-[hash].js',
         assetFileNames: 'other-assets/[name]-[hash][extname]',
+        manualChunks(id) {
+          if (id.includes('css/manual-chunks.css')) {
+            return 'css/manual-chunks'
+          }
+        },
       },
     },
   },