Expand cx() functionality

[MarkusWendorf]

Hey there,

I really like the features that cva provides but for simple cases (where I have to concatenate classes), I used to use clsx.

For the most part cx works fine, but I do miss the clsx({ "some-class-to-apply": someBoolean }).

Are there plans to expand on that? Or maybe even just re-export clsx?

[joe-bell]

I’ve been toying the idea of allowing people to swap out the “cx” function with their own one, is that something you’d be interested in?

[MarkusWendorf]

@joe-bell not really, I wanted a slightly better out of the box experience of cva.

I can't see what other use cases one could cover by swapping out the cx function, other than what clsx provides.

Given that clsx is very small (that's the whole code for it, I would directly include it.

[joe-bell]

I’ll think about it

[MarkusWendorf]

@joe-bell I think your idea for swapping out the cx functionality could be worth it. Looking at #141 it might be useful to be able to customise how classes are concatenated.

Not sure how the API should look like, but my first instinct would be to have a config function which creates a customised cva function. Which would then be consumed instead of the library cva function

import { config } from "cva";
import "clsx" from "clsx";
export const cva = config({ cx: clsx });

[linden-dg]

Following up on this one, it would be great to be able to extend/wrap the cx functionality. I want to be able to pass through a custom class/className to be able to override properties - which cva supports already with e.g. buttonVariants({ theme, className}). But because of the way tailwind works, you need to use something like tailwind-merge to prevent conflicts.

The order of the return function for cva is already perfect for tailwind-merge - with the props?.className coming after the base & variants. But without being able to wrap cva, I have to remember to wrap every single use of a variant in twMerge. It would be much better if I could extend the cva function e.g:

import { config } from "cva";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export const cva = config({
  cx: (...inputs: ClassValue[]) => twMerge(clsx(inputs)),
});

[joe-bell]

Hello! Just to let you know that this will be available in [email protected]. Thanks for the suggestion!