feat(consistent-selector-style): matching dynamic class name prefixes

Author: marekdedic

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

@@ -6,10 +6,17 @@ import type {
 	Node as SelectorNode,
 	Tag as SelectorTag
 } from 'postcss-selector-parser';
+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 { createRule } from '../utils/index.js';
 
+interface Selections {
+	exact: Map<string, AST.SvelteHTMLElement[]>;
+	prefixes: Map<string, AST.SvelteHTMLElement[]>;
+}
+
 export default createRule('consistent-selector-style', {
 	meta: {
 		docs: {
@@ -65,11 +72,14 @@ export default createRule('consistent-selector-style', {
 		const whitelistedClasses: string[] = [];
 
 		const selections: {
-			class: Map<string, AST.SvelteHTMLElement[]>;
+			class: Selections;
 			id: Map<string, AST.SvelteHTMLElement[]>;
 			type: Map<string, AST.SvelteHTMLElement[]>;
 		} = {
-			class: new Map(),
+			class: {
+				exact: new Map(),
+				prefixes: new Map()
+			},
 			id: new Map(),
 			type: new Map()
 		};
@@ -120,7 +130,7 @@ export default createRule('consistent-selector-style', {
 			if (whitelistedClasses.includes(node.value)) {
 				return;
 			}
-			const selection = selections.class.get(node.value) ?? [];
+			const selection = matchSelection(selections.class, node.value);
 			for (const styleValue of style) {
 				if (styleValue === 'class') {
 					return;
@@ -200,19 +210,24 @@ export default createRule('consistent-selector-style', {
 					return;
 				}
 				addToArrayMap(selections.type, node.name.name, node);
-				const classes = node.startTag.attributes.flatMap(findClassesInAttribute);
-				for (const className of classes) {
-					addToArrayMap(selections.class, 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') {
+					for (const className of findClassesInAttribute(attribute)) {
+						addToArrayMap(selections.class.exact, className, node);
+					}
+					if (attribute.type !== 'SvelteAttribute') {
 						continue;
 					}
 					for (const value of attribute.value) {
-						if (value.type === 'SvelteLiteral') {
+						if (attribute.key.name === 'class' && value.type === 'SvelteMustacheTag') {
+							const prefix = extractExpressionPrefixLiteral(context, value.expression);
+							if (prefix !== null) {
+								addToArrayMap(selections.class.prefixes, prefix, node);
+							}
+						}
+						if (attribute.key.name === 'id' && value.type === 'SvelteLiteral') {
 							addToArrayMap(selections.id, value.value, node);
 						}
 					}
@@ -243,6 +258,19 @@ function addToArrayMap(
 	map.set(key, (map.get(key) ?? []).concat(value));
 }
 
+/**
+ * Finds all nodes in selections that could be matched by key
+ */
+function matchSelection(selections: Selections, key: string): SvelteHTMLElement[] {
+	const selection = selections.exact.get(key) ?? [];
+	selections.prefixes.forEach((nodes, prefix) => {
+		if (key.startsWith(prefix)) {
+			selection.push(...nodes);
+		}
+	});
+	return selection;
+}
+
 /**
  * Checks whether a given selection could be obtained using an ID selector
  */

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

@@ -1,6 +1,7 @@
 import type { TSESTree } from '@typescript-eslint/types';
 import { findVariable } from './ast-utils.js';
 import type { RuleContext } from '../types.js';
+import type { SvelteLiteral } from 'svelte-eslint-parser/lib/ast';
 
 // Variable prefix extraction
 
@@ -74,3 +75,70 @@ function extractTemplateLiteralPrefixVariable(
 	}
 	return null;
 }
+
+// Literal prefix extraction
+
+export function extractExpressionPrefixLiteral(
+	context: RuleContext,
+	expression: SvelteLiteral | TSESTree.Node
+): string | null {
+	switch (expression.type) {
+		case 'BinaryExpression':
+			return extractBinaryExpressionPrefixLiteral(context, expression);
+		case 'Identifier':
+			return extractVariablePrefixLiteral(context, expression);
+		case 'Literal':
+			return typeof expression.value === 'string' ? expression.value : null;
+		case 'SvelteLiteral':
+			return expression.value;
+		case 'TemplateLiteral':
+			return extractTemplateLiteralPrefixLiteral(context, expression);
+		default:
+			return null;
+	}
+}
+
+function extractBinaryExpressionPrefixLiteral(
+	context: RuleContext,
+	expression: TSESTree.BinaryExpression
+): string | null {
+	return expression.left.type !== 'PrivateIdentifier'
+		? extractExpressionPrefixLiteral(context, expression.left)
+		: null;
+}
+
+function extractVariablePrefixLiteral(
+	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 extractExpressionPrefixLiteral(context, variable.identifiers[0].parent.init);
+}
+
+function extractTemplateLiteralPrefixLiteral(
+	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) {
+		if (part.type === 'TemplateElement') {
+			if (part.value.raw === '') {
+				// Skip empty quasi in the begining
+				continue;
+			}
+			return part.value.raw;
+		}
+		return extractExpressionPrefixLiteral(context, part);
+	}
+	return null;
+}

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

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