Readonly arrays are not accepted in compoundVariants

[kachkaev]

Version

class-variance-authority@0.7.0

Describe the bug

I’d like to be able to use as const in compoundVariants like this:

import { cva } from 'class-variance-authority';

export const demoVariants = cva('bg-red-500', {
  variants: {
    foo: {
      a: 'p-1',
      b: 'p-2',
      c: 'p-3',
    },
    bar: {
      x: 'm-1',
      y: 'm-2',
      z: 'm-3',
    },
  },
  compoundVariants: [
    {
      foo: 'a' as const,          // ⬅️ ⬅️ ⬅️ ⬅️ ⬅️ 
      bar: ['x', 'y'] as const,   // ⬅️ ⬅️ ⬅️ ⬅️ ⬅️
      class: 'm-0 p-0',
    },
  ],
  defaultVariants: {
    foo: 'a',
    bar: 'x',
  },
});

This works for foo: 'a' as const but not for bar: ['x', 'y'] as const. TypeScript produces this unexpected error:

Type 'readonly ["x", "y"]' is not assignable to type '"x" | "y" | "z" | ("x" | "y" | "z")[] | null | undefined'.
  The type 'readonly ["x", "y"]' is 'readonly' and cannot be assigned to the mutable type '("x" | "y" | "z")[]'. ts(2322)

To Reproduce
Steps to reproduce the behavior:

1. Paste the above code snippet in a *.ts file
2. Observe TS error next to bar: ['x', 'y'] as const

Expected behavior

No TS error in both cases: compoundVariants[number][Variant] accepts readonly arrays

Workaround

-     bar: ['x', 'y'] as const,
+     bar: ['x', 'y'] as ['x', 'y'],

(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 with tailwindcss/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 in cva → compoundVariants → class. I discovered francoismassart/eslint-plugin-tailwindcss#193 (comment) which explained it. So after adding as const after variant names and adding tailwindcss → 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 like bar: ['x', 'y'] as const, I had to fiddle with typings and as a temp solution, landed on bar: ['x', 'y'] as ['x', 'y']. It does the job, but it is more verbose than as const and can be confusing to developers.

I understand that the support for readonly arrays does not add much value to cva on its own. However, because many folks may be using this lib together with eslint-plugin-tailwindcss like us, it’d be great to be able to type as const after the list of variants. Being unable to set a readonly 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!

[joe-bell]

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 readonly, but I'm unsure how this would behave with other libraries, and I'm not sure that overhead is something I'm willing to carry right now

Really appreciate you taking the time to raise this issue though – let's move it to a discussion for now.

[kachkaev]

Thanks for your reply @joe-bell! I played with the typings locally and possibly found the solution:

cva/packages/class-variance-authority/src/index.ts

Lines 34 to 39 in 67f64a1

	type ConfigVariantsMulti<T extends ConfigSchema> = {
	[Variant in keyof T]?:
	| StringToBoolean<keyof T[Variant]>
	| StringToBoolean<keyof T[Variant]>[]
	| undefined;
	};

When I add this line locally, both foo: 'a' as const and bar: ['x', 'y'] as const begin to work!

 type ConfigVariantsMulti<T extends ConfigSchema> = {
   [Variant in keyof T]?:
     | StringToBoolean<keyof T[Variant]>
     | StringToBoolean<keyof T[Variant]>[]
+    | ReadonlyArray<StringToBoolean<keyof T[Variant]>>
     | undefined;
 };

More specifically, I changed node_modules/.pnpm/class-variance-authority@0.7.0/node_modules/class-variance-authority/dist/index.d.ts like this (this transpiled file has a slightly different formatting compared to the source):

 type ConfigVariantsMulti<T extends ConfigSchema> = {
-   [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
+   [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | ReadonlyArray<StringToBoolean<keyof T[Variant]>> | undefined;
};

Do you see any flaws?

[kachkaev]

I created #196 just in case

[joe-bell]

I really appreciate the PR but I'll hold off on implementing for now until cva@1.0 is ready 🙏

Will keep this discussion open in the meantime 😊

[kachkaev]

No worries! What risks do you see from that additional | in the typing? After digging into the issue yesterday, I found the solution pretty straightforward and non-breaking. So to me it looks like a good thing to support readonly in 1.0.0.

What is it that I can be missing? Happy to research this a bit more!

[kachkaev]

Odd observation: this problem no longer appears in class-variance-authority@0.7.0 and typescript@5.4.3. Maybe TS got better at treating as const when deriving types.