[BUG] CVA DefaultVariants read as class names

[thebuilder]

The named Object lookup seems to be working great - But, it stumbles if you define defaultVariants in CVA, since it doesn't recognize them as valid class names.

Given a cva like this:

const button = cva(["font-semibold", "border", "rounded"], {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      // **or**
      // primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [
    {
      intent: "primary",
      size: "medium",
      class: "uppercase",
      // **or** if you're a React.js user, `className` may feel more consistent:
      // className: "uppercase"
    },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

You'll get these warnings:

   warning  Classname 'primary' is not a Tailwind CSS class!  tailwindcss/no-custom-classname
   warning  Classname 'medium' is not a Tailwind CSS class!    tailwindcss/no-custom-classname

Not sure what the best way to fix this would be - Should you be able to define keys to ignore when scanning objects? Sorta the opposite of the callees.

[acd02]

👋 , in the meantime, one could use this workaround to circumvent this issue, e.g.:

// declare defaultVariants and compound variants outside the cva call
const defaultVariants = {
  intent: 'primary',
  size: 'small',
} as const

const compoundVariantRecord = {
  example: {
    intent: 'secondary',
    size: 'medium',
  } as const,
}

const button = cva(["font-semibold", "border", "rounded"], {
  variants: {
    intent: {
      primary: ["bg-blue-500"],
      secondary: ["bg-red-500"],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [
    {
      ...compoundVariantsRecord.example
      class: "uppercase",
    },
  ],
  defaultVariants
});

[its-monotype]

const button = tv({
  base: ['font-semibold', 'border', 'rounded'],
  variants: {
    intent: {
      primary: ['bg-primary-500'],
      secondary: ['bg-warning-500'],
    },
    size: {
      small: ['text-sm', 'py-1', 'px-2'],
      medium: ['text-base', 'py-2', 'px-4'],
    },
  },
  compoundVariants: [
    {
      intent: 'secondary' as const,
      size: 'medium' as const,
      class: 'uppercase',
    },
  ],
  defaultVariants: {
    intent: 'primary',
    size: 'small',
  } as const,
});

[manassarpatwar]

+1 for ignoring keys on objects

[francoismassart]

👋 Hi @thebuilder, @acd02, @its-monotype & @manassarpatwar
I worked on this issue today.

Here is the PR #232

👉 Also, I would always recommend to group classnames "together" in a single string rather than in listing them as "distinct" classname strings inside an array.

❌ cva(["font-semibold", "border", "rounded"])
✅ cva("font-semibold border rounded")

eslint-plugin-tailwindcss will not lint these classnames together if you are using the array...

Here is the beta version, please give it a shot and provide feedback 😉

npm i eslint-plugin-tailwindcss@3.11.0-beta.0

[acd02]

Thanks @francoismassart 💪 , it does fix the issue 🥳

[kachkaev]

Thanks for sharing the trick with as const @its-monotype! If there are any cva users reading this, it might be worth knowing about joe-bell/cva#194.

TL;DR: if you list variants, avoid as const:

   compoundVariants: [
     {
       intent: 'secondary' as const,
-      size: ['small', 'medium'] as const, // Type 'readonly ["..."]' is not assignable to type ... ts(2322)
+      size: ['small', 'medium'] as ['small', 'medium'],
      class: 'uppercase', 
     },
   ],

Hope that joe-bell/cva#194 will be resolved and this little trap will be eliminated!