fix: support stylesheets with link tag and media/disable prop (#6751)

Co-authored-by: Thomas Steiner <[email protected]>
Co-authored-by: bluwy <[email protected]>

Author: 3 people

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

@@ -354,7 +354,14 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                 // assetsUrl may be encodeURI
                 const url = decodeURI(p.value.content)
                 if (!isExcludedUrl(url)) {
-                  if (node.tag === 'link' && isCSSRequest(url)) {
+                  if (
+                    node.tag === 'link' &&
+                    isCSSRequest(url) &&
+                    // should not be converted if following attributes are present (#6748)
+                    !node.props.some(
+                      (p) => p.name === 'media' || p.name === 'disabled'
+                    )
+                  ) {
                     // CSS references, convert to import
                     const importExpression = `\nimport ${JSON.stringify(url)}`
                     styleUrls.push({

playground/html/__tests__/html.spec.ts

@@ -212,6 +212,13 @@ describe('Unicode path', () => {
   })
 })
 
+describe('link with props', () => {
+  test('separate links with different media props', async () => {
+    await page.goto(viteTestUrl + '/link-props/index.html')
+    expect(await getColor('h1')).toBe('red')
+  })
+})
+
 describe.runIf(isServe)('invalid', () => {
   test('should be 500 with overlay', async () => {
     const response = await page.goto(viteTestUrl + '/invalid.html')

playground/html/link-props/index.html

@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="./screen.css" media="screen" />
+<link rel="stylesheet" href="./print.css" media="print" />
+
+<h1 id="link-props">test color</h1>

playground/html/link-props/print.css

@@ -0,0 +1,3 @@
+#link-props {
+  color: green;
+}

playground/html/link-props/screen.css

@@ -0,0 +1,3 @@
+#link-props {
+  color: red;
+}

playground/html/vite.config.js

@@ -25,7 +25,8 @@ module.exports = {
         unicodePath: resolve(
           __dirname,
           'unicode-path/中文-にほんご-한글-🌕🌖🌗/index.html'
-        )
+        ),
+        linkProps: resolve(__dirname, 'link-props/index.html')
       }
     }
   },