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.
.square {
width: 200px;
height: 200px;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
/* This is applied late because of the ampersand */
&.twitchy {
background-color: red;
}
}
/* This is applied instantly */
.solid {
background-color: red;
}
/* This is applied late because of the ampersand */
.\&twitchy {
background-color: red;
}
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"
}
}
No idea why the ampersand would make a difference. In dev assets are discovered as they are accessed so there can be delays but no idea how specific CSS rules would have anything to do with anything.
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.https://github.com/user-attachments/assets/1f560a37-c3e7-4763-9d84-7ab0cdcd78fb
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 🌎