Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 30, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions dist/core/rules/attr-sorted.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 14 additions & 5 deletions dist/htmlhint.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion dist/htmlhint.min.js

Large diffs are not rendered by default.

32 changes: 27 additions & 5 deletions src/core/rules/attr-sorted.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
84 changes: 70 additions & 14 deletions test/rules/attr-sorted.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
})
})