fix(html): handle attrs with prefix (fixes #10337) (#10381)

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 {
           // <tag style="... url(...) ..."></tag>
           // 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}`
+}

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,

playground/html/public/sprite.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="svg">
+    <rect width="32" height="32" fill="white" />
+    <path
+      d="M10.0091 19.5678C10.0091 20.1332 9.87046 20.6078 9.59313 20.9918C9.31579 21.3758 8.91579 21.6692 8.39313 21.8718C7.87046 22.0638 7.24113 22.1598 6.50513 22.1598C5.89713 22.1598 5.37446 22.1118 4.93713 22.0158C4.51046 21.9305 4.11579 21.8025 3.75313 21.6318V20.1438C4.13713 20.3252 4.57979 20.4905 5.08113 20.6398C5.58246 20.7785 6.07313 20.8478 6.55313 20.8478C7.19313 20.8478 7.65179 20.7465 7.92913 20.5438C8.21713 20.3412 8.36113 20.0692 8.36113 19.7278C8.36113 19.5358 8.30779 19.3652 8.20113 19.2158C8.09446 19.0558 7.89179 18.8958 7.59313 18.7358C7.30513 18.5652 6.87846 18.3732 6.31313 18.1598C5.76913 17.9358 5.30513 17.7172 4.92113 17.5038C4.53713 17.2798 4.24379 17.0185 4.04113 16.7198C3.83846 16.4105 3.73713 16.0158 3.73713 15.5358C3.73713 14.7892 4.03579 14.2185 4.63313 13.8238C5.24113 13.4185 6.04113 13.2158 7.03313 13.2158C7.55579 13.2158 8.04646 13.2692 8.50513 13.3758C8.97446 13.4718 9.42779 13.6212 9.86513 13.8238L9.30513 15.1198C9.05979 15.0025 8.80379 14.9065 8.53713 14.8318C8.28113 14.7465 8.01979 14.6772 7.75313 14.6238C7.49713 14.5705 7.23046 14.5438 6.95313 14.5438C6.44113 14.5438 6.05179 14.6238 5.78513 14.7838C5.51846 14.9438 5.38513 15.1678 5.38513 15.4558C5.38513 15.6585 5.44379 15.8345 5.56113 15.9838C5.68913 16.1332 5.90779 16.2825 6.21713 16.4318C6.52646 16.5812 6.94779 16.7625 7.48113 16.9758C8.01446 17.1785 8.46779 17.3865 8.84113 17.5998C9.22513 17.8132 9.51313 18.0745 9.70513 18.3838C9.90779 18.6932 10.0091 19.0878 10.0091 19.5678Z"
+      fill="black" />
+    <path
+      d="M13.9671 21.9998L10.7031 13.3758H12.4951L14.2871 18.4158C14.3618 18.6292 14.4365 18.8692 14.5111 19.1358C14.5965 19.4025 14.6711 19.6585 14.7351 19.9038C14.7991 20.1492 14.8418 20.3625 14.8631 20.5438H14.9271C14.9591 20.3625 15.0071 20.1492 15.0711 19.9038C15.1458 19.6478 15.2258 19.3918 15.3111 19.1358C15.3965 18.8692 15.4711 18.6292 15.5351 18.4158L17.3271 13.3758H19.1191L15.8391 21.9998H13.9671Z"
+      fill="black" />
+    <path
+      d="M23.429 13.2158C23.9837 13.2158 24.485 13.3225 24.933 13.5358C25.381 13.7492 25.7597 14.0745 26.069 14.5118H26.149L26.341 13.3758H27.717V22.1118C27.717 22.9225 27.573 23.6052 27.285 24.1598C26.997 24.7145 26.5543 25.1305 25.957 25.4078C25.3703 25.6958 24.629 25.8398 23.733 25.8398C23.1143 25.8398 22.5437 25.7972 22.021 25.7118C21.4983 25.6265 21.0183 25.4932 20.581 25.3118V23.8238C20.8903 23.9732 21.2157 24.0958 21.557 24.1918C21.8983 24.2985 22.261 24.3732 22.645 24.4158C23.029 24.4692 23.4237 24.4958 23.829 24.4958C24.533 24.4958 25.077 24.2932 25.461 23.8878C25.845 23.4932 26.037 22.9332 26.037 22.2078V21.9198C26.037 21.7812 26.0423 21.5998 26.053 21.3758C26.0637 21.1412 26.0743 20.9705 26.085 20.8638H26.021C25.7223 21.3118 25.3543 21.6425 24.917 21.8558C24.4903 22.0585 23.9943 22.1598 23.429 22.1598C22.341 22.1598 21.4877 21.7705 20.869 20.9918C20.261 20.2025 19.957 19.1092 19.957 17.7118C19.957 16.7732 20.0957 15.9732 20.373 15.3118C20.6503 14.6398 21.045 14.1225 21.557 13.7598C22.0797 13.3972 22.7037 13.2158 23.429 13.2158ZM23.781 14.6238C23.333 14.6238 22.9543 14.7465 22.645 14.9918C22.3357 15.2265 22.101 15.5732 21.941 16.0318C21.781 16.4905 21.701 17.0558 21.701 17.7278C21.701 18.7305 21.877 19.4932 22.229 20.0158C22.5917 20.5385 23.1197 20.7998 23.813 20.7998C24.2183 20.7998 24.5597 20.7465 24.837 20.6398C25.125 20.5332 25.3597 20.3678 25.541 20.1438C25.733 19.9198 25.8717 19.6372 25.957 19.2958C26.053 18.9438 26.101 18.5225 26.101 18.0318V17.7118C26.101 16.9758 26.0157 16.3838 25.845 15.9358C25.685 15.4772 25.4343 15.1465 25.093 14.9438C24.7517 14.7305 24.3143 14.6238 23.781 14.6238Z"
+      fill="black" />
+  </symbol>
+</svg>

playground/html/valid.html

@@ -7,4 +7,9 @@
 </datalist>
 
 <div id="no-quotes-on-attr">No quotes on Attr</div>
-<script type="module" src=/valid.js></script>
+<script type="module" src=/valid.js></script>
+
+<svg>
+  <!-- attr with prefix -->
+  <use xlink:href="/sprite.svg#svg"></use>
+</svg>