feat(rules): use more precise location from `DOMTokenList`

docs/rules/__tests__/__snapshots__/no-dup-class.md.spec.ts.snap

@@ -9,15 +9,15 @@ Array [
     "filePath": "inline",
     "messages": Array [
       Object {
-        "column": 13,
+        "column": 21,
         "context": undefined,
         "line": 1,
         "message": "Class \\"foo\\" duplicated",
-        "offset": 12,
+        "offset": 20,
         "ruleId": "no-dup-class",
         "selector": "div",
         "severity": 2,
-        "size": 11,
+        "size": 3,
       },
     ],
     "source": "<div class=\\"foo bar foo\\"></div>",

docs/rules/class-pattern.md

@@ -5,7 +5,7 @@ category: style
 summary: Require classes to match a specific pattern
 ---
 
-# require a specific class format (`class-pattern`)
+# Require a specific class format (`class-pattern`)
 
 Requires all classes to match a given pattern.
 
@@ -14,13 +14,13 @@ Requires all classes to match a given pattern.
 Examples of **incorrect** code for this rule:
 
 <validate name="incorrect" rules="class-pattern">
-<div class="fooBar"></foobar>
+    <div class="fooBar"></foobar>
 </validate>
 
 Examples of **correct** code for this rule:
 
 <validate name="correct" rules="class-pattern">
-<div class="foo-bar"></div>
+    <div class="foo-bar"></div>
 </validate>
 
 ## Options

docs/rules/no-dup-class.md

@@ -4,7 +4,7 @@ name: no-dup-class
 summary: Disallow duplicated classes
 ---
 
-# disallows duplicated classes on same element (`no-dup-class`)
+# Disallows duplicated classes on same element (`no-dup-class`)
 
 Prevents unnecessary duplication of class names.
 

src/rules/__snapshots__/class-pattern.spec.ts.snap

@@ -14,26 +14,26 @@ Array [
     "filePath": "test-files/rules/class-pattern.html",
     "messages": Array [
       Object {
-        "column": 13,
+        "column": 17,
         "context": undefined,
         "line": 3,
         "message": "Class \\"foo_bar\\" does not match required pattern \\"/^[a-z0-9-]+$/\\"",
-        "offset": 49,
+        "offset": 53,
         "ruleId": "class-pattern",
         "selector": "div:nth-child(2)",
         "severity": 2,
-        "size": 15,
+        "size": 7,
       },
       Object {
-        "column": 13,
+        "column": 17,
         "context": undefined,
         "line": 5,
         "message": "Class \\"fooBar\\" does not match required pattern \\"/^[a-z0-9-]+$/\\"",
-        "offset": 86,
+        "offset": 90,
         "ruleId": "class-pattern",
         "selector": "div:nth-child(3)",
         "severity": 2,
-        "size": 14,
+        "size": 6,
       },
     ],
     "source": "<div class=\\"foo foo-bar bar\\"></div>

src/rules/__snapshots__/no-dup-class.spec.ts.snap

@@ -14,15 +14,15 @@ Array [
     "filePath": "test-files/rules/no-dup-class.html",
     "messages": Array [
       Object {
-        "column": 13,
+        "column": 21,
         "context": undefined,
         "line": 5,
         "message": "Class \\"foo\\" duplicated",
-        "offset": 66,
+        "offset": 74,
         "ruleId": "no-dup-class",
         "selector": "div:nth-child(3)",
         "severity": 2,
-        "size": 11,
+        "size": 3,
       },
     ],
     "source": "<div class=\\"foo\\"></div>

src/rules/class-pattern.ts

@@ -33,13 +33,14 @@ export default class ClassPattern extends Rule<void, RuleOptions> {
 				return;
 			}
 
-			const classes = new DOMTokenList(event.value);
-			classes.forEach((cur) => {
+			const classes = new DOMTokenList(event.value, event.valueLocation);
+			classes.forEach((cur: string, index: number) => {
 				if (!cur.match(this.pattern)) {
+					const location = classes.location(index);
 					this.report(
 						event.target,
 						`Class "${cur}" does not match required pattern "${this.pattern}"`,
-						event.valueLocation
+						location
 					);
 				}
 			});

src/rules/no-dup-class.ts

@@ -16,15 +16,12 @@ export default class NoDupClass extends Rule {
 				return;
 			}
 
-			const classes = new DOMTokenList(event.value);
+			const classes = new DOMTokenList(event.value, event.valueLocation);
 			const unique: Set<string> = new Set();
-			classes.forEach((cur) => {
+			classes.forEach((cur: string, index: number) => {
 				if (unique.has(cur)) {
-					this.report(
-						event.target,
-						`Class "${cur}" duplicated`,
-						event.valueLocation
-					);
+					const location = classes.location(index);
+					this.report(event.target, `Class "${cur}" duplicated`, location);
 				}
 				unique.add(cur);
 			});