Combining different CVA functions

[matibenav]

Hi, dear reader.
I was thinking about composable functions, as I have a use case at my workplace: I have a Pill component that sometimes acts like a Button and sometimes like a span. This can be achieved by just interpolating strings, but I was thinking that maybe something else can be done that can provide typing when needed.

I did a short and basic combining function, as I don't have access to the typings from CVA (And I don't think I should copy/paste them in my repo, because maintenance)

export function combineStylesFunctions<P>(...funcs: Array<(props?: P) => string>) {
  return (props: P): string => funcs.map((func) => func(props)).join(' ');
}

The thing is that this will not provide the desirable typing when applying VariantProps.

type Props = VariantProps<typeof YOUR_STYLE_FUNCTION>;

Which should be the typing of the intersection of the combined functions.

Not sure how it could be implemented, but I feel it would be a nice feature to have in order to ensure composition.

[joe-bell]

This is great, thanks for sharing! I'll pop it in my cva@1.0 consideration list

[joe-bell]

#193