feat(consistent-selector-style): matching dynamic suffixes

Author: marekdedic

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

@@ -9,12 +9,16 @@ import type {
 import type { SvelteHTMLElement } from 'svelte-eslint-parser/lib/ast';
 import { findClassesInAttribute } from '../utils/ast-utils.js';
 import { getSourceCode } from '../utils/compat.js';
-import { extractExpressionPrefixLiteral } from '../utils/expression-affixes.js';
+import {
+	extractExpressionPrefixLiteral,
+	extractExpressionSuffixLiteral
+} from '../utils/expression-affixes.js';
 import { createRule } from '../utils/index.js';
 
 interface Selections {
 	exact: Map<string, AST.SvelteHTMLElement[]>;
-	prefixes: Map<string, AST.SvelteHTMLElement[]>;
+	// [prefix, suffix]
+	affixes: Map<[string | null, string | null], AST.SvelteHTMLElement[]>;
 	universalSelector: boolean;
 }
 
@@ -79,12 +83,12 @@ export default createRule('consistent-selector-style', {
 		} = {
 			class: {
 				exact: new Map(),
-				prefixes: new Map(),
+				affixes: new Map(),
 				universalSelector: false
 			},
 			id: {
 				exact: new Map(),
-				prefixes: new Map(),
+				affixes: new Map(),
 				universalSelector: false
 			},
 			type: new Map()
@@ -232,21 +236,23 @@ export default createRule('consistent-selector-style', {
 					for (const value of attribute.value) {
 						if (attribute.key.name === 'class' && value.type === 'SvelteMustacheTag') {
 							const prefix = extractExpressionPrefixLiteral(context, value.expression);
-							if (prefix !== null) {
-								addToArrayMap(selections.class.prefixes, prefix, node);
-							} else {
+							const suffix = extractExpressionSuffixLiteral(context, value.expression);
+							if (prefix === null && suffix === null) {
 								selections.class.universalSelector = true;
+							} else {
+								addToArrayMap(selections.class.affixes, [prefix, suffix], node);
 							}
 						}
 						if (attribute.key.name === 'id') {
 							if (value.type === 'SvelteLiteral') {
 								addToArrayMap(selections.id.exact, value.value, node);
 							} else if (value.type === 'SvelteMustacheTag') {
 								const prefix = extractExpressionPrefixLiteral(context, value.expression);
-								if (prefix !== null) {
-									addToArrayMap(selections.id.prefixes, prefix, node);
-								} else {
+								const suffix = extractExpressionSuffixLiteral(context, value.expression);
+								if (prefix === null && suffix === null) {
 									selections.id.universalSelector = true;
+								} else {
+									addToArrayMap(selections.id.affixes, [prefix, suffix], node);
 								}
 							}
 						}
@@ -270,9 +276,9 @@ export default createRule('consistent-selector-style', {
 /**
  * Helper function to add a value to a Map of arrays
  */
-function addToArrayMap(
-	map: Map<string, AST.SvelteHTMLElement[]>,
-	key: string,
+function addToArrayMap<T>(
+	map: Map<T, AST.SvelteHTMLElement[]>,
+	key: T,
 	value: AST.SvelteHTMLElement
 ): void {
 	map.set(key, (map.get(key) ?? []).concat(value));
@@ -283,8 +289,8 @@ function addToArrayMap(
  */
 function matchSelection(selections: Selections, key: string): SvelteHTMLElement[] {
 	const selection = selections.exact.get(key) ?? [];
-	selections.prefixes.forEach((nodes, prefix) => {
-		if (key.startsWith(prefix)) {
+	selections.affixes.forEach((nodes, [prefix, suffix]) => {
+		if ((prefix === null || key.startsWith(prefix)) && (suffix === null || key.endsWith(suffix))) {
 			selection.push(...nodes);
 		}
 	});

packages/eslint-plugin-svelte/src/utils/expression-affixes.ts

@@ -133,7 +133,7 @@ function extractTemplateLiteralPrefixLiteral(
 	for (const part of literalParts) {
 		if (part.type === 'TemplateElement') {
 			if (part.value.raw === '') {
-				// Skip empty quasi in the begining
+				// Skip empty quasi
 				continue;
 			}
 			return part.value.raw;
@@ -142,3 +142,68 @@ function extractTemplateLiteralPrefixLiteral(
 	}
 	return null;
 }
+
+// Literal suffix extraction
+
+export function extractExpressionSuffixLiteral(
+	context: RuleContext,
+	expression: SvelteLiteral | TSESTree.Node
+): string | null {
+	switch (expression.type) {
+		case 'BinaryExpression':
+			return extractBinaryExpressionSuffixLiteral(context, expression);
+		case 'Identifier':
+			return extractVariableSuffixLiteral(context, expression);
+		case 'Literal':
+			return typeof expression.value === 'string' ? expression.value : null;
+		case 'SvelteLiteral':
+			return expression.value;
+		case 'TemplateLiteral':
+			return extractTemplateLiteralSuffixLiteral(context, expression);
+		default:
+			return null;
+	}
+}
+
+function extractBinaryExpressionSuffixLiteral(
+	context: RuleContext,
+	expression: TSESTree.BinaryExpression
+): string | null {
+	return extractExpressionSuffixLiteral(context, expression.right);
+}
+
+function extractVariableSuffixLiteral(
+	context: RuleContext,
+	expression: TSESTree.Identifier
+): string | null {
+	const variable = findVariable(context, expression);
+	if (
+		variable === null ||
+		variable.identifiers.length !== 1 ||
+		variable.identifiers[0].parent.type !== 'VariableDeclarator' ||
+		variable.identifiers[0].parent.init === null
+	) {
+		return null;
+	}
+	return extractExpressionSuffixLiteral(context, variable.identifiers[0].parent.init);
+}
+
+function extractTemplateLiteralSuffixLiteral(
+	context: RuleContext,
+	expression: TSESTree.TemplateLiteral
+): string | null {
+	const literalParts = [...expression.expressions, ...expression.quasis].sort((a, b) =>
+		a.range[0] < b.range[0] ? -1 : 1
+	);
+	for (const part of literalParts.reverse()) {
+		if (part.type === 'TemplateElement') {
+			if (part.value.raw === '') {
+				// Skip empty quasi
+				continue;
+			}
+			return part.value.raw;
+		}
+		return extractExpressionSuffixLiteral(context, part);
+	}
+	return null;
+}

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

@@ -0,0 +1,34 @@
+<script>
+  import { value } from "package";
+
+  const derived = value + "-link-three";
+</script>
+
+<a>Click me!</a>
+
+<a class={value + "-link-one"}>Click me two!</a>
+
+<a class={value + "-link-one"}>Click me two!</a>
+
+<a class={`${value}-link-two`}>Click me three!</a>
+
+<a class={`${value}-link-two`}>Click me three!</a>
+
+
+<a class={derived}>Click me four!</a>
+
+<a class={derived}>Click me four!</a>
+
+<style>
+  .foo-link-one {
+    color: red;
+  }
+
+  .foo-link-two {
+    color: red;
+  }
+
+  .foo-link-three {
+    color: red;
+  }
+</style>

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

@@ -0,0 +1,27 @@
+<script>
+  import { value } from "package";
+
+  const derived = value + "-link-three";
+</script>
+
+<a>Click me!</a>
+
+<a id={value + "-link-one"}>Click me two!</a>
+
+<a id={`${value}-link-two`}>Click me three!</a>
+
+<a id={derived}>Click me four!</a>
+
+<style>
+  #foo-link-one {
+    color: red;
+  }
+
+  #foo-link-two {
+    color: red;
+  }
+
+  #foo-link-three {
+    color: red;
+  }
+</style>