Feat: Combining/referencing variants to avoid conflicting classNames

[AbdallahAbis]

I have this component:

const Text = w.p(
  ``,
  {
    variants: {
      size: {
        'base' : 'text-base',
      },
      weight: {
        normal: 'font-normal',
      },
      variant: {
        h1: 'font-bold text-8xl',
       base: 'font-normal text-base',
      },
    },
    defaultVariants: {
      variant: 'base',
      weight: 'normal',
      size: 'base',
    }
  }
);

I render this:

<Text variant="h1">Heading 1</Text>

the output I get:

<h1 class="text-base font-normal font-bold text-8xl">Heading 1</h1>

The issue here is the output has conflicting classNames and it shows a normal font instead of bold.

The question would be, how can I make the variant reference the size and weight so specifying the variant acts just like specifying both weight and size and I won't get those conflicting classNames? or how can I make the defaultVariants not apply if the variant prop is specified?

the expected result is

I render this:

<Text variant="h1">Heading 1</Text>

The output should be:

<h1 class="font-bold text-8xl">Heading 1</h1>

[vinpac]

Great question. I'm in a little hurry right now, but I will take a time to respond this later today

[AbdallahAbis]

Sure. Take your time.

[vinpac]

This is another great point. Something we definitely need to implement. Stiches JS has Compound Variants https://stitches.dev/docs/variants#compound-variants

We probably can take ideas from that.

What do you think?

[AbdallahAbis]

looks great! it will reduce the number of ternary operators used in functional variants.

[vinpac]

Hey @AbdallahAbis , I've just added a new Pull Request which should solve this issue. Could you give your thoughts on that, please? :)

https://github.com/vinpac/windstitch/pull/8

[vinpac]

Hey @AbdallahAbis, check this out https://windstitch.vercel.app/docs/compound-variants ;)