diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 769de344b15290..729b9009b1c34c 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -463,13 +463,15 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
}
}
}
- //
+ //
// 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++
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index e5088b6020eef0..b6309adede1916 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -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,')
})
@@ -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)
})
diff --git a/playground/assets/index.html b/playground/assets/index.html
index 57d300cb108707..84ed21dbe30978 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -71,8 +71,8 @@
CSS url references
CSS background image-set() (with multiple descriptor)
-
-
+
CSS background (relative from @imported file in different dir)