From 6729e117a35b9789c357f0eff3cc1ba2579af516 Mon Sep 17 00:00:00 2001 From: sushi-chaaaan Date: Thu, 25 Apr 2024 12:54:08 +0900 Subject: [PATCH 1/5] fix: ignore responsiveVariants key by default --- lib/util/settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/util/settings.js b/lib/util/settings.js index 9c24567f..32eb13e6 100644 --- a/lib/util/settings.js +++ b/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': From 1b4a62b4aa834dab5cd6e32b7b674bdb1dfdf1bc Mon Sep 17 00:00:00 2001 From: sushi-chaaaan Date: Sat, 27 Apr 2024 13:09:06 +0900 Subject: [PATCH 2/5] feat: add `responsiveVariants` to ignoredKeys by default --- docs/rules/no-custom-classname.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/rules/no-custom-classname.md b/docs/rules/no-custom-classname.md index ef634322..98ad873b 100644 --- a/docs/rules/no-custom-classname.md +++ b/docs/rules/no-custom-classname.md @@ -40,7 +40,7 @@ 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. From d52aa47ee78fd5aba2db016e2fc18f393d773432 Mon Sep 17 00:00:00 2001 From: sushi-chaaaan Date: Sat, 27 Apr 2024 13:33:53 +0900 Subject: [PATCH 3/5] docs: update `ignoredKeys` doc --- docs/rules/classnames-order.md | 4 ++-- docs/rules/enforces-negative-arbitrary-values.md | 4 ++-- docs/rules/enforces-shorthand.md | 4 ++-- docs/rules/migration-from-tailwind-2.md | 4 ++-- docs/rules/no-arbitrary-value.md | 4 ++-- docs/rules/no-contradicting-classname.md | 4 ++-- docs/rules/no-custom-classname.md | 2 +- docs/rules/no-unnecessary-arbitrary-value.md | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/rules/classnames-order.md b/docs/rules/classnames-order.md index 5fb6f922..038f73eb 100644 --- a/docs/rules/classnames-order.md +++ b/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`) diff --git a/docs/rules/enforces-negative-arbitrary-values.md b/docs/rules/enforces-negative-arbitrary-values.md index 48f4632e..2b73a41b 100644 --- a/docs/rules/enforces-negative-arbitrary-values.md +++ b/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`) diff --git a/docs/rules/enforces-shorthand.md b/docs/rules/enforces-shorthand.md index 6b694fbe..bd6b8a05 100644 --- a/docs/rules/enforces-shorthand.md +++ b/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`) diff --git a/docs/rules/migration-from-tailwind-2.md b/docs/rules/migration-from-tailwind-2.md index c84cb64e..4522951c 100644 --- a/docs/rules/migration-from-tailwind-2.md +++ b/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`) diff --git a/docs/rules/no-arbitrary-value.md b/docs/rules/no-arbitrary-value.md index 84f1e861..815b14eb 100644 --- a/docs/rules/no-arbitrary-value.md +++ b/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`) diff --git a/docs/rules/no-contradicting-classname.md b/docs/rules/no-contradicting-classname.md index b96ad32d..c3d8ea54 100644 --- a/docs/rules/no-contradicting-classname.md +++ b/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`) diff --git a/docs/rules/no-custom-classname.md b/docs/rules/no-custom-classname.md index 98ad873b..07044d3a 100644 --- a/docs/rules/no-custom-classname.md +++ b/docs/rules/no-custom-classname.md @@ -44,7 +44,7 @@ For best results, gather the declarative classnames together, avoid mixing condi 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`) diff --git a/docs/rules/no-unnecessary-arbitrary-value.md b/docs/rules/no-unnecessary-arbitrary-value.md index 953a3a13..9a426cde 100644 --- a/docs/rules/no-unnecessary-arbitrary-value.md +++ b/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`) From cbfef65936ebb6e5b6b08a8e64343e36c7bc6483 Mon Sep 17 00:00:00 2001 From: sushi-chaaaan Date: Sat, 27 Apr 2024 13:34:04 +0900 Subject: [PATCH 4/5] ci: add test for responsiveVariants --- tests/lib/rules/no-custom-classname.js | 71 ++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/tests/lib/rules/no-custom-classname.js b/tests/lib/rules/no-custom-classname.js index 0840cb03..74713b1f 100644 --- a/tests/lib/rules/no-custom-classname.js +++ b/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,42 @@ 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"], + }, + ], + errors: generateErrors("sushi"), + }, { code: `
Full-width space between classes
`, errors: generateErrors("px-1\u3000py-2"), From 3dd63d9e7545035fb1de49a28d12792fd89fbefe Mon Sep 17 00:00:00 2001 From: sushi-chaaaan Date: Sat, 27 Apr 2024 13:47:34 +0900 Subject: [PATCH 5/5] docs: add comment on test --- tests/lib/rules/no-custom-classname.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/lib/rules/no-custom-classname.js b/tests/lib/rules/no-custom-classname.js index 74713b1f..1624871e 100644 --- a/tests/lib/rules/no-custom-classname.js +++ b/tests/lib/rules/no-custom-classname.js @@ -1545,6 +1545,7 @@ ruleTester.run("no-custom-classname", rule, { callees: ["tv"], }, ], + // Before #323 is resolved, sm and md in responsiveVariants are also detected as Custom ClassName errors: generateErrors("sushi"), }, {