Initial variant not applied when same as breakpoint variant

[dlehmhus]

Bug report

Describe the bug

Context: Responsive Styles When setting the @initial variant to the same variant as the breakpoint, the initial variant gets not applied.

    <Container colorMode={{ "@initial": "light", "@bp1": "light" }}>
      <h1>Expected background-color: rgb(255 250 126) </h1>
    </Container>

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to CodeSandbox

Expected behavior

The initial variant should be applied, even it is the same for all breakpoints variants.

[DevinEdwards]

@hadihallak Toggling between variants all seems to not be applied correctly. I believe this is due to duplicate class names being removed.

Eg:

  <Container colorMode={{ "@initial": "light", "@bp1": "dark", "@bp2": "light" }}>
     <h1>Expected Background color: rgb(255 250 126) </h1>
  </Container>

[hadihallak]

@DevinEdwards Not sure I fully understand this, would you be able to share a new codesandbox

[DevinEdwards]

Sure thing @hadihallak. I forked the above and added extra breakpoints to illustrate the issue.

Codesandbox

Repeating responsive variants at different breakpoints doesn't work. From my perspective, Stitches relies on the ordering of class names for the specificity of responsive variants, and the duplicate class names are being stripped out.

For the record Stitches is amazing, and really appreciate all the time and effort that has been put into it. 🙏🏼

[MichaelDM]

Hi @hadihallak, this is the message I sent you in Discord - I think you were able to pinpoint the issue then as you pointed me to this thread!

Message link reference: https://discord.com/channels/752614004387610674/752795957674115092/989805725205291068

Message Content: For example: <Grid columns={{ "@initial": 2, "@bp1": 1, "@bp2": 2 }}> ✅ @bp1 - children items are laid out as 1 column ✅ @bp2 - children items are laid out as 2 columns. This also validates that 2 columns works. ❌ @intial - the code of the variant is simply not applied. Columns are not applied as indicated. Here is a codesandbox to easily see the issue. @bp1 starts at 100px, @bp2 starts at 200px. https://codesandbox.io/s/stitches-forked-tbwxcx?file=/src/App.js:929-992

[hadihallak]

@DevinEdwards Thanks! really appreciate the support 🙏 Looks like you ended up linking the same codesandbox of the original issue by a mistake in your comment so would be helpful if you fix that

[DevinEdwards]

@hadihallak. My apologies updated link here & edited above ☝🏼

[hadihallak]

@DevinEdwards Thanks a lot for the updated link — it adds so much more context to this bug 🙏 I'm rewriting the internal sheet implementation of stitches and there is a very high chance this bug will automatically be fixed and be a s part of the 2.0 release.

Will keep you all updated in this issue once the fix is confirmed

[antoine-lin]

Hi @hadihallak, any news?