feat: Support for Object syntax in custom callees beside classnames (francoismassart#185)

* feat: Classnames plugin handles key and value other way around
* fix: Formatting
* feat: Also added sorting orders test
* feat: Also added support for other rules

Co-authored-by: Francois Massart <francois.massart@gmail.com>

Author: dipsaus9

lib/rules/classnames-order.js

@@ -127,8 +127,10 @@ module.exports = {
             });
             return;
           case 'ObjectExpression':
+            const isUsedByClassNamesPlugin = node.callee && node.callee.name === 'classnames';
+
             arg.properties.forEach((prop) => {
-              sortNodeArgumentValue(node, prop.key);
+              sortNodeArgumentValue(node, isUsedByClassNamesPlugin ? prop.key : prop.value);
             });
             return;
           case 'Literal':

lib/rules/enforces-negative-arbitrary-values.js

@@ -102,8 +102,10 @@ module.exports = {
             });
             return;
           case 'ObjectExpression':
+            const isUsedByClassNamesPlugin = node.callee && node.callee.name === 'classnames';
+
             arg.properties.forEach((prop) => {
-              parseForNegativeArbitraryClassNames(node, prop.key);
+              parseForNegativeArbitraryClassNames(node, isUsedByClassNamesPlugin ? prop.key : prop.value);
             });
             return;
           case 'Literal':

lib/rules/enforces-shorthand.js

@@ -154,8 +154,10 @@ module.exports = {
             });
             return;
           case 'ObjectExpression':
+            const isUsedByClassNamesPlugin = node.callee && node.callee.name === 'classnames';
+
             arg.properties.forEach((prop) => {
-              parseForShorthandCandidates(node, prop.key);
+              parseForShorthandCandidates(node, isUsedByClassNamesPlugin ? prop.key : prop.value);
             });
             return;
           case 'Literal':

lib/rules/no-arbitrary-value.js

@@ -101,8 +101,10 @@ module.exports = {
             });
             return;
           case 'ObjectExpression':
+            const isUsedByClassNamesPlugin = node.callee && node.callee.name === 'classnames';
+
             arg.properties.forEach((prop) => {
-              parseForArbitraryValues(node, prop.key);
+              parseForArbitraryValues(node, isUsedByClassNamesPlugin ? prop.key : prop.value);
             });
             return;
           case 'Literal':

lib/util/ast.js

@@ -209,7 +209,15 @@ function parseNodeRecursive(node, arg, cb, skipConditional = false, isolate = fa
         return;
       case 'ObjectExpression':
         arg.properties.forEach((prop) => {
-          parseNodeRecursive(node, prop.key, cb, skipConditional, forceIsolation);
+          const isUsedByClassNamesPlugin = node.callee && node.callee.name === 'classnames';
+
+          parseNodeRecursive(
+            node,
+            isUsedByClassNamesPlugin ? prop.key : prop.value,
+            cb,
+            skipConditional,
+            forceIsolation
+          );
         });
         return;
       case 'Literal':

tests/lib/rules/classnames-order.js

@@ -507,6 +507,20 @@ ruleTester.run("classnames-order", rule, {
       ],
       errors: errors,
     },
+    {
+      code: `cva({
+          primary: ["absolute bottom-0 w-full h-[70px] flex flex-col"],
+        })`,
+      output: `cva({
+          primary: ["absolute bottom-0 flex h-[70px] w-full flex-col"],
+        })`,
+      options: [
+        {
+          callees: ["cva"],
+        },
+      ],
+      errors: errors,
+    },
     {
       code: `<div className={clsx(\`absolute bottom-0 w-full h-[270px] flex flex-col\`)}>clsx</div>`,
       output: `<div className={clsx(\`absolute bottom-0 flex h-[270px] w-full flex-col\`)}>clsx</div>`,

tests/lib/rules/enforces-shorthand.js

@@ -491,5 +491,19 @@ ruleTester.run("shorthands", rule, {
       `,
       errors: [generateError(["p-2", "pl-2", "pr-2"], "p-2")],
     },
+    {
+      code: `cva({
+          primary: ["border-l-0 border-r-0"],
+        });`,
+      output: `cva({
+          primary: ["border-x-0"],
+        });`,
+      options: [
+        {
+          callees: ["cva"],
+        },
+      ],
+      errors: [generateError(["border-l-0", "border-r-0"], "border-x-0")],
+    },
   ],
 });

tests/lib/rules/no-arbitrary-value.js

@@ -93,16 +93,11 @@ ruleTester.run("no-arbitrary-value", rule, {
     {
       code: `
       <nav
-        className={cns("flex relative flex-row rounded-lg select-none", {
+        className={classnames("flex relative flex-row rounded-lg select-none", {
           "bg-gray-200 p-1": !size,
           "bg-gray-100 p-[3px]": size === "sm",
         })}
       />`,
-      options: [
-        {
-          callees: ["cns"],
-        },
-      ],
       errors: generateErrors("p-[3px]"),
     },
     {
@@ -116,6 +111,18 @@ ruleTester.run("no-arbitrary-value", rule, {
       );`,
       errors: generateErrors("text-[length:var(--font-size)] rounded-[2em] p-[4vw] leading-[1]"),
     },
+    {
+      code: `
+      cva({
+        primary: ["[mask-type:luminance] container flex bg-[rgba(10,20,30,0.5)] w-12 sm:w-6 lg:w-4"],
+      });`,
+      options: [
+        {
+          callees: ["cva"],
+        },
+      ],
+      errors: generateErrors("[mask-type:luminance] bg-[rgba(10,20,30,0.5)]"),
+    },
     {
       code: `<div className={ctl('w-[10px]')}>Skip class attribute</div>`,
       options: skipClassAttributeOptions,

tests/lib/rules/no-contradicting-classname.js

@@ -618,6 +618,18 @@ ruleTester.run("no-contradicting-classname", rule, {
       </div>`,
       errors: generateErrors("-outline-offset-2 outline-offset-4"),
     },
+    {
+      code: `
+      cva({
+        primary: ["px-2 px-4"],
+      });`,
+      options: [
+        {
+          callees: ["cva"],
+        },
+      ],
+      errors: generateErrors(["px-2 px-4"]),
+    },
     {
       code: `
       <div className={\`stroke-white stroke-none \${ctl('-outline-offset-2 outline-offset-4')}\`}>

tests/lib/rules/no-custom-classname.js

@@ -785,7 +785,7 @@ ruleTester.run("no-custom-classname", rule, {
     {
       code: `
       <div class="grid-flow-dense mix-blend-plus-lighter border-separate border-spacing-4">
-      grid-flow-dense, mix-blend-plus-lighter	
+      grid-flow-dense, mix-blend-plus-lighter
       </div>`,
     },
     {
@@ -820,6 +820,35 @@ ruleTester.run("no-custom-classname", rule, {
         },
       ],
     },
+    {
+      code: `
+        cva({
+          variants: {
+            variant: {
+              primary: ["sm:w-6 w-8 container w-12 flex lg:w-4"],
+              primary: ["sm:w-6 w-8 container w-12 flex lg:w-4"],
+            },
+          },
+      });
+      `,
+      options: [
+        {
+          callees: ["cva"],
+        },
+      ],
+    },
+    {
+      code: `
+        cva({
+          primary: ["sm:w-6 w-8 container w-12 flex lg:w-4"],
+        });
+      `,
+      options: [
+        {
+          callees: ["cva"],
+        },
+      ],
+    },
   ],
 
   invalid: [
@@ -1088,5 +1117,36 @@ ruleTester.run("no-custom-classname", rule, {
       ],
       errors: generateErrors("bg-404 lg:text-unknown text-color-not-found"),
     },
+    {
+      code: `
+        cva({
+          variants: {
+            variant: {
+              primary: ["sm:w-6 w-8 container w-12 flex lg:w-4 hello"],
+              primary: ["sm:w-6 w-8 container w-12 flex lg:w-4 world"],
+            },
+          },
+      });
+      `,
+      options: [
+        {
+          callees: ["cva"],
+        },
+      ],
+      errors: generateErrors("hello world"),
+    },
+    {
+      code: `
+        cva({
+          primary: ["sm:w-6 w-8 container w-12 flex lg:w-4 hello"],
+        });
+      `,
+      options: [
+        {
+          callees: ["cva"],
+        },
+      ],
+      errors: generateErrors("hello"),
+    },
   ],
 });