`@initial` overriding other responsive variant values

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:

[hadihallak]

Published under 1.2.6 🎉

[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 🙏