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

Co-authored-by: Thomas Steiner <tomac@google.com> Co-authored-by: bluwy <bjornlu.dev@gmail.com>
vitejs · Jul 25, 2022 · e6c8965 · e6c8965
1 parent 2fcb027
commit e6c8965
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 2 deletions.
diff --git a/packages/vite/src/node/plugins/html.ts b/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({

diff --git a/playground/html/__tests__/html.spec.ts b/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')

diff --git a/playground/html/link-props/index.html b/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>
diff --git a/playground/html/link-props/print.css b/playground/html/link-props/print.css
@@ -0,0 +1,3 @@
+#link-props {
+  color: green;
+}
diff --git a/playground/html/link-props/screen.css b/playground/html/link-props/screen.css
@@ -0,0 +1,3 @@
+#link-props {
+  color: red;
+}
diff --git a/playground/html/vite.config.js b/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')
       }
     }
   },