[Documentation] Lack of docs for compoundVariants option

[dhutaryan]

Hello, I'm trying yo use compoundVariants option because it's very useful in my case. I guess it should work the similar as in stitches but I didn't find any examples in documentation. Could you add some?

[Mokshit06]

Hi! compoundVariants do indeed work very similar to how they do in stitches. The docs still need some work with more examples, but there's one on the home page itself https://macaron.js.org/

const Button = styled('button', {
  base: {
    borderRadius: 6,
  },
  variants: {
    color: {
      neutral: { background: 'whitesmoke' },
      accent: { background: 'slateblue' },
    },
    rounded: {
      true: { borderRadius: 999 },
    },
  },
  compoundVariants: [
    {
      variants: {
        color: 'neutral',
        rounded: true,
      },
      style: { background: 'ghostwhite' },
    },
  ],
  defaultVariants: {
    color: 'accent',
  },
});

So here when the variants color=neutral and rounded=true are applied at the same time, the background color would get set to ghostwhite :)