feat(no-unused-class-name): Support Regex for allowedClassNames option

.changeset/fast-bottles-allow.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': patch
+---
+
+feat: support regex for allowedClassNames of no-unused-class-name rule

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

@@ -57,7 +57,18 @@ 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.includes(className) &&
+						!allowedClassNames.some((allowedClassName: string) => {
+							const regex = /^\/(.*)\/$/.exec(allowedClassName);
+							if (regex == null || regex[1] == null) {
+								return false;
+							}
+
+							return new RegExp(regex[1]).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>