feat: add ignoredKeys in settings (francoismassart#232)

francoismassart · web-flow · commit 386186eeae99 · 2023-04-05T15:32:03.000+02:00
* feat: add `ignoredKeys` in settings
* chore: cleaning debug console call
* 3.11.0-beta.0
* chore: add `tv` in default `callees`
diff --git a/docs/rules/classnames-order.md b/docs/rules/classnames-order.md
@@ -32,12 +32,19 @@ Examples of **correct** code for this rule:
 ...
 ```
 
-### `callees` (default: `["classnames", "clsx", "ctl"]`)
+### `callees` (default: `["classnames", "clsx", "ctl", "cva", "tv"]`)
 
 If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule.
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+
+Using libraries like `cva`, some of its object keys are not meant to contain classnames in its value(s).
+You can specify which key(s) won't be parsed by the plugin using this setting.
+For example, `cva` has `compoundVariants` and `defaultVariants`.
+NB: As `compoundVariants` can have classnames inside its `class` property, you can also use a callee to make sure this inner part gets parsed while its parent is ignored.
+
 ### `config` (default: `"tailwind.config.js"`)
 
 By default the plugin will try to load the file `tailwind.config.js` at the root of your project.
diff --git a/docs/rules/enforces-negative-arbitrary-values.md b/docs/rules/enforces-negative-arbitrary-values.md
@@ -50,12 +50,19 @@ Examples of **correct** code for this rule:
 ...
 ```
 
-### `callees` (default: `["classnames", "clsx", "ctl"]`)
+### `callees` (default: `["classnames", "clsx", "ctl", "cva", "tv"]`)
 
 If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule.
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+
+Using libraries like `cva`, some of its object keys are not meant to contain classnames in its value(s).
+You can specify which key(s) won't be parsed by the plugin using this setting.
+For example, `cva` has `compoundVariants` and `defaultVariants`.
+NB: As `compoundVariants` can have classnames inside its `class` property, you can also use a callee to make sure this inner part gets parsed while its parent is ignored.
+
 ### `config` (default: `"tailwind.config.js"`)
 
 By default the plugin will try to load the file `tailwind.config.js` at the root of your project.
diff --git a/docs/rules/enforces-shorthand.md b/docs/rules/enforces-shorthand.md
@@ -42,12 +42,19 @@ If indeed, you are using the `classnames-order` rule, then it'll be automaticall
 ...
 ```
 
-### `callees` (default: `["classnames", "clsx", "ctl"]`)
+### `callees` (default: `["classnames", "clsx", "ctl", "cva", "tv"]`)
 
 If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule.
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+
+Using libraries like `cva`, some of its object keys are not meant to contain classnames in its value(s).
+You can specify which key(s) won't be parsed by the plugin using this setting.
+For example, `cva` has `compoundVariants` and `defaultVariants`.
+NB: As `compoundVariants` can have classnames inside its `class` property, you can also use a callee to make sure this inner part gets parsed while its parent is ignored.
+
 ### `config` (default: `"tailwind.config.js"`)
 
 By default the plugin will try to load the file `tailwind.config.js` at the root of your project.
diff --git a/docs/rules/migration-from-tailwind-2.md b/docs/rules/migration-from-tailwind-2.md
@@ -87,12 +87,19 @@ This rule will report the issue but **it will not fix it for you**...
 ...
 ```
 
-### `callees` (default: `["classnames", "clsx", "ctl"]`)
+### `callees` (default: `["classnames", "clsx", "ctl", "cva", "tv"]`)
 
 If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule.
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+
+Using libraries like `cva`, some of its object keys are not meant to contain classnames in its value(s).
+You can specify which key(s) won't be parsed by the plugin using this setting.
+For example, `cva` has `compoundVariants` and `defaultVariants`.
+NB: As `compoundVariants` can have classnames inside its `class` property, you can also use a callee to make sure this inner part gets parsed while its parent is ignored.
+
 ### `config` (default: `"tailwind.config.js"`)
 
 By default the plugin will try to load the file `tailwind.config.js` at the root of your project.
diff --git a/docs/rules/no-arbitrary-value.md b/docs/rules/no-arbitrary-value.md
@@ -32,12 +32,19 @@ Examples of **correct** code for this rule:
 ...
 ```
 
-### `callees` (default: `["classnames", "clsx", "ctl"]`)
+### `callees` (default: `["classnames", "clsx", "ctl", "cva", "tv"]`)
 
 If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule.
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+
+Using libraries like `cva`, some of its object keys are not meant to contain classnames in its value(s).
+You can specify which key(s) won't be parsed by the plugin using this setting.
+For example, `cva` has `compoundVariants` and `defaultVariants`.
+NB: As `compoundVariants` can have classnames inside its `class` property, you can also use a callee to make sure this inner part gets parsed while its parent is ignored.
+
 ### `config` (default: `"tailwind.config.js"`)
 
 By default the plugin will try to load the file `tailwind.config.js` at the root of your project.
diff --git a/docs/rules/no-contradicting-classname.md b/docs/rules/no-contradicting-classname.md
@@ -32,12 +32,19 @@ Examples of **correct** code for this rule:
 ...
 ```
 
-### `callees` (default: `["classnames", "clsx", "ctl"]`)
+### `callees` (default: `["classnames", "clsx", "ctl", "cva", "tv"]`)
 
 If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule.
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+
+Using libraries like `cva`, some of its object keys are not meant to contain classnames in its value(s).
+You can specify which key(s) won't be parsed by the plugin using this setting.
+For example, `cva` has `compoundVariants` and `defaultVariants`.
+NB: As `compoundVariants` can have classnames inside its `class` property, you can also use a callee to make sure this inner part gets parsed while its parent is ignored.
+
 ### `config` (default: `"tailwind.config.js"`)
 
 By default the plugin will try to load the file `tailwind.config.js` at the root of your project.
diff --git a/docs/rules/no-custom-classname.md b/docs/rules/no-custom-classname.md
@@ -34,12 +34,19 @@ Examples of **correct** code for this rule:
 ...
 ```
 
-### `callees` (default: `["classnames", "clsx", "ctl"]`)
+### `callees` (default: `["classnames", "clsx", "ctl", "cva", "tv"]`)
 
 If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule.
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+
+Using libraries like `cva`, some of its object keys are not meant to contain classnames in its value(s).
+You can specify which key(s) won't be parsed by the plugin using this setting.
+For example, `cva` has `compoundVariants` and `defaultVariants`.
+NB: As `compoundVariants` can have classnames inside its `class` property, you can also use a callee to make sure this inner part gets parsed while its parent is ignored.
+
 ### `config` (default: `"tailwind.config.js"`)
 
 By default the plugin will try to load the file `tailwind.config.js` at the root of your project.
diff --git a/lib/rules/classnames-order.js b/lib/rules/classnames-order.js
@@ -44,6 +44,11 @@ module.exports = {
             items: { type: 'string', minLength: 0 },
             uniqueItems: true,
           },
+          ignoredKeys: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
           config: {
             // default: 'tailwind.config.js',
             type: ['string', 'object'],
diff --git a/lib/rules/enforces-negative-arbitrary-values.js b/lib/rules/enforces-negative-arbitrary-values.js
@@ -40,6 +40,11 @@ module.exports = {
             items: { type: 'string', minLength: 0 },
             uniqueItems: true,
           },
+          ignoredKeys: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
           config: {
             // default: 'tailwind.config.js',
             type: ['string', 'object'],
diff --git a/lib/rules/enforces-shorthand.js b/lib/rules/enforces-shorthand.js
@@ -41,6 +41,11 @@ module.exports = {
             items: { type: 'string', minLength: 0 },
             uniqueItems: true,
           },
+          ignoredKeys: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
           config: {
             // default: 'tailwind.config.js',
             type: ['string', 'object'],
diff --git a/lib/rules/migration-from-tailwind-2.js b/lib/rules/migration-from-tailwind-2.js
@@ -46,6 +46,11 @@ module.exports = {
             items: { type: 'string', minLength: 0 },
             uniqueItems: true,
           },
+          ignoredKeys: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
           config: {
             // default: 'tailwind.config.js',
             type: ['string', 'object'],
diff --git a/lib/rules/no-arbitrary-value.js b/lib/rules/no-arbitrary-value.js
@@ -40,6 +40,11 @@ module.exports = {
             items: { type: 'string', minLength: 0 },
             uniqueItems: true,
           },
+          ignoredKeys: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
           config: {
             // default: 'tailwind.config.js',
             type: ['string', 'object'],
diff --git a/lib/rules/no-contradicting-classname.js b/lib/rules/no-contradicting-classname.js
@@ -41,6 +41,11 @@ module.exports = {
             items: { type: 'string', minLength: 0 },
             uniqueItems: true,
           },
+          ignoredKeys: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
           config: {
             // default: 'tailwind.config.js',
             type: ['string', 'object'],
@@ -57,6 +62,7 @@ module.exports = {
 
   create: function (context) {
     const callees = getOption(context, 'callees');
+    const ignoredKeys = getOption(context, 'ignoredKeys');
     const skipClassAttribute = getOption(context, 'skipClassAttribute');
     const tags = getOption(context, 'tags');
     const twConfig = getOption(context, 'config');
@@ -158,9 +164,16 @@ module.exports = {
         return;
       }
       if (astUtil.isLiteralAttributeValue(node)) {
-        astUtil.parseNodeRecursive(node, null, parseForContradictingClassNames, true);
+        astUtil.parseNodeRecursive(node, null, parseForContradictingClassNames, true, false, ignoredKeys);
       } else if (node.value && node.value.type === 'JSXExpressionContainer') {
-        astUtil.parseNodeRecursive(node, node.value.expression, parseForContradictingClassNames, true);
+        astUtil.parseNodeRecursive(
+          node,
+          node.value.expression,
+          parseForContradictingClassNames,
+          true,
+          false,
+          ignoredKeys
+        );
       }
     };
 
@@ -180,7 +193,7 @@ module.exports = {
         }
       };
       node.arguments.forEach((arg) => {
-        astUtil.parseNodeRecursive(node, arg, pushClasses, true);
+        astUtil.parseNodeRecursive(node, arg, pushClasses, true, false, ignoredKeys);
       });
       parseForContradictingClassNames(allClassnamesForNode, node);
     };
@@ -204,7 +217,7 @@ module.exports = {
             allClassnamesForNode.push(...classNames);
           }
         };
-        astUtil.parseNodeRecursive(node, node.quasi, pushClasses, true);
+        astUtil.parseNodeRecursive(node, node.quasi, pushClasses, true, false, ignoredKeys);
         parseForContradictingClassNames(allClassnamesForNode, node);
       },
     };
@@ -220,7 +233,7 @@ module.exports = {
           case !astUtil.isValidVueAttribute(node, classRegex):
             return;
           case astUtil.isVLiteralValue(node):
-            astUtil.parseNodeRecursive(node, null, parseForContradictingClassNames, true);
+            astUtil.parseNodeRecursive(node, null, parseForContradictingClassNames, true, false, ignoredKeys);
             break;
           case astUtil.isArrayExpression(node):
             const allClassnamesForNode = [];
@@ -234,13 +247,13 @@ module.exports = {
               }
             };
             node.value.expression.elements.forEach((el) => {
-              astUtil.parseNodeRecursive(node, el, pushClasses, true);
+              astUtil.parseNodeRecursive(node, el, pushClasses, true, false, ignoredKeys);
             });
             parseForContradictingClassNames(allClassnamesForNode, node);
             break;
           case astUtil.isObjectExpression(node):
             node.value.expression.properties.forEach((prop) => {
-              astUtil.parseNodeRecursive(node, prop, parseForContradictingClassNames);
+              astUtil.parseNodeRecursive(node, prop, parseForContradictingClassNames, false, false, ignoredKeys);
             });
             break;
         }
diff --git a/lib/rules/no-custom-classname.js b/lib/rules/no-custom-classname.js
@@ -51,6 +51,11 @@ module.exports = {
             items: { type: 'string', minLength: 0 },
             uniqueItems: true,
           },
+          ignoredKeys: {
+            type: 'array',
+            items: { type: 'string', minLength: 0 },
+            uniqueItems: true,
+          },
           config: {
             // default: 'tailwind.config.js',
             type: ['string', 'object'],
@@ -81,6 +86,7 @@ module.exports = {
 
   create: function (context) {
     const callees = getOption(context, 'callees');
+    const ignoredKeys = getOption(context, 'ignoredKeys');
     const skipClassAttribute = getOption(context, 'skipClassAttribute');
     const tags = getOption(context, 'tags');
     const twConfig = getOption(context, 'config');
@@ -152,9 +158,9 @@ module.exports = {
         return;
       }
       if (astUtil.isLiteralAttributeValue(node)) {
-        astUtil.parseNodeRecursive(node, null, parseForCustomClassNames);
+        astUtil.parseNodeRecursive(node, null, parseForCustomClassNames, false, false, ignoredKeys);
       } else if (node.value && node.value.type === 'JSXExpressionContainer') {
-        astUtil.parseNodeRecursive(node, node.value.expression, parseForCustomClassNames);
+        astUtil.parseNodeRecursive(node, node.value.expression, parseForCustomClassNames, false, false, ignoredKeys);
       }
     };
 
@@ -164,7 +170,7 @@ module.exports = {
         return;
       }
       node.arguments.forEach((arg) => {
-        astUtil.parseNodeRecursive(node, arg, parseForCustomClassNames);
+        astUtil.parseNodeRecursive(node, arg, parseForCustomClassNames, false, false, ignoredKeys);
       });
     };
 
@@ -176,7 +182,7 @@ module.exports = {
         if (!tags.includes(node.tag.name)) {
           return;
         }
-        astUtil.parseNodeRecursive(node, node.quasi, parseForCustomClassNames);
+        astUtil.parseNodeRecursive(node, node.quasi, parseForCustomClassNames, false, false, ignoredKeys);
       },
     };
 
@@ -191,16 +197,16 @@ module.exports = {
           case !astUtil.isValidVueAttribute(node, classRegex):
             return;
           case astUtil.isVLiteralValue(node):
-            astUtil.parseNodeRecursive(node, null, parseForCustomClassNames);
+            astUtil.parseNodeRecursive(node, null, parseForCustomClassNames, false, false, ignoredKeys);
             break;
           case astUtil.isArrayExpression(node):
             node.value.expression.elements.forEach((arg) => {
-              astUtil.parseNodeRecursive(node, arg, parseForCustomClassNames);
+              astUtil.parseNodeRecursive(node, arg, parseForCustomClassNames, false, false, ignoredKeys);
             });
             break;
           case astUtil.isObjectExpression(node):
             node.value.expression.properties.forEach((prop) => {
-              astUtil.parseNodeRecursive(node, prop, parseForCustomClassNames);
+              astUtil.parseNodeRecursive(node, prop, parseForCustomClassNames, false, false, ignoredKeys);
             });
             break;
         }
diff --git a/lib/util/ast.js b/lib/util/ast.js
diff --git a/lib/util/settings.js b/lib/util/settings.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/tests/lib/rules/no-custom-classname.js b/tests/lib/rules/no-custom-classname.js
