@initial overriding other responsive variant values

[hwhmeikle]

Bug report

Describe the bug

When using the responsive variant syntax I have observed that the @initial value sometimes overrides what is specified at @md .

To Reproduce

Code Sandbox: https://codesandbox.io/s/responsive-variants-t11m4?file=/src/App.tsx

1. Ensure your screen width > 768px (to trigger the '@md' breakpoint)
2. Click the 'Go to PageB' link
3. Observe that on route /b the Icon's @md value is being overwritten by the @initial value
4. Refresh the Code Sandbox rendering window
5. Observe that the @md value is now overriding the @initial value.
6. Click the 'Go to PageA' link
7. Observe that the Icon's @md value is being overwritten by the @initial value

Expected behavior

I would expect that the @initial value is always overwritten by @md (when we are above > 768px).

Screenshots

@initial overwriting @md:

@md overwriting @initial after refresh:

[peduarte]

@jonathantneal followed steps provided and verified as a bug.

[klaasman]

I just ran into this issue, any ETA or help needed investigating?

[hadihallak]

this is now fixed in #875 and is pending release so i'm gonna keep the issue open until we release it publicly

[hadihallak]

This is now fixed in a release candidate under the version 1.2.6-0 under a canary tag.
Should be pretty stable if you'd like to upgrade now but expect a final release sometime next week once we finish migrating our products to use the updated version.

Please, don't hesitate in providing us with any feedback regarding this release. very much appreciated 🙏

[hadihallak]

Published under 1.2.6 🎉