fix: no quote on attrs (#10117)

Author: patak-dev

packages/vite/src/node/plugins/html.ts

@@ -196,7 +196,7 @@ export function getScriptInfo(node: DefaultTreeAdapterMap['element']): {
   return { src, sourceCodeLocation, isModule, isAsync }
 }
 
-const attrValueStartRE = /=[\s\t\n\r]*(["']|.)/
+const attrValueStartRE = /=[\s\t\n\r]*(.)/
 
 export function overwriteAttrValue(
   s: MagicString,
@@ -214,7 +214,7 @@ export function overwriteAttrValue(
       `[vite:html] internal error, failed to overwrite attribute value`
     )
   }
-  const wrapOffset = valueStart[1] ? 1 : 0
+  const wrapOffset = valueStart[1] === '"' || valueStart[1] === "'" ? 1 : 0
   const valueOffset = valueStart.index! + valueStart[0].length - 1
   s.overwrite(
     sourceCodeLocation.startOffset + valueOffset + wrapOffset,

playground/html/__tests__/html.spec.ts

@@ -256,3 +256,14 @@ test('importmap', () => {
     'An import map is added after module script load was triggered.'
   )
 })
+
+describe('Valid HTML', () => {
+  test('valid HTML is parsed', async () => {
+    await page.goto(viteTestUrl + '/valid.html')
+    expect(await page.textContent('#no-quotes-on-attr')).toBe(
+      'No quotes on Attr working'
+    )
+
+    expect(await getColor('#duplicated-attrs')).toBe('green')
+  })
+})

playground/html/valid.html

@@ -5,3 +5,6 @@
 <datalist>
   <option value="option-without-closing-tag">    
 </datalist>
+
+<div id="no-quotes-on-attr">No quotes on Attr</div>
+<script type="module" src=/valid.js></script>

playground/html/valid.js

@@ -0,0 +1,3 @@
+document.getElementById(
+  `no-quotes-on-attr`
+).innerHTML = `No quotes on Attr working`