Skip to content

Commit

Permalink
feat(html): support image set in inline style (#13473)
Browse files Browse the repository at this point in the history
  • Loading branch information
bluwy authored Jun 9, 2023
1 parent 0c673b0 commit 2c0faba
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 7 deletions.
6 changes: 4 additions & 2 deletions packages/vite/src/node/plugins/html.ts
Original file line number Diff line number Diff line change
Expand Up @@ -463,13 +463,15 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
}
}
}
// <tag style="... url(...) ..."></tag>
// <tag style="... url(...) or image-set(...) ..."></tag>
// extract inline styles as virtual css and add class attribute to tag for selecting
const inlineStyle = node.attrs.find(
(prop) =>
prop.prefix === undefined &&
prop.name === 'style' &&
prop.value.includes('url('), // only url(...) in css need to emit file
// only url(...) or image-set(...) in css need to emit file
(prop.value.includes('url(') ||
prop.value.includes('image-set(')),
)
if (inlineStyle) {
inlineModuleIndex++
Expand Down
11 changes: 10 additions & 1 deletion playground/assets/__tests__/assets.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ describe('css url() references', () => {
expect(imageSet).toContain('image-set(url("data:image/png;base64,')
})

test('image-set with multiple descriptor', async () => {
test('image-set with gradient', async () => {
const imageSet = await getBg('.css-image-set-gradient')
expect(imageSet).toContain('image-set(url("data:image/png;base64,')
})
Expand All @@ -160,6 +160,15 @@ describe('css url() references', () => {
})
})

test('image-set with multiple descriptor as inline style', async () => {
const imageSet = await getBg(
'.css-image-set-multiple-descriptor-inline-style',
)
imageSet.split(', ').forEach((s) => {
expect(s).toMatch(assetMatch)
})
})

test('relative in @import', async () => {
expect(await getBg('.css-url-relative-at-imported')).toMatch(assetMatch)
})
Expand Down
8 changes: 4 additions & 4 deletions playground/assets/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ <h2>CSS url references</h2>
CSS background image-set() (with multiple descriptor)
</span>
</div>
<!-- image-set in style tags is not supported in Vite yet -->
<!-- <div
<div
class="css-image-set-multiple-descriptor-inline-style"
style="
background-image: -webkit-image-set(
'./nested/asset.png' type('image/png') 1x,
Expand All @@ -82,9 +82,9 @@ <h2>CSS url references</h2>
"
>
<span style="background: #fff">
CSS background image-set() (with multiple descriptor)
CSS background image-set() inline style (with multiple descriptor)
</span>
</div> -->
</div>
<div class="css-url-relative-at-imported">
<span style="background: #fff"
>CSS background (relative from @imported file in different dir)</span
Expand Down

0 comments on commit 2c0faba

Please sign in to comment.