Replies: 2 comments 4 replies
-
Oof this is a tough one, I really don't know if this is something I can offer I'm afraid I would be open to exploring the possibility of making all class strings within the function Really appreciate you taking the time to raise this issue though – let's move it to a discussion for now. |
Beta Was this translation helpful? Give feedback.
4 replies
-
Odd observation: this problem no longer appears in |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Version
class-variance-authority@0.7.0
Describe the bug
I’d like to be able to use
as const
incompoundVariants
like this:This works for
foo: 'a' as const
but not forbar: ['x', 'y'] as const
. TypeScript produces this unexpected error:To Reproduce
Steps to reproduce the behavior:
*.ts
filebar: ['x', 'y'] as const
Expected behavior
No TS error in both cases:
compoundVariants[number][Variant]
acceptsreadonly
arraysWorkaround
(it is more verbose and is potentially error-prone)
Screenshots
Desktop (please complete the following information):
Smartphone (please complete the following information):
N/A (not related to runtime)
Additional context
Our team uses
eslint-plugin-tailwindcss
withtailwindcss/no-custom-classname
enabled. It helps to detect typos in lists of Tailwind class names, which is great.I recently tweaked our project’s
tailwind.config.ts
and expected to observe new ESLint errors like “bg-removed-color
is not a valid class name“. These errors showed up everywhere except incva
→compoundVariants
→class
. I discovered francoismassart/eslint-plugin-tailwindcss#193 (comment) which explained it. So after addingas const
after variant names and addingtailwindcss
→ignoredKeys: ['defaultVariants']
to.eslintrc.cjs
, all invalid class names got detected and I did not see any false-positive ESLint errors around variant names.However, because
cva
did not likebar: ['x', 'y'] as const
, I had to fiddle with typings and as a temp solution, landed onbar: ['x', 'y'] as ['x', 'y']
. It does the job, but it is more verbose thanas const
and can be confusing to developers.I understand that the support for
readonly
arrays does not add much value tocva
on its own. However, because many folks may be using this lib together witheslint-plugin-tailwindcss
like us, it’d be great to be able to typeas const
after the list of variants. Being unable to set areadonly
array to a key with a variants looks like a bug to me (or at least as an unexpected limitation).Cheers! Awesome lib, I’m a huge fan of the approach!
Beta Was this translation helpful? Give feedback.
All reactions