invalid-cva-input

This rule reports a runtime condition, such as && or a ternary, inside the base or an option value of style.cva(). The compiler generates every value when it creates the factory, so the condition cannot choose a style.

Reported

declare const active: boolean;
style.cva(active && "bg-blue-500");invalid-cva-input: style.cva() values require static utilities, arrays, CSS variants, or custom properties. Utility inputs cannot use && or ternary expressions

Fixed

declare const active: boolean;
const button = style.cva("", {
  variants: { active: { true: "bg-blue-500", false: null } },
});
button({ active });

How to fix

• Turn the condition into an option, and pass the current value when you call the factory, as in the example.
• Stored style() results, refs, animations, and class fields are not accepted either. Use them in style() instead.

See style.cva().

Rule settings