Skip to content

Commit

Permalink
fix(css): render correct asset url when CSS chunk name is nested (#15154
Browse files Browse the repository at this point in the history
)
  • Loading branch information
sapphi-red authored Nov 27, 2023
1 parent db3c88e commit ef403c0
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 3 deletions.
8 changes: 5 additions & 3 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ import {
processSrcSet,
removeDirectQuery,
requireResolveFromRootWithFallback,
slash,
stripBase,
stripBomTag,
} from '../utils'
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
4 changes: 4 additions & 0 deletions playground/assets/css/manual-chunks.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.css-manual-chunks-relative {
background: url(../nested/asset.png);
background-size: 10px;
}
6 changes: 6 additions & 0 deletions playground/assets/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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}`)

Expand Down
5 changes: 5 additions & 0 deletions playground/assets/vite.config-relative-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
},
},
},
},
Expand Down

0 comments on commit ef403c0

Please sign in to comment.