Skip to content

Commit

Permalink
fix(build): decode urls in CSS files (fix #15109) (#15246)
Browse files Browse the repository at this point in the history
  • Loading branch information
ndv99 authored Dec 12, 2023
1 parent 921ca41 commit ea6a7a6
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 6 deletions.
13 changes: 7 additions & 6 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -264,22 +264,23 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
const ssr = options?.ssr === true

const urlReplacer: CssUrlReplacer = async (url, importer) => {
if (checkPublicFile(url, config)) {
const decodedUrl = decodeURI(url)
if (checkPublicFile(decodedUrl, config)) {
if (encodePublicUrlsInCSS(config)) {
return publicFileToBuiltUrl(url, config)
return publicFileToBuiltUrl(decodedUrl, config)
} else {
return joinUrlSegments(config.base, url)
return joinUrlSegments(config.base, decodedUrl)
}
}
const resolved = await resolveUrl(url, importer)
const resolved = await resolveUrl(decodedUrl, importer)
if (resolved) {
return fileToUrl(resolved, config, this)
}
if (config.command === 'build') {
const isExternal = config.build.rollupOptions.external
? resolveUserExternal(
config.build.rollupOptions.external,
url, // use URL as id since id could not be resolved
decodedUrl, // use URL as id since id could not be resolved
id,
false,
)
Expand All @@ -288,7 +289,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
if (!isExternal) {
// #9800 If we cannot resolve the css url, leave a warning.
config.logger.warnOnce(
`\n${url} referenced in ${id} didn't resolve at build time, it will remain unchanged to be resolved at runtime`,
`\n${decodedUrl} referenced in ${id} didn't resolve at build time, it will remain unchanged to be resolved at runtime`,
)
}
}
Expand Down
8 changes: 8 additions & 0 deletions playground/assets/__tests__/assets.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ const assetMatch = isBuild
? /\/foo\/bar\/assets\/asset-[-\w]{8}\.png/
: '/foo/bar/nested/asset.png'

const encodedAssetMatch = isBuild
? /\/foo\/bar\/assets\/asset_small_-[-\w]{8}\.png/
: '/foo/bar/nested/asset[small].png'

const iconMatch = `/foo/bar/icon.png`

const fetchPath = (p: string) => {
Expand Down Expand Up @@ -153,6 +157,10 @@ describe('css url() references', () => {
expect(await getBg('.css-url-relative')).toMatch(assetMatch)
})

test('encoded', async () => {
expect(await getBg('.css-url-encoded')).toMatch(encodedAssetMatch)
})

test('image-set relative', async () => {
const imageSet = await getBg('.css-image-set-relative')
imageSet.split(', ').forEach((s) => {
Expand Down
5 changes: 5 additions & 0 deletions playground/assets/css/css-url.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions playground/assets/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ <h2>CSS url references</h2>
<div class="css-url-relative">
<span style="background: #fff">CSS background (relative)</span>
</div>
<div class="css-url-encoded">
<span style="background: #fff">CSS background (encoded)</span>
</div>
<div class="css-image-set-relative">
<span style="background: #fff"
>CSS background with image-set() (relative)</span
Expand Down
Binary file added playground/assets/nested/asset[small].png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ea6a7a6

Please sign in to comment.