feat: add lint fixes and suggestions

Author: jesperjohansson

example/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:@jespers/css-modules/recommended"]
+}

example/foo.module.css

@@ -0,0 +1,19 @@
+.bar {
+  color: red;
+}
+
+.baz {
+  color: green;
+}
+
+.biz {
+  color: blue;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}

example/foo.ts

@@ -0,0 +1,6 @@
+/* eslint @jespers/css-modules/no-unused-classes: [2, { markAsUsed: ['baz', 'biz', 'block', 'flex'] }] */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import styles from "./foo.module.css";
+
+console.log(styles.bar);

example/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "paths": {
+      "@jesper/eslint-plugin-css-modules": ["../"]
+    }
+  }
+}

package.json

@@ -29,6 +29,7 @@
   "scripts": {
     "build": "tsc",
     "test": "jest",
+    "postinstall": "yarn link && yarn link \"@jespers/eslint-plugin-css-modules\"",
     "release": "tsc && release-it"
   },
   "dependencies": {

src/configs/recommended/recommended.ts

@@ -1,10 +1,14 @@
-const recommended = {
+import { TSESLint } from "@typescript-eslint/utils";
+
+const recommended: TSESLint.CLIEngine.Options = {
   parser: "@typescript-eslint/parser",
   parserOptions: {
     sourceType: "module",
+    extraFileExtensions: [".css"],
   },
+  plugins: ["@jespers/css-modules"],
   rules: {
-    "css-modules/no-unused-classes": "error",
+    "@jespers/css-modules/no-unused-classes": "error",
   },
 };
 

src/rules/no-unused-classes/no-unused-classes.spec.ts

@@ -44,35 +44,35 @@ ruleTester.run("no-unused-classes", noUnusedClasses, {
   invalid: [
     {
       code: 'import styles from "./component01.module.css";',
-      errors: [{ messageId: "unusedCssClass" }],
+      errors: [{ messageId: "unusedCssClasses" }],
     },
     {
       code: `
         import styles from "./component01.module.css";
 
         const unused = styles;
       `,
-      errors: [{ messageId: "unusedCssClass" }],
+      errors: [{ messageId: "unusedCssClasses" }],
     },
     {
       code: 'import styles from "./folder/component02.module.css";',
-      errors: [{ messageId: "unusedCssClass" }],
+      errors: [{ messageId: "unusedCssClasses" }],
     },
     {
       code: `
         import styles from "./folder/component02.module.css";
 
         const unused = styles;
       `,
-      errors: [{ messageId: "unusedCssClass" }],
+      errors: [{ messageId: "unusedCssClasses" }],
     },
     {
       code: `
         import styles from "./component03.module.css";
 
         const used = styles['main'];
       `,
-      errors: [{ messageId: "unusedCssClass" }],
+      errors: [{ messageId: "unusedCssClasses" }],
     },
   ],
 });

src/rules/no-unused-classes/no-unused-classes.ts

@@ -95,6 +95,23 @@ function getMarkAsUsedOption(options: unknown): Set<string> {
   return markAsUsedClassNames;
 }
 
+function getPrettyUnusedClassNames(unusedClassNames: string[]): string {
+  const base = unusedClassNames
+    .slice(0, 3)
+    .map((className) => `'${className}'`)
+    .join(", ");
+
+  if (unusedClassNames.length <= 3) {
+    return base;
+  }
+
+  return `${base}... (+${Math.max(0, unusedClassNames.length - 3)} more)`;
+}
+
+function getFixPayloadClassNames(unusedClassNames: string[]): string {
+  return unusedClassNames.map((className) => `'${className}'`).join(", ");
+}
+
 const rule = createRule({
   name: "no-unused-classes",
   defaultOptions: [
@@ -117,28 +134,28 @@ const rule = createRule({
     docs: {
       description: "Check for any unused classes in imported CSS modules",
       recommended: "error",
+      suggestion: true,
     },
     messages: {
-      unusedCssClass:
-        "Unused CSS class '{{ className }}' in '{{ cssFilePath }}'",
+      unusedCssClasses:
+        "Unused CSS classes {{ classNames }} in '{{ cssFilePath }}'",
+      markAsUsed: "Mark {{ classNames }} as used",
     },
+    hasSuggestions: true,
+    fixable: "code",
   },
   create(context) {
     type SourceFilePath = string;
-    type ClassName = string;
 
     const files: Map<
       SourceFilePath,
       {
         availableClassNames: Set<string>;
         usedClassNames: Set<string>;
-        meta?: Map<
-          ClassName,
-          {
-            importNode: TSESTree.ImportDeclaration;
-            cssFilePath: string;
-          }
-        >;
+        meta?: {
+          importNode: TSESTree.ImportDeclaration;
+          cssFilePath: string;
+        };
       }
     > = new Map();
 
@@ -166,7 +183,11 @@ const rule = createRule({
             if (classNames.size > 0) {
               const file = files.get(sourceFilePath);
 
-              const meta = file?.meta ?? new Map();
+              const meta = file?.meta ?? {
+                importNode: node,
+                cssFilePath,
+              };
+
               const availableClassNames =
                 file?.availableClassNames ?? new Set();
 
@@ -182,12 +203,6 @@ const rule = createRule({
               classNames.forEach((className) => {
                 // Add the class to available classes
                 availableClassNames.add(className);
-
-                // Save the AST node and CSS file path for ESLint error use
-                meta.set(className, {
-                  importNode: node,
-                  cssFilePath,
-                });
               });
             }
           }
@@ -238,22 +253,38 @@ const rule = createRule({
               !markAsUsedClassNames.has(className)
           );
 
-          // Iterate over the unused class names and create an error report for each of them
-          unusedClassNames.forEach((className) => {
-            const { importNode, cssFilePath } = meta?.get(className) ?? {};
+          if (unusedClassNames.length > 0) {
+            const { importNode, cssFilePath } = meta ?? {};
+
+            if (importNode && cssFilePath) {
+              const prettyClassNames: string =
+                getPrettyUnusedClassNames(unusedClassNames);
+              const fixPayloadClassNames: string =
+                getFixPayloadClassNames(unusedClassNames);
 
-            if (importNode) {
               context.report({
                 node: importNode, // The AST node
-                messageId: "unusedCssClass", // The error message ID
+                messageId: "unusedCssClasses", // The error message ID
                 // Used for string interpolation in the error message
                 data: {
-                  className, // The unused CSS class name
+                  classNames: prettyClassNames, // The unused CSS class name
                   cssFilePath, // The CSS file path
                 },
+                suggest: [
+                  {
+                    fix: (val) => {
+                      return val.insertTextBeforeRange(
+                        importNode.range,
+                        `/* eslint @jespers/css-modules/no-unused-classes: [2, { markAsUsed: [${fixPayloadClassNames}] }] */\n`
+                      );
+                    },
+                    messageId: "markAsUsed",
+                    data: { classNames: fixPayloadClassNames },
+                  },
+                ],
               });
             }
-          });
+          }
         });
       },
     };

tsconfig.json

@@ -14,5 +14,5 @@
     "skipDefaultLibCheck": true,
     "moduleResolution": "nodenext"
   },
-  "exclude": ["dist", "src/fixtures"]
+  "exclude": ["dist", "src/fixtures", "example"]
 }