joe-bell / cva

Class Variance Authority
https://cva.style
Apache License 2.0
5.78k stars 110 forks source link

RFC: Support for boolean variant aliases #252

Closed ivoilic closed 9 months ago

ivoilic commented 10 months ago

Description

This PR is a proof of concept for a feature: I often find myself creating variants using a series of mutually exclusive boolean aliases for brevity and readability.

For example, in the case of a React component I'd much rather have: <Component primary /> than <Component intent="primary" />.

This feature would allow variants to function as such when prefixed with an underscore:

const example = cva({
  variants: {
    _intent: { primary: "class-a", secondary: "class-b" },
    size: { sm: "class-s", md: "class-m", lg: "class-l" },
  },
});

example({ _intent: "primary",  size: "md" });  // Outputs "class-a class-m"
example({ primary: true,  size: "md" });  // Also outputs "class-a class-m"

The mutually exclusive nature of the variants is enforced with typing:

example({ primary: true,  secondary: true});  // Causes a typescript error

example({ _intent: "primary",  secondary: true});  
// Valid but the alias will override the variant resulting in "class-b"

Additional context

My naming for this pattern is all over the place, I wasn't sure what to call it. (Exclusive variant aliases?) I've added a basic rough implementation with typescript enforcement and some tests. I'm of course open to any feedback or suggestions.


What is the purpose of this pull request?

Before submitting the PR, please make sure you do the following

vercel[bot] commented 10 months ago

@ivoilic is attempting to deploy a commit to the cva Team on Vercel.

A member of the Team first needs to authorize it.

joe-bell commented 9 months ago

Really appreciate you getting involved @ivoilic, but I'm going to choose not to go with this approach for now as I don't fully understand the benefits. Happy to revisit another time 🙏

ming-codes commented 6 months ago

I believe the benefit is to enable shorthands.