Why don't responsive + compound variants work with same value?

[Yogesh Verma]

Bug report

Describe the bug

I have a component with size and orientation variants. The styles are applied via compoundVariants and I am also using breakpoints to apply these variants (see snippet and sandbox).

variants: {
  size: {
    small: {},
    medium: {},
  },
  orientation: {
    left: {},
    top: {}
  },
},
compoundVariants: [ ... ]

The responsive variants work only when @initial and @xs supply different values. For the 2nd snippet, I would expect it to apply styles corresponding to size="medium" and orientation="top". Instead, it applies no styles at all.

<Button size="medium" orientation={{ "@initial": "left", "@xs": "top"}} /> --> Works!
<Button size="medium" orientation={{ "@initial": "top", "@xs": "top"}} /> --> Does not work!
<Button size="medium" orientation="top" --> Works!

Sandbox

https://codesandbox.io/s/stitches-responsive-variant-ts-0-2-0-forked-0vut2f?file=/src/App.tsx

Would like to know if this is incorrect usage or a bug.

[Hamzat Victor Oluwabori]

The problem is that you don't have an xs breakpoint defined. Try and fix that and see the results👍