feat(attr-sorted): Sort data-* attributes at end.

dist/htmlhint.js

@@ -484,16 +484,25 @@
 	            }
 	            const originalAttrs = JSON.stringify(listOfAttributes);
 	            listOfAttributes.sort((a, b) => {
-	                if (orderMap[a] == undefined && orderMap[b] == undefined) {
-	                    return a.localeCompare(b);
+	                if (orderMap[a] !== undefined) {
+	                    if (orderMap[b] !== undefined) {
+	                        return orderMap[a] - orderMap[b];
+	                    }
+	                    return -1;
+	                }
+	                if (a.startsWith('data-')) {
+	                    if (b.startsWith('data-')) {
+	                        return a.localeCompare(b);
+	                    }
+	                    return 1;
 	                }
-	                if (orderMap[a] == undefined) {
+	                if (orderMap[b] !== undefined) {
 	                    return 1;
 	                }
-	                else if (orderMap[b] == undefined) {
+	                if (b.startsWith('data-')) {
 	                    return -1;
 	                }
-	                return orderMap[a] - orderMap[b] || a.localeCompare(b);
+	                return a.localeCompare(b);
 	            });
 	            if (originalAttrs !== JSON.stringify(listOfAttributes)) {
 	                reporter.error(`Inaccurate order ${originalAttrs} should be in hierarchy ${JSON.stringify(listOfAttributes)} `, event.line, event.col, this, event.raw);

src/core/rules/attr-sorted.ts

@@ -34,15 +34,37 @@ export default {
 
       const originalAttrs = JSON.stringify(listOfAttributes)
       listOfAttributes.sort((a, b) => {
-        if (orderMap[a] == undefined && orderMap[b] == undefined) {
-          return a.localeCompare(b)
+        // Sort a defined attribute.
+        if (orderMap[a] !== undefined) {
+          // With another defined attribute.
+          if (orderMap[b] !== undefined) {
+            return orderMap[a] - orderMap[b]
+          }
+          // With a data-* attribute or a regular attribute.
+          return -1
+        }
+
+        // Sort a data-* attribute.
+        if (a.startsWith('data-')) {
+          // With another data-* attribute.
+          if (b.startsWith('data-')) {
+            return a.localeCompare(b)
+          }
+          // With a defined attribute or a regular attribute.
+          return 1
         }
-        if (orderMap[a] == undefined) {
+
+        // Sort a regular attribute.
+        // With a defined attribute.
+        if (orderMap[b] !== undefined) {
           return 1
-        } else if (orderMap[b] == undefined) {
+        }
+        // With a data-* attribute.
+        if (b.startsWith('data-')) {
           return -1
         }
-        return orderMap[a] - orderMap[b] || a.localeCompare(b)
+        // With another regular attribute.
+        return a.localeCompare(b)
       })
 
       if (originalAttrs !== JSON.stringify(listOfAttributes)) {

test/rules/attr-sorted.spec.js

@@ -6,7 +6,7 @@ const ruleOptions = {}
 ruleOptions[ruleId] = true
 
 describe(`Rules: ${ruleId}`, () => {
-  it('Attribute unsorted tags must result in an error', () => {
+  it('Unsorted defined attributes should throw error', () => {
     const code = '<div id="test" class="class" title="title"></div>'
 
     const messages = HTMLHint.verify(code, ruleOptions)
@@ -16,45 +16,101 @@ describe(`Rules: ${ruleId}`, () => {
     expect(messages[0].message).toContain('["id","class","title"]')
   })
 
-  it('Attribute sorted tags that are unrecognizable should not throw error', () => {
-    const code = '<div font="font" img="image" meta="meta"></div>'
+  it('Sorted defined attributes should not throw error', () => {
+    const code = '<div class="class" id="test" title="title"></div>'
 
     const messages = HTMLHint.verify(code, ruleOptions)
 
     expect(messages.length).toBe(0)
   })
 
-  it('Attribute unsorted tags that are unrecognizable should throw error', () => {
-    const code = '<div img="image" meta="meta" font="font"></div>'
+  it('Unsorted data-* attributes should throw error', () => {
+    const code = '<main data-b="foo" data-a="bar"></main>'
 
     const messages = HTMLHint.verify(code, ruleOptions)
 
     expect(messages.length).toBe(1)
     expect(messages[0].rule.id).toBe(ruleId)
-    expect(messages[0].message).toContain('["img","meta","font"]')
+    expect(messages[0].message).toContain('["data-a","data-b"]')
   })
 
-  it('Attribute unsorted of tags of various types should throw error', () => {
-    const code = '<div type="type" img="image" id="id" font="font"></div>'
+  it('Sorted data-* attributes should not throw error', () => {
+    const code = '<main data-a="bar" data-b="foo"></main>'
+
+    const messages = HTMLHint.verify(code, ruleOptions)
+
+    expect(messages.length).toBe(0)
+  })
+
+  it('Unsorted regular attributes should throw error', () => {
+    const code = '<button disabled dir="rtl">Click</button>'
+
+    const messages = HTMLHint.verify(code, ruleOptions)
+
+    expect(messages.length).toBe(1)
+    expect(messages[0].rule.id).toBe(ruleId)
+    expect(messages[0].message).toContain('["dir","disabled"]')
+  })
+
+  it('Sorted regular attributes should not throw error', () => {
+    const code = '<button dir="rtl" disabled>Click</button>'
+
+    const messages = HTMLHint.verify(code, ruleOptions)
+
+    expect(messages.length).toBe(0)
+  })
+
+  it('Unsorted defined and data-* attributes should throw error', () => {
+    const code = '<img data-focal="80" src="IMG.jpg" />'
+
+    const messages = HTMLHint.verify(code, ruleOptions)
+
+    expect(messages.length).toBe(1)
+    expect(messages[0].rule.id).toBe(ruleId)
+    expect(messages[0].message).toContain('["src","data-focal"]')
+  })
+
+  it('Sorted defined and data-* attributes should not throw error', () => {
+    const code = '<img src="IMG.jpg" data-focal="80" />'
+
+    const messages = HTMLHint.verify(code, ruleOptions)
+
+    expect(messages.length).toBe(0)
+  })
+
+  it('Unsorted defined and regular attributes should throw error', () => {
+    const code = '<input required value="foo" />'
 
     const messages = HTMLHint.verify(code, ruleOptions)
 
     expect(messages.length).toBe(1)
     expect(messages[0].rule.id).toBe(ruleId)
-    expect(messages[0].message).toContain('["type","img","id","font"]')
+    expect(messages[0].message).toContain('["value","required"]')
   })
 
-  it('link tag with rel before href should not throw error', () => {
-    const code = '<link rel="stylesheet" href="https://example.com/style.css">'
+  it('Sorted defined and regular attributes should not throw error', () => {
+    const code = '<input value="foo" required />'
+
     const messages = HTMLHint.verify(code, ruleOptions)
+
     expect(messages.length).toBe(0)
   })
 
-  it('link tag with href before rel should throw error', () => {
-    const code = '<link href="https://example.com/style.css" rel="stylesheet">'
+  it('Unsorted data-* and regular attributes should throw error', () => {
+    const code = '<section data-prop="abc" lang="en" />'
+
     const messages = HTMLHint.verify(code, ruleOptions)
+
     expect(messages.length).toBe(1)
     expect(messages[0].rule.id).toBe(ruleId)
-    expect(messages[0].message).toContain('["href","rel"]')
+    expect(messages[0].message).toContain('["lang","data-prop"]')
+  })
+
+  it('Sorted data-* and regular attributes should not throw error', () => {
+    const code = '<section lang="en" data-prop="abc" />'
+
+    const messages = HTMLHint.verify(code, ruleOptions)
+
+    expect(messages.length).toBe(0)
   })
 })