At this moment dealing with compoundVariants is tedious. You need to declare all variants beforehand even if all of them are empty.
It becomes even worse when you need multiple cva calls in your component, like this:
const wrapperVariants = cva({
base: `
bg-bg-1 flex items-center justify-center gap-2 border border-border-1 px-3
py-1.5 outline-2 outline-offset-2 outline-info rounded-2
focus-within:outline
`,
variants: {
state: {
error: [],
default: [],
},
disabled: {
true: 'pointer-events-none opacity-50',
false: [],
},
},
compoundVariants: [{
disabled: false,
state: 'error',
class: 'border-error',
}],
})
const wrapperClasses = computed(() => wrapperVariants(props))
const detailsVariants = cva({
base: 'text-content-3 text-p-sm',
variants: {
state: {
error: [],
default: [],
},
disabled: {
true: 'opacity-50',
false: [],
},
},
compoundVariants: [{
disabled: false,
state: 'error',
class: 'text-error',
}],
})
const detailsClasses = computed(() => detailsVariants(props))
It would be very nice if compoundVariants evolved from just consumer of variants to provider of variants. Like that:
const detailsVariants = cva({
base: 'text-content-3 text-p-sm',
variants: {
disabled: {
true: 'opacity-50',
},
},
compoundVariants: [{
disabled: false,
state: 'error',
class: 'text-error',
}],
})
At this moment dealing with
compoundVariantsis tedious. You need to declare allvariantsbeforehand even if all of them are empty.It becomes even worse when you need multiple
cvacalls in your component, like this:It would be very nice if
compoundVariantsevolved from just consumer of variants to provider of variants. Like that: