fix(consistent-selector-style): not reporting class selectors used in class directives (#1108)

Author: marekdedic

.changeset/purple-months-report.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': patch
+---
+
+fix(consistent-selector-style): not reporting class selectors used in class directives

packages/eslint-plugin-svelte/src/rules/consistent-selector-style.ts

@@ -62,6 +62,7 @@ export default createRule('consistent-selector-style', {
 		const checkGlobal = context.options[0]?.checkGlobal ?? false;
 		const style = context.options[0]?.style ?? ['type', 'id', 'class'];
 
+		const whitelistedClasses: string[] = [];
 		const classSelections: Map<string, AST.SvelteHTMLElement[]> = new Map();
 		const idSelections: Map<string, AST.SvelteHTMLElement[]> = new Map();
 		const typeSelections: Map<string, AST.SvelteHTMLElement[]> = new Map();
@@ -109,6 +110,9 @@ export default createRule('consistent-selector-style', {
 		 * Checks a class selector
 		 */
 		function checkClassSelector(node: SelectorClass): void {
+			if (whitelistedClasses.includes(node.value)) {
+				return;
+			}
 			const selection = classSelections.get(node.value) ?? [];
 			for (const styleValue of style) {
 				if (styleValue === 'class') {
@@ -194,6 +198,9 @@ export default createRule('consistent-selector-style', {
 					addToArrayMap(classSelections, className, node);
 				}
 				for (const attribute of node.startTag.attributes) {
+					if (attribute.type === 'SvelteDirective' && attribute.kind === 'Class') {
+						whitelistedClasses.push(attribute.key.name.name);
+					}
 					if (attribute.type !== 'SvelteAttribute' || attribute.key.name !== 'id') {
 						continue;
 					}

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/id-class-type/class01-input.svelte

@@ -8,6 +8,8 @@
 
 <b data-key="val">Text 2</b>
 
+<b class:conditional={true}>Text 3</b>
+
 <style>
   .link {
     color: red;
@@ -32,4 +34,8 @@
   .bold::before {
     color: red;
   }
+
+  .conditional {
+    color: red;
+  }
 </style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/id-type-class/class01-input.svelte

@@ -8,6 +8,8 @@
 
 <b data-key="val">Text 2</b>
 
+<b class:conditional={true}>Text 3</b>
+
 <style>
   .link {
     color: red;
@@ -32,4 +34,8 @@
   .bold::before {
     color: red;
   }
+
+  .conditional {
+    color: red;
+  }
 </style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type-class-id/class01-input.svelte

@@ -8,6 +8,8 @@
 
 <b data-key="val">Text 3</b>
 
+<b class:conditional={true}>Text 4</b>
+
 <style>
   .link {
     color: red;
@@ -32,4 +34,8 @@
   .bold::before {
     color: red;
   }
+
+  .conditional {
+    color: red;
+  }
 </style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type-id-class/class01-input.svelte

@@ -10,6 +10,12 @@
 
 <b data-key="val">Text 3</b>
 
+<b class:conditional={true}>Text 4</b>
+
+<b class="conditional-two">Text 5</b>
+
+<b class:conditional-two={true}>Text 6</b>
+
 <style>
   .link {
     color: red;
@@ -34,4 +40,12 @@
   .bold::before {
     color: red;
   }
+
+  .conditional {
+    color: red;
+  }
+
+  .conditional-two {
+    color: red;
+  }
 </style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type-id/class01-input.svelte

@@ -10,6 +10,8 @@
 
 <b data-key="val">Text 3</b>
 
+<b class:conditinal={true}>Text 4</b>
+
 <style>
   .link {
     color: red;
@@ -34,4 +36,8 @@
   .bold::before {
     color: red;
   }
+
+  .conditinal {
+    color: red;
+  }
 </style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type/class01-input.svelte

@@ -12,6 +12,8 @@
 
 <b data-key="val">Text 3</b>
 
+<b class:conditional={true}>Text 4</b>
+
 <style>
   .link {
     color: red;
@@ -41,4 +43,7 @@
     color: red;
   }
 
+  .conditional {
+    color: red;
+  }
 </style>