feat(no-unused-class-name): support regex for allowedClassNames option (#1257)

Author: tbashiyy

.changeset/forty-signs-smoke.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat(no-unused-class-name): support regex for `allowedClassNames` option

docs/rules/no-unused-class-name.md

@@ -53,7 +53,7 @@ This rule is aimed at reducing unused classes in the HTML template. While `svelt
   "svelte/no-unused-class-name": [
     "error",
     {
-      "allowedClassNames": ["class-name-one", "class-name-two"]
+      "allowedClassNames": ["class-name-one", "class-name-two", "/^regex-.*$/"] // You can also use regex to match class names
     }
   ]
 }

packages/eslint-plugin-svelte/src/rules/no-unused-class-name.ts

@@ -4,6 +4,7 @@ import type { AnyNode } from 'postcss';
 import type { Node as SelectorNode } from 'postcss-selector-parser';
 import { findClassesInAttribute } from '../utils/ast-utils.js';
 import type { SourceCode } from '../types.js';
+import { toRegExp } from '../utils/regexp.js';
 
 export default createRule('no-unused-class-name', {
 	meta: {
@@ -57,7 +58,12 @@ export default createRule('no-unused-class-name', {
 						? findClassesInPostCSSNode(styleContext.sourceAst, sourceCode.parserServices)
 						: [];
 				for (const className in classesUsedInTemplate) {
-					if (!allowedClassNames.includes(className) && !classesUsedInStyle.includes(className)) {
+					if (
+						!allowedClassNames.some((allowedClassName: string) =>
+							toRegExp(allowedClassName).test(className)
+						) &&
+						!classesUsedInStyle.includes(className)
+					) {
 						context.report({
 							loc: classesUsedInTemplate[className],
 							message: `Unused class "${className}".`

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json

@@ -1,3 +1,3 @@
 {
-	"options": [{ "allowedClassNames": ["div-class"] }]
+	"options": [{ "allowedClassNames": ["div-class", "/^p-\\d{1,2}$/"] }]
 }

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-errors.yaml

@@ -2,3 +2,7 @@
   line: 3
   column: 1
   suggestions: null
+- message: Unused class "p-100".
+  line: 5
+  column: 1
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-input.svelte

@@ -1,3 +1,5 @@
 <div class="div-class">Hello</div>
 
 <span class="span-class">World!</span>
+
+<span class="p-100">Regex!</span>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json

@@ -1,3 +1,3 @@
 {
-	"options": [{ "allowedClassNames": ["div-class", "span-class"] }]
+	"options": [{ "allowedClassNames": ["div-class", "span-class", "/^p-\\d{1,2}$/"] }]
 }

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/allowed-class-name01-input.svelte

@@ -1,3 +1,5 @@
 <div class="div-class">Hello</div>
 
 <span class="span-class">World!</span>
+
+<span class="p-2">Regex!</span>