[Bug?]: CSS classes or other selectors that contain an ampersand apply late with streaming in dev

[jakst]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the 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 an createAsync on the page. See reproduction steps for full reproduction.

<div class="square solid">solid</div>
<div class="square twitchy">twitchy</div>
<div class="square &twitchy">twitchy</div>

.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;
}

twitchy.mov

Expected behavior 🤔

I expect all CSS to be applied correctly on the first render, even in the dev server.

Steps to reproduce 🕹

1. Clone https://github.com/jakst/solid-start-twitchy-css
2. Start the dev server
3. Visit the page and spam reload the page
4. Notice the two rightmost boxes flicker in blue

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 🌎

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"
  }
}

[ryansolid]

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.

[jeremyjacob]

I'm experiencing a similar layout shift once the content is hydrated. Only class names containing ampersands are affected. They're common in complex Tailwind selectors as well.

It looks like the issue is some erroneous escaping happening somewhere in the SSR pipeline.

Given a class like this: [html_:where(&>*)]:mx-[calc(50%-min(50%,theme(maxWidth.lg)))], one would expect the following output:

    .\[\&\>\*\]\:mx-\[calc\(50\%-min\(50\%\2c 33rem\)\)\]>* {
      margin-left: calc(50% - min(50%, 33rem));
      margin-right: calc(50% - min(50%, 33rem));
    }

Which is in fact what we get with CSR or once hydrated. With SSR, however, the output incorrectly escapes the & with &\n\n:

    .\[\&

    \>\*\]\:mx-\[calc\(50\%-min\(50\%\2c 33rem\)\)\]>* {
      margin-left: calc(50% - min(50%, 33rem));
      margin-right: calc(50% - min(50%, 33rem));
    }