vinpac/windstitch

Feat: Combining/referencing variants to avoid conflicting classNames

Closed this issue · 6 comments

AbdallahAbis commented

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 commented

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

AbdallahAbis commented

Sure. Take your time.

vinpac commented

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 commented

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

vinpac commented

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

#8