Skip to content

Commit ef403c0

Browse files
authored
fix(css): render correct asset url when CSS chunk name is nested (#15154)
1 parent db3c88e commit ef403c0

File tree

5 files changed

+25
-3
lines changed

5 files changed

+25
-3
lines changed

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import {
5454
processSrcSet,
5555
removeDirectQuery,
5656
requireResolveFromRootWithFallback,
57+
slash,
5758
stripBase,
5859
stripBomTag,
5960
} from '../utils'
@@ -388,10 +389,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
388389
: rollupOptionsOutput
389390
)?.assetFileNames
390391
const getCssAssetDirname = (cssAssetName: string) => {
392+
const cssAssetNameDir = path.dirname(cssAssetName)
391393
if (!assetFileNames) {
392-
return config.build.assetsDir
394+
return path.join(config.build.assetsDir, cssAssetNameDir)
393395
} else if (typeof assetFileNames === 'string') {
394-
return path.dirname(assetFileNames)
396+
return path.join(path.dirname(assetFileNames), cssAssetNameDir)
395397
} else {
396398
return path.dirname(
397399
assetFileNames({
@@ -556,7 +558,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
556558
const relative = config.base === './' || config.base === ''
557559
const cssAssetDirname =
558560
encodedPublicUrls || relative
559-
? getCssAssetDirname(cssAssetName)
561+
? slash(getCssAssetDirname(cssAssetName))
560562
: undefined
561563

562564
const toRelative = (filename: string) => {

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

+5
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,11 @@ describe('css url() references', () => {
132132
const bg = await getBg('.css-url-aliased')
133133
expect(bg).toMatch(cssBgAssetMatch)
134134
})
135+
136+
test('nested manual chunks', async () => {
137+
const bg = await getBg('.css-manual-chunks-relative')
138+
expect(bg).toMatch(cssBgAssetMatch)
139+
})
135140
})
136141

137142
describe.runIf(isBuild)('index.css URLs', () => {
+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.css-manual-chunks-relative {
2+
background: url(../nested/asset.png);
3+
background-size: 10px;
4+
}

playground/assets/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,11 @@ <h2>CSS url references</h2>
114114
<div class="css-url-aliased">
115115
<span style="background: #fff">CSS background (aliased)</span>
116116
</div>
117+
<div class="css-manual-chunks-relative">
118+
<span style="background: #fff"
119+
>CSS nested manual chunks relative base background</span
120+
>
121+
</div>
117122

118123
<div class="css-url-svg">
119124
<span style="background: #fff">CSS SVG background</span>
@@ -395,6 +400,7 @@ <h3>assets in noscript</h3>
395400
import './css/fonts.css'
396401
import './css/css-url.css'
397402
import './css/icons.css'
403+
import './css/manual-chunks.css'
398404

399405
text('.base', `import.meta.${``}env.BASE_URL: ${import.meta.env.BASE_URL}`)
400406

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

+5
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ export default defineConfig(({ isPreview }) => ({
1515
entryFileNames: 'entries/[name].js',
1616
chunkFileNames: 'chunks/[name]-[hash].js',
1717
assetFileNames: 'other-assets/[name]-[hash][extname]',
18+
manualChunks(id) {
19+
if (id.includes('css/manual-chunks.css')) {
20+
return 'css/manual-chunks'
21+
}
22+
},
1823
},
1924
},
2025
},

0 commit comments

Comments
 (0)