From 9cd9d1aacc27f20fcda9e48278d32bf3dfcf3eae Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Sat, 8 Oct 2022 23:39:24 +0900 Subject: [PATCH] fix(html): handle attrs with prefix (fixes #10337) --- packages/vite/src/node/plugins/html.ts | 21 ++++++++++++++----- .../src/node/server/middlewares/indexHtml.ts | 8 ++++--- playground/html/public/sprite.svg | 14 +++++++++++++ playground/html/valid.html | 7 ++++++- 4 files changed, 41 insertions(+), 9 deletions(-) create mode 100644 playground/html/public/sprite.svg diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index ad2f3abd39af32..30daca766b4ee9 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -182,6 +182,7 @@ export function getScriptInfo(node: DefaultTreeAdapterMap['element']): { let isModule = false let isAsync = false for (const p of node.attrs) { + if (p.prefix !== undefined) continue if (p.name === 'src') { if (!src) { src = p @@ -412,9 +413,10 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { const assetAttrs = assetAttrsConfig[node.nodeName] if (assetAttrs) { for (const p of node.attrs) { - if (p.value && assetAttrs.includes(p.name)) { + const attrKey = getAttrKey(p) + if (p.value && assetAttrs.includes(attrKey)) { const attrSourceCodeLocation = - node.sourceCodeLocation!.attrs![p.name] + node.sourceCodeLocation!.attrs![attrKey] // assetsUrl may be encodeURI const url = decodeURI(p.value) if (!isExcludedUrl(url)) { @@ -423,7 +425,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { isCSSRequest(url) && // should not be converted if following attributes are present (#6748) !node.attrs.some( - (p) => p.name === 'media' || p.name === 'disabled' + (p) => + p.prefix === undefined && + (p.name === 'media' || p.name === 'disabled') ) ) { // CSS references, convert to import @@ -453,7 +457,10 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { // // extract inline styles as virtual css and add class attribute to tag for selecting const inlineStyle = node.attrs.find( - (prop) => prop.name === 'style' && prop.value.includes('url(') // only url(...) in css need to emit file + (prop) => + prop.prefix === undefined && + prop.name === 'style' && + prop.value.includes('url(') // only url(...) in css need to emit file ) if (inlineStyle) { inlineModuleIndex++ @@ -527,7 +534,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { ) { try { const url = - attr.name === 'srcset' + attr.prefix === undefined && attr.name === 'srcset' ? await processSrcSet(content, ({ url }) => urlToBuiltUrl(url, id, config, this) ) @@ -1133,3 +1140,7 @@ function serializeAttrs(attrs: HtmlTagDescriptor['attrs']): string { function incrementIndent(indent: string = '') { return `${indent}${indent[0] === '\t' ? '\t' : ' '}` } + +export function getAttrKey(attr: Token.Attribute): string { + return attr.prefix === undefined ? attr.name : `${attr.prefix}:${attr.name}` +} diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index 736fc316ee3011..326281b853f079 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/packages/vite/src/node/server/middlewares/indexHtml.ts @@ -9,6 +9,7 @@ import { addToHTMLProxyCache, applyHtmlTransforms, assetAttrsConfig, + getAttrKey, getScriptInfo, nodeIsElement, overwriteAttrValue, @@ -112,7 +113,7 @@ const processNodeUrl = ( // rewrite after `../index.js` -> `localhost:5173/index.js`. const processedUrl = - attr.name === 'srcset' + attr.name === 'srcset' && attr.prefix === undefined ? processSrcSetSync(url, ({ url }) => replacer(url)) : replacer(url) overwriteAttrValue(s, sourceCodeLocation, processedUrl) @@ -228,10 +229,11 @@ const devHtmlHook: IndexHtmlTransformHook = async ( const assetAttrs = assetAttrsConfig[node.nodeName] if (assetAttrs) { for (const p of node.attrs) { - if (p.value && assetAttrs.includes(p.name)) { + const attrKey = getAttrKey(p) + if (p.value && assetAttrs.includes(attrKey)) { processNodeUrl( p, - node.sourceCodeLocation!.attrs![p.name], + node.sourceCodeLocation!.attrs![attrKey], s, config, htmlPath, diff --git a/playground/html/public/sprite.svg b/playground/html/public/sprite.svg new file mode 100644 index 00000000000000..b948cff92b6e39 --- /dev/null +++ b/playground/html/public/sprite.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/playground/html/valid.html b/playground/html/valid.html index a2bd28f802184e..8bc52a0bcbccd4 100644 --- a/playground/html/valid.html +++ b/playground/html/valid.html @@ -7,4 +7,9 @@
No quotes on Attr
- \ No newline at end of file + + + + + +