Multiple outputs

[c0nsoleg]

Hi,

I have encountered many places where component, for example some banner, need adjustments on more than one structure level but is based on same params. Right now we can create multiple cva and keep needed variants consistent but what if we could support multiple output within single cva and single variant names.

For example, instead of creating two separate cva with same variants:

const containerStyles = cva([], {
  variants: {
    size: {
      wide: [],
      base: []
    }
  }
})
const buttonStyles = cva([], {
  variants: {
    size: {
      wide: [],
      base: []
    }
  }
})

we could write it like that

const styles = cva({container: [], button: [] }, {
  variants: {
    wide: {
      container: [],
      button: []
    }
  }
})

Many thanks,
Mateusz

[joe-bell]

I think it's fairly unlikely I'll add support for this in the near-future, but you can achieve this by "composing components" in the meantime:

https://github.com/joe-bell/cva#composing-components

Misunderstood the question, apologies!

#94 (reply in thread)

[c0nsoleg]

Maybe by using something like [&_svg]:text-sm? or any other class after :

[joe-bell]

This PR is a work in progress – docs coming shortly – but hope this helps 🙏

https://github.com/joe-bell/cva/blob/feat/compound/examples/react-with-tailwindcss-compound/src/components/nav/nav.tsx

[NickWoodward]

Hi c0nsoleg

Not quite sure how I can use that to make the icon change based on the parent's prop though?

At the moment I'm thinking of flattening the NavigationItem and creating a new Icon component that also uses CVA, but I'm also a little worried about bloat

<NavigationItem size="sm" icon={<Icon size="lg" />} />

so this way I can just manually decide the Icon size when I use the NavigationItem

[NickWoodward]

This PR is a work in progress – docs coming shortly – but hope this helps 🙏

https://github.com/joe-bell/cva/blob/feat/compound/examples/react-with-tailwindcss-compound/src/components/nav/nav.tsx

Thanks a lot!

[ngekoding]

Sorry, can we use it also in Vue?

[mnieber]

I've created an approach to solve this issue, not knowing that cva existed (so I've partly reinvented the wheel).

I believe that we should not use className to pass in the styles, but rather pass in a trim object. Then from inside the component, different parts of the trim object are used to style different parts of the component.

export type DialogButtonTrimT = {
  base: {
    root: {
      border: any;
      color: any;
      fontSize: any;
      padding: any;
    };
    Icon: {
      margin: any;
      size: any;
      color: any;
    };
  };
  danger?: ModeOverlayT<DialogButtonTrimT>;
  disabled?: ModeOverlayT<DialogButtonTrimT>;
};

export type PropsT = {
  className?: any;
  trim: DialogButtonTrimT;
  danger?: boolean;
  disabled?: boolean;
};

export const DialogButton = (props: PropsT) => {
  // style is determined by the trim prop:
  // - root style is based on trim.base.root
  // - the button has an icon that uses a style based on trim.base.Icon.
  // if the button is in disabled or danger mode, then the disabled or danger overlay is used to augment the base style.
}

The contents of the trim object (i.e. the actual tailwindcss styles) come from a style-object. These are all minor differences from cva (the approach is basically the same), but using trim instead of className offers some advantages I think.

If you want to discuss, please let me know.

ps Link to my blog post regarding this topic: https://maartennieber.com/posts/styling-system-style-objects-scss/chapter-4