When a responsive variant matches the @initial variant, the initial one is not applied.

[elisehein]

Bug report

Describe the bug

When using responsive variants with the @initial breakpoint along with another breakpoint that happens to match the value in @initial, the initial value is ignored.

To Reproduce

Given the styled component:

const StyledComponent = styled("div", {
  variants: {
    color: {
      red: { color: "red" },
      blue: { color: "blue" },
      yellow: { color: "yellow" }
    }
  }
});

and given the media property in createStitches:

media: {
  small: "(min-width: 100px)",
  medium: "(min-width: 200px)",
  large: "(min-width: 500px)"
}

setting the color variant responsively like this:

<StyledComponent color={{ "@initial": "red", "@small": "blue", "@medium": "red" }} />

I would expect the component to have color: red at screens <100px, color: blue at screens between 100px and 200px, and color: red again at screens > 200px.

Instead, no color is applied at screens < 100px. Styling at other breakpoints is applied correctly.

When changing @medium to "yellow" (something other than @initial), all styling is applied correctly.

Codesandbox – observe no color applied on <40em screen width.

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) [e.g. chrome, safari]
• Version of Stitches: 1.2.8
• Version of Node.js: 16.17.1

[ivanbanov]

probably the same root cause of the other issues:
#885
#913
#976
#1060