feat(no-unused-class-name): added a whitelist option (#520)

Author: marekdedic

.changeset/beige-jobs-travel.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat(no-unused-class-name): added an option to allow some specific class names

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

@@ -52,7 +52,18 @@ This rule is aimed at reducing unused classes in the HTML template. While `svelt
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "svelte/no-unused-class-name": [
+    "error",
+    {
+      "allowedClassNames": ["class-name-one", "class-name-two"]
+    }
+  ]
+}
+```
+
+- `allowedClassNames` ... A list of class names that shouldn't be reported by this rule. Default `[]`.
 
 ## :rocket: Version
 

src/rules/no-unused-class-name.ts

@@ -22,14 +22,28 @@ export default createRule("no-unused-class-name", {
       category: "Best Practices",
       recommended: false,
     },
-    schema: [],
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allowedClassNames: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
     messages: {},
     type: "suggestion",
   },
   create(context) {
     if (!context.parserServices.isSvelte) {
       return {}
     }
+    const allowedClassNames = context.options[0]?.allowedClassNames ?? []
     const classesUsedInTemplate: Record<string, SourceLocation> = {}
 
     return {
@@ -52,7 +66,10 @@ export default createRule("no-unused-class-name", {
             ? findClassesInPostCSSNode(styleContext.sourceAst)
             : []
         for (const className in classesUsedInTemplate) {
-          if (!classesUsedInStyle.includes(className)) {
+          if (
+            !allowedClassNames.includes(className) &&
+            !classesUsedInStyle.includes(className)
+          ) {
             context.report({
               loc: classesUsedInTemplate[className],
               message: `Unused class "${className}".`,

tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "allowedClassNames": ["div-class"] }]
+}

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

@@ -0,0 +1,4 @@
+- message: Unused class "span-class".
+  line: 3
+  column: 1
+  suggestions: null

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

@@ -0,0 +1,3 @@
+<div class="div-class">Hello</div>
+
+<span class="span-class">World!</span>

tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "allowedClassNames": ["div-class", "span-class"] }]
+}

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

@@ -0,0 +1,3 @@
+<div class="div-class">Hello</div>
+
+<span class="span-class">World!</span>