feat(html): support image set in inline style (#13473)

Author: bluwy

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

@@ -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++

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)
   })

playground/assets/index.html

@@ -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,
@@ -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