Duplicated css import when hydrating Solid-js component in dev mode

[predaytor]

What version of astro are you using?

2.3.0

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Ubuntu (WSL)

What browser are you using?

Chrome

Describe the Bug

I use css-modules for shared styles in astro and solid-js components. When using hydration directives for a solid-js component, imported styles are duplicated and imported twice in the head after all previous styles, which breaks the layout for the entire page.

In the example, it's replacing astro styles due to import order.

The problem occurred only in dev mode. Also tested with SSR adapter, same behavior. Production on SSR/SSG works fine.

<link rel="stylesheet" href="/src/styles/container.module.css">

<style type="text/css" data-vite-dev-id="/home/predaytor/projects/astro-solid-duplicated-css/src/styles/container.module.css">
  ._container_19k93_1 {
      background-color: pink;
      inline-size: 300px;
      block-size: 300px;
      display: grid;
      place-items: center;
  }
</style>

Dev (hydration-off):

Dev (hydration-on):

Production (hydration-on):

Link to Minimal Reproducible Example

https://github.com/predaytor/astro-solid-duplicated-css

Participation

• I am willing to submit a pull request for this issue.