fix: Improved attr-value-no-duplication logic (#1663)

Author: coliff

src/core/rules/attr-value-no-duplication.ts

@@ -9,12 +9,35 @@ export default {
       let attr
       const col = event.col + event.tagName.length + 1
 
+      // Skip SVG elements entirely
+      if (event.tagName.toLowerCase() === 'svg') {
+        return
+      }
+
       for (let i = 0, l = attrs.length; i < l; i++) {
         attr = attrs[i]
 
+        // Skip style and media attributes entirely
+        if (
+          attr.name.toLowerCase() === 'style' ||
+          attr.name.toLowerCase() === 'media'
+        ) {
+          continue
+        }
+
         if (attr.value) {
-          // Split attribute value by whitespace to get individual values
-          const values = attr.value.trim().split(/\s+/)
+          let values: string[]
+          if (attr.name.toLowerCase() === 'media') {
+            // For media, treat each comma-separated part as a whole
+            values = attr.value
+              .split(',')
+              .map((part) => part.trim())
+              .filter(Boolean)
+          } else {
+            // For other attributes, split by whitespace only
+            values = attr.value.trim().split(/\s+/)
+          }
+
           const duplicateMap: { [value: string]: boolean } = {}
 
           for (const value of values) {

test/rules/attr-value-no-duplication.spec.js

@@ -64,4 +64,31 @@ describe(`Rules: ${ruleId}`, () => {
       'Duplicate value [ btn ] was found in attribute [ class ].'
     )
   })
+
+  it('SVG elements should be skipped entirely', () => {
+    const code = '<svg class="icon icon icon" viewBox="0 0 24 24"></svg>'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(0)
+  })
+
+  it('Style attributes should be skipped entirely', () => {
+    const code =
+      '<div style="width: 2rem; height: 2rem; width: 2rem;">Test</div>'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(0)
+  })
+
+  it('CSS media queries with commas should not be flagged as duplicates', () => {
+    const code =
+      '<link rel="stylesheet" href="css/test.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(0)
+  })
+
+  it('Media attribute with actual duplicates should be skipped', () => {
+    const code =
+      '<link rel="stylesheet" href="css/test.css" media="screen screen">'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(0)
+  })
 })

website/src/content/docs/index.mdx

@@ -14,7 +14,7 @@ hero:
       variant: minimal
 banner:
   content: |
-    v1.5.1 is now available! Check the <a href="/changelog/">changelog</a> to see what's new.
+    v1.6.0 is now available! Check the <a href="/changelog/">changelog</a> to see what's new.
 tableOfContents: false
 lastUpdated: false
 editUrl: false