From bae30d7ebe453a200a4db66d83c1ee50e513de98 Mon Sep 17 00:00:00 2001 From: Rongjian Zhang Date: Fri, 4 Feb 2022 10:10:26 +0800 Subject: [PATCH 1/4] fix: link tag with media prop closes #6748 --- packages/vite/src/node/plugins/html.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index e7ca5e63961253..594f328757d94b 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -322,7 +322,13 @@ 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 media attribute is present + // see #6748 + !node.props.some((p) => p.name === 'media') + ) { // CSS references, convert to import js += `\nimport ${JSON.stringify(url)}` shouldRemove = true From 10c4a5bbc84e799e4e38a1007b4628e0f872708e Mon Sep 17 00:00:00 2001 From: Rongjian Zhang Date: Fri, 4 Feb 2022 18:14:11 +0800 Subject: [PATCH 2/4] Update packages/vite/src/node/plugins/html.ts Co-authored-by: Thomas Steiner --- packages/vite/src/node/plugins/html.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index 594f328757d94b..54ca2a32793951 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -327,7 +327,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { isCSSRequest(url) && // should not be converted if media attribute is present // see #6748 - !node.props.some((p) => p.name === 'media') + !node.props.some((p) => p.name === 'media' || p.name === 'disabled') ) { // CSS references, convert to import js += `\nimport ${JSON.stringify(url)}` From a9ec78ad30518167f548c06506a87f053d970c46 Mon Sep 17 00:00:00 2001 From: Rongjian Zhang Date: Fri, 4 Feb 2022 18:25:42 +0800 Subject: [PATCH 3/4] fixup --- packages/vite/src/node/plugins/html.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index 54ca2a32793951..3eadd055d7f5aa 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -325,9 +325,10 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { if ( node.tag === 'link' && isCSSRequest(url) && - // should not be converted if media attribute is present - // see #6748 - !node.props.some((p) => p.name === 'media' || p.name === 'disabled') + // 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 js += `\nimport ${JSON.stringify(url)}` From d4711d1e609998fb48513eb393489ff039bb30aa Mon Sep 17 00:00:00 2001 From: bluwy Date: Fri, 22 Jul 2022 02:26:58 +0800 Subject: [PATCH 4/4] chore: add tests --- 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 ++- 5 files changed, 19 insertions(+), 1 deletion(-) 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/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 @@ + + + +

test color

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