Skip to content

Commit

Permalink
fix: support stylesheets with link tag and media/disable prop (#6751)
Browse files Browse the repository at this point in the history
Co-authored-by: Thomas Steiner <tomac@google.com>
Co-authored-by: bluwy <bjornlu.dev@gmail.com>
  • Loading branch information
3 people authored Jul 25, 2022
1 parent 2fcb027 commit e6c8965
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 2 deletions.
9 changes: 8 additions & 1 deletion packages/vite/src/node/plugins/html.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
7 changes: 7 additions & 0 deletions playground/html/__tests__/html.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
4 changes: 4 additions & 0 deletions playground/html/link-props/index.html
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions playground/html/link-props/print.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
#link-props {
color: green;
}
3 changes: 3 additions & 0 deletions playground/html/link-props/screen.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
#link-props {
color: red;
}
3 changes: 2 additions & 1 deletion playground/html/vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ module.exports = {
unicodePath: resolve(
__dirname,
'unicode-path/中文-にほんご-한글-🌕🌖🌗/index.html'
)
),
linkProps: resolve(__dirname, 'link-props/index.html')
}
}
},
Expand Down

0 comments on commit e6c8965

Please sign in to comment.