[Bug?]: CSS module styles injected after hydration; in dev?

[LexSwed]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using CSS modules, so

// text-field.tsx
import styles from './style.module.css';
const TextField = (props) => <div class={styles.textField}><label class={styles.label} /><input class={styles.input} /></div>

const SomeRoute = () => {
  return (
  <section class="container flex flex-col gap-4">
    <TextField label="Field label" placeholder="Enter something" />
  </section>)
}

The TextField styles chunk is not included in the initial HTML, it's loaded lazily after the component is rendered.

See isolated example with text field:

I also see the warning form Seroval(?) when using CSS modules:

Expected behavior 🤔

CSS used for the elements on first render pass is included on the page (as inline styles or separate CSS file in prod env).

Steps to reproduce 🕹

Steps:

1. Create a component that uses CSS modules.
2. Use it in a route (maybe createAsync usage is required to reproduce).
3. See that while component is indeed rendered in the initial HTML on the server, its styles are not included.
4. This leads to flash of unstyled content.

Context 🔦

No response

Your environment 🌎

Node 20
Vite 5.0.10
vite-plugin-solid 2.8.0
vinxi 0.0.54
solid-start 0.4.2
solid-js latest

[srikrsna]

I see this too. Just to add to the repro steps, in the basic template changing the Counter.css to a css module Counter.module.css will trigger the warning

[nksaraf]

Yeah seems like our Module CSS handling is insufficient. Filing this issue in vinxi where it will need to be fixed.

[nksaraf]

Should be fixed in vinxi@0.0.55. please try that and reopen this issue if it still doesn't work.

[albertoforni]

I tested it and it works. Thanks

[arackaf]

I'm seeing this behavior now, on a new "bare" project scaffolded. Vinxi I have is 0.3.10

Looking at the SSR page source, it looks like the tags with the styles are not being send down from the server (and presumably injected after hydration, as with the original issue above).