Stitches compoundVariants example

[redbaron76]

Hello, is it possible to have a small example of how compoundVariantsworks in Stitches Twin.Macro implementation?
I'm not able to find any reference to this use case neither in documentation nor in some example code.
And official Stitches documentation doesn't help me as well.

Really appreciate it.

[wottpal]

I just tried them, they don't seem to work. Only if I remove both conditions, it applies the css. Don't know if that's a problem with stitches or twin.macro 🤷‍♂️

const AvatarImg = styled.img({
  ...tw`rounded-full overflow-hidden h-full w-full`,
  compoundVariants: [
    {
      isConnected: false, // need to remove
      isConnecting: false, // need to remove
      css: {
        ...tw`grayscale`,
      }
    }
  ],
})

[ben-rogerson]

I'll check this out and get back to you.