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

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 @@ <h2>CSS url references</h2>
 <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 @@ <h3>assets in noscript</h3>
  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'
+ }
+ },
  },
  },
  },