From e6c896516bb90bc1db3a457ddb666a81fe6233a2 Mon Sep 17 00:00:00 2001
From: Rongjian Zhang <pd4d10@gmail.com>
Date: Mon, 25 Jul 2022 23:35:16 +0800
Subject: [PATCH] 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>
---
 packages/vite/src/node/plugins/html.ts | 9 ++++++++-
 playground/html/__tests__/html.spec.ts | 7 +++++++
 playground/html/link-props/index.html  | 4 ++++
 playground/html/link-props/print.css   | 3 +++
 playground/html/link-props/screen.css  | 3 +++
 playground/html/vite.config.js         | 3 ++-
 6 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 playground/html/link-props/index.html
 create mode 100644 playground/html/link-props/print.css
 create mode 100644 playground/html/link-props/screen.css

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 6618d317fc8319..ac7ac834ff941a 100644
--- 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
index b1c67a9b410994..4c0376636abd5b 100644
--- 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
new file mode 100644
index 00000000000000..c48e0af202711c
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..1fd8299149a001
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..d3ef4a56058bf3
--- /dev/null
+++ 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
index 95820ca2c7cf1f..31cc1656d2f19e 100644
--- 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')
       }
     }
   },