Add responsiveVariants to ignoredKeys by default

docs/rules/classnames-order.md

@@ -38,11 +38,11 @@ If you use some utility library like [@netlify/classnames-template-literals](htt
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
-### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants", "responsiveVariants"]`)
 
 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`.
+For example, `cva` has `compoundVariants` and `defaultVariants`. Also, `tailwind-variants` has `responsiveVariants`.
 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: generated by `tailwindcss/lib/lib/load-config`)

docs/rules/enforces-negative-arbitrary-values.md

@@ -56,11 +56,11 @@ If you use some utility library like [@netlify/classnames-template-literals](htt
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
-### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants", "responsiveVariants"]`)
 
 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`.
+For example, `cva` has `compoundVariants` and `defaultVariants`. Also, `tailwind-variants` has `responsiveVariants`.
 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: generated by `tailwindcss/lib/lib/load-config`)

docs/rules/enforces-shorthand.md

@@ -48,11 +48,11 @@ If you use some utility library like [@netlify/classnames-template-literals](htt
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
-### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants", "responsiveVariants"]`)
 
 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`.
+For example, `cva` has `compoundVariants` and `defaultVariants`. Also, `tailwind-variants` has `responsiveVariants`.
 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: generated by `tailwindcss/lib/lib/load-config`)

docs/rules/migration-from-tailwind-2.md

@@ -93,11 +93,11 @@ If you use some utility library like [@netlify/classnames-template-literals](htt
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
-### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants", "responsiveVariants"]`)
 
 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`.
+For example, `cva` has `compoundVariants` and `defaultVariants`. Also, `tailwind-variants` has `responsiveVariants`.
 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: generated by `tailwindcss/lib/lib/load-config`)

docs/rules/no-arbitrary-value.md

@@ -38,11 +38,11 @@ If you use some utility library like [@netlify/classnames-template-literals](htt
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
-### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants", "responsiveVariants"]`)
 
 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`.
+For example, `cva` has `compoundVariants` and `defaultVariants`. Also, `tailwind-variants` has `responsiveVariants`.
 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: generated by `tailwindcss/lib/lib/load-config`)

docs/rules/no-contradicting-classname.md

@@ -38,11 +38,11 @@ If you use some utility library like [@netlify/classnames-template-literals](htt
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
-### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants", "responsiveVariants"]`)
 
 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`.
+For example, `cva` has `compoundVariants` and `defaultVariants`. Also, `tailwind-variants` has `responsiveVariants`.
 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: generated by `tailwindcss/lib/lib/load-config`)

docs/rules/no-custom-classname.md

@@ -40,11 +40,11 @@ If you use some utility library like [@netlify/classnames-template-literals](htt
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
-### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants", "responsiveVariants"]`)
 
 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`.
+For example, `cva` has `compoundVariants` and `defaultVariants`. Also, `tailwind-variants` has `responsiveVariants`.
 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: generated by `tailwindcss/lib/lib/load-config`)

docs/rules/no-unnecessary-arbitrary-value.md

@@ -69,11 +69,11 @@ If you use some utility library like [@netlify/classnames-template-literals](htt
 
 For best results, gather the declarative classnames together, avoid mixing conditional classnames in between, move them at the end.
 
-### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants", "responsiveVariants"]`)
 
 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`.
+For example, `cva` has `compoundVariants` and `defaultVariants`. Also, `tailwind-variants` has `responsiveVariants`.
 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: generated by `tailwindcss/lib/lib/load-config`)

lib/util/settings.js

@@ -23,7 +23,7 @@ function getOption(context, name) {
     case 'callees':
       return ['classnames', 'clsx', 'ctl', 'cva', 'tv'];
     case 'ignoredKeys':
-      return ['compoundVariants', 'defaultVariants'];
+      return ['compoundVariants', 'defaultVariants', 'responsiveVariants'];
     case 'classRegex':
       return '^class(Name)?$';
     case 'config':

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

@@ -985,6 +985,41 @@ ruleTester.run("no-custom-classname", rule, {
         },
       ],
     },
+    {
+      code: `
+      // https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/323
+      const button = tv(
+        {
+          base: "cursor-pointer transition duration-300 ease-in-out disabled:cursor-not-allowed disabled:brightness-50",
+          defaultVariants: {
+            color: "green",
+            size: "md",
+          },
+          variants: {
+            color: {
+              green:
+                "bg-green-600 text-zinc-100 hover:bg-green-700 focus:bg-green-700",
+              red: "bg-red-600 text-zinc-100 hover:bg-red-700 focus:bg-red-700",
+              sky: "bg-sky-600 text-zinc-100 hover:bg-sky-700 focus:bg-sky-700",
+            },
+            size: {
+              lg: "rounded-md px-6 py-3 text-lg",
+              md: "rounded-md px-4 py-2 text-base",
+              sm: "rounded px-2 py-1 text-sm",
+            },
+          },
+        },
+        {
+          responsiveVariants: ["sm", "md"],
+        },
+      )
+      `,
+      options: [
+        {
+          callees: ["tv"],
+        },
+      ],
+    },
     {
       code: `
         const obj = { a: 12 };
@@ -1476,6 +1511,43 @@ ruleTester.run("no-custom-classname", rule, {
       ],
       errors: generateErrors("yolo custom"),
     },
+    {
+      code: `
+      // https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/323
+      const button = tv(
+        {
+          base: "sushi cursor-pointer transition duration-300 ease-in-out disabled:cursor-not-allowed disabled:brightness-50",
+          defaultVariants: {
+            color: "green",
+            size: "md",
+          },
+          variants: {
+            color: {
+              green:
+                "bg-green-600 text-zinc-100 hover:bg-green-700 focus:bg-green-700",
+              red: "bg-red-600 text-zinc-100 hover:bg-red-700 focus:bg-red-700",
+              sky: "bg-sky-600 text-zinc-100 hover:bg-sky-700 focus:bg-sky-700",
+            },
+            size: {
+              lg: "rounded-md px-6 py-3 text-lg",
+              md: "rounded-md px-4 py-2 text-base",
+              sm: "rounded px-2 py-1 text-sm",
+            },
+          },
+        },
+        {
+          responsiveVariants: ["sm", "md"],
+        },
+      );
+      `,
+      options: [
+        {
+          callees: ["tv"],
+        },
+      ],
+      // Before #323 is resolved, sm and md in responsiveVariants are also detected as Custom ClassName
+      errors: generateErrors("sushi"),
+    },
     {
       code: `<div className="px-1\u3000py-2">Full-width space between classes</div>`,
       errors: generateErrors("px-1\u3000py-2"),