fix to pass test

fsubal · Jan 10, 2023 · 49c6961 · 49c6961
1 parent 51835a5
commit 49c6961
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 69 deletions.
diff --git a/lib/rules/one-by-one-arguments.js b/lib/rules/one-by-one-arguments.js
@@ -22,6 +22,7 @@ const meta = {
   messages: {
     splitArguments:
       "An argument of {{ functionName }}() has multiple classes. Should be written one by one.",
+    suggestion: 'Convert to {{ functionName }}("...", "...", ...) properly'
   },
 
   schema: [
@@ -99,65 +100,70 @@ const rule = {
      * @param {import('estree').CallExpression} node
      */
     function handleViolated(node) {
+      /**
+       * @param {import('eslint').Rule.RuleFixer} fixer
+       * @returns {import('eslint').Rule.Fix[]}
+       */
+      function fix(fixer) {
+       /**
+        * @param {import("estree").Node | import("eslint").AST.Token} node
+        * @returns {import("eslint").Rule.Fix | import("eslint").Rule.Fix[]}
+        */
+       function toMultiString(node, wrapAsArray = false) {
+         if (node.type === "ArrayExpression") {
+           return node.elements.flatMap((e) => toMultiString(e));
+         }
+
+         if (node.type === "LogicalExpression") {
+           return toMultiString(node.right, shouldWrapAsArray(node.right));
+         }
+
+         if (node.type === "ConditionalExpression") {
+           return [
+             toMultiString(
+               node.consequent,
+               shouldWrapAsArray(node.consequent)
+             ),
+             toMultiString(
+               node.alternate,
+               shouldWrapAsArray(node.alternate)
+             ),
+           ].flat();
+         }
+
+         if (node.type !== "Literal") {
+           return [];
+         }
+
+         if (typeof node.value !== "string") {
+           return [];
+         }
+
+         const classes = getClasses(node.value).map((className) =>
+           JSON.stringify(className)
+         );
+
+         return fixer.replaceText(
+           node,
+           wrapAsArray && classes.length > 1
+             ? `[${classes.join(", ")}]`
+             : classes.join(", ")
+         );
+       }
+
+       return node.arguments.flatMap((a) => toMultiString(a));
+     }
+
       context.report({
         node,
         messageId: "splitArguments",
         data: {
           functionName,
         },
-
-        /**
-         * @returns {import("eslint").Rule.Fix[]}
-         */
-        fix(fixer) {
-          /**
-           * @param {import("estree").Node | import("eslint").AST.Token} node
-           * @returns {import("eslint").Rule.Fix | import("eslint").Rule.Fix[]}
-           */
-          function toMultiString(node, wrapAsArray = false) {
-            if (node.type === "ArrayExpression") {
-              return node.elements.flatMap((e) => toMultiString(e));
-            }
-
-            if (node.type === "LogicalExpression") {
-              return toMultiString(node.right, shouldWrapAsArray(node.right));
-            }
-
-            if (node.type === "ConditionalExpression") {
-              return [
-                toMultiString(
-                  node.consequent,
-                  shouldWrapAsArray(node.consequent)
-                ),
-                toMultiString(
-                  node.alternate,
-                  shouldWrapAsArray(node.alternate)
-                ),
-              ].flat();
-            }
-
-            if (node.type !== "Literal") {
-              return [];
-            }
-
-            if (typeof node.value !== "string") {
-              return [];
-            }
-
-            const classes = getClasses(node.value).map((className) =>
-              JSON.stringify(className)
-            );
-
-            return fixer.replaceText(
-              node,
-              wrapAsArray && classes.length > 1
-                ? `[${classes.join(", ")}]`
-                : classes.join(", ")
-            );
-          }
-
-          return node.arguments.flatMap((a) => toMultiString(a));
-        },
+        suggest: [
+          { messageId: "suggestion", data: { functionName }, fix }
+        ],
+        fix,
       });
     }
   },

diff --git a/lib/rules/prefer-classnames-function.js b/lib/rules/prefer-classnames-function.js
@@ -23,6 +23,8 @@ const meta = {
       "The className has more than {{ maxSpaceSeparatedClasses }} classes. Use {{ functionName }}() instead.",
     avoidFunction:
       "Do not use {{ functionName }}() when you have no greater than {{ maxSpaceSeparatedClasses }} classes.",
+    suggestToUse: 'Convert to {{ functionName }}("...", "...", ...) properly',
+    suggestToAvoid: 'Just use className="..."'
   },
 
   schema: [
@@ -140,6 +142,20 @@ const rule = {
         return;
       }
 
+      /**
+       * @param {import('eslint').Rule.RuleFixer} fixer
+       * @returns {import('eslint').Rule.Fix}
+       */
+      function fix(fixer) {
+        return fixer.replaceText(
+          // @ts-expect-error
+          node,
+          `className={${functionName}(${classes
+            .map((className) => JSON.stringify(className))
+            .join(", ")})}`
+        );
+      }
+
       context.report({
         // @ts-expect-error
         node,
@@ -148,15 +164,10 @@ const rule = {
           maxSpaceSeparatedClasses,
           functionName,
         },
-        fix(fixer) {
-          return fixer.replaceText(
-            // @ts-expect-error
-            node,
-            `className={${functionName}(${classes
-              .map((className) => JSON.stringify(className))
-              .join(", ")})}`
-          );
-        },
+        suggest: [
+          { messageId: 'suggestToUse', data: { functionName }, fix }
+        ],
+        fix,
       });
     }
 
@@ -165,6 +176,18 @@ const rule = {
      * @param {string[]} classes
      */
     function suggestToAvoidFunction(node, classes) {
+      /**
+       * @param {import('eslint').Rule.RuleFixer} fixer
+       * @returns {import('eslint').Rule.Fix}
+       */
+      function fix(fixer) {
+        return fixer.replaceText(
+          // @ts-expect-error
+          node,
+          `className="${classes.join(" ")}"`
+        );
+      }
+
       context.report({
         // @ts-expect-error
         node,
@@ -173,13 +196,10 @@ const rule = {
           maxSpaceSeparatedClasses,
           functionName,
         },
-        fix(fixer) {
-          return fixer.replaceText(
-            // @ts-expect-error
-            node,
-            `className="${classes.join(" ")}"`
-          );
-        },
+        suggest: [
+          { messageId: 'suggestToAvoid', data: { functionName }, fix }
+        ],
+        fix
       });
     }
   },

diff --git a/tests/lib/rules/one-by-one-arguments.js b/tests/lib/rules/one-by-one-arguments.js
@@ -96,6 +96,16 @@ ruleTester.run("one-by-one-arguments", rule, {
           ],
         },
       ],
+      output: `
+<button
+  className={classNames(
+    "bg-blue-300", "block",
+    "relative",
+    "text-white", "hover:text-grey-100"
+  )}
+>
+  Hello
+</button>;`,
     },
 
     {
@@ -129,6 +139,15 @@ ruleTester.run("one-by-one-arguments", rule, {
           ],
         },
       ],
+      output: `
+<button
+  className={classNames("bg-blue-300", "block", foo && [
+    "relative",
+    "text-white", "hover:text-grey-100",
+  ])}
+>
+  Hello
+</button>;`,
     },
 
     {
@@ -152,6 +171,10 @@ ruleTester.run("one-by-one-arguments", rule, {
           ],
         },
       ],
+      output: `
+<button className={classNames("bg-blue-300", "block", style.someClass)}>
+  Hello
+</button>;`,
     },
 
     {
@@ -191,6 +214,16 @@ ruleTester.run("one-by-one-arguments", rule, {
           ],
         },
       ],
+      output: `
+<button
+  className={clsx(
+    "bg-blue-300", "block",
+    "relative",
+    foo ? ["text-white", "hover:text-grey-100"] : "text-black"
+  )}
+>
+  Hello
+</button>;`
     },
   ],
 });
diff --git a/tests/lib/rules/prefer-classnames-function.js b/tests/lib/rules/prefer-classnames-function.js
@@ -88,6 +88,8 @@ ruleTester.run("prefer-classnames-function", rule, {
           ],
         },
       ],
+      output:
+        '<button className={className("bg-blue-300", "block")}>Hello</button>;',
     },
 
     {
@@ -110,6 +112,8 @@ ruleTester.run("prefer-classnames-function", rule, {
           ],
         },
       ],
+      output:
+        '<button className={clsx("bg-blue-300", "block")}>Hello</button>;',
     },
 
     {
@@ -132,6 +136,8 @@ ruleTester.run("prefer-classnames-function", rule, {
           ],
         },
       ],
+      output:
+        '<button className={classNames("bg-blue-300", "block", "relative")}>Hello</button>;',
     },
 
     // avoid className
@@ -150,6 +156,7 @@ ruleTester.run("prefer-classnames-function", rule, {
           ],
         },
       ],
+      output: '<button className="bg-blue-300">Hello</button>;',
     },
 
     {
@@ -173,6 +180,7 @@ ruleTester.run("prefer-classnames-function", rule, {
           ],
         },
       ],
+      output: '<button className="bg-blue-300 text-white">Hello</button>;',
     },
 
     // using template literal
@@ -192,6 +200,7 @@ ruleTester.run("prefer-classnames-function", rule, {
           ],
         },
       ],
+      output: '<button className={classNames("bg-blue-300", "block")}>Hello</button>;',
     },
   ],
 });