You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When combined with solid-starts streaming in dev, CSS selectors that contain an ampersand (&) will be applied with a delay, leading to a flash of the wrong styles.
Here's an example of one one box that has the correct styles all the time, and two boxes that have the twitchy behavior cause by two different syntaxes that include the & character. Note that the issue only appears in dev, when streaming, when there is an createAsync on the page. See reproduction steps for full reproduction.
<divclass="square solid">This box will be red the whole time</div><divclass="square twitchy">This box will render blue at first, and then switch to red</div><divclass="square &twitchy">This box will render blue at first, and then switch to red</div>
I am using Panda CSS which generates a lot of class names containing the & character when nesting selectors. This causes very annoying flashes of the page where it has the wrong styles. It is very hard to focus on real content-shift issues when half the pages moves from this issue, so I often have to debug layout shifts in production builds instead.
Your environment 🌎
Don't know what command to run to get this output. I'm on a Mac and have reproduced this in Chrome, Firefox and Safari. I'm running the following package versions{ "dependencies": { "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.14.1", "@solidjs/start": "^1.0.6", "solid-js": "^1.8.18", "vinxi": "^0.4.1" }}
The text was updated successfully, but these errors were encountered:
Duplicates
Latest version
Current behavior 😯
When combined with solid-starts streaming in dev, CSS selectors that contain an ampersand (
&
) will be applied with a delay, leading to a flash of the wrong styles.Here's an example of one one box that has the correct styles all the time, and two boxes that have the twitchy behavior cause by two different syntaxes that include the
&
character. Note that the issue only appears in dev, when streaming, when there is ancreateAsync
on the page. See reproduction steps for full reproduction.Expected behavior 🤔
I expect all CSS to be applied correctly on the first render, even in the dev server.
Steps to reproduce 🕹
Context 🔦
I am using Panda CSS which generates a lot of class names containing the
&
character when nesting selectors. This causes very annoying flashes of the page where it has the wrong styles. It is very hard to focus on real content-shift issues when half the pages moves from this issue, so I often have to debug layout shifts in production builds instead.Your environment 🌎
The text was updated successfully, but these errors were encountered: