extractCss() returns empty string in Solid SSR environment

[viridia]

Here's an example demonstrating the problem:

https://stackblitz.com/edit/solid-start-bare-ts-g7hiuv?file=src/routes/index.tsx

I'm only using css() for this demo, not styled().

I am generating the <style> element using the following code:

<style id="_goober" innerHTML={extractCss()}>{' '}</style>

If you examine the HTML response in the network tab, you'll see that the <style> element for goober is empty, even though I am using extractCss() to generate the content.

The styles look correct once goober has had a chance to render them on the client side, but there is a flash of unstyled content.

I also tried this with another CSS framework - Stitches - and did not encounter this same problem - that is, the following code works as expected:

<style id="stitches" innerHTML={getCssText()}>{' '}</style>

...where getCssText() is the Stitches equivalent of extractCss().

[viridia]

It appears that the problem is because extractCss() is not idempotent. Each time the server gets called to render a page, extractCss() erases the previous styles. This is a problem because the styles were created as a result of static declarations which are only executed once. Hmmm.

[DennisHuallanca]

Hello I have the same problem, I have a module that uses extractCSS(), which works the first time we load the main page, but when we reload the content of the module extractCSS() returns an empty string.

<style id="_goober">{extractCss()}</style>

goober: version "2.1.13"
"react": "^18.2.0",