[Bug?]: Fragmented and imported css is injected into the body tag and causes html to repaint/shift

[ericarthurc]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

If you have a component that has its own imported css, and you import the component, the css for that component is built into its own .css file and gets injected into the body tag. This causes issues where the .css file downloads last and that component draws to the screen with no styling at first then flashes and redraws with its style.

So that counter button, this is from the basis template, has its own imported .css file. The css for that component injects into the body tag and is delievered after everything is already drawn to the screen. So that button will appear unstyled on inital loading, or renavigations back to the route its on.

Expected behavior 🤔

No response

Steps to reproduce 🕹

Steps:

1. Create a project
2. Import a compontent into a route with its own imported css
3. Inspect the source and dom

Context 🔦

No response

Your environment 🌎

System:
   OS: Windows 121
Binaries:
   Node: 23.0.0
npmPackages:
   solidjs/start: 1.0.9 (latest)

[ericarthurc]

This same behavior happens with module.css files as well.

If I just place everything in a single top level imported .css file, then this isn't an issue.. but that defeates the purpose of modulatrity.

[ericarthurc]

Also vite cssCodeSplit: false doesn't work. The css is compiled by vite down into a single file, but the generated .html files dont reference the .css file. So the site is just completetly unstyled.

  server: {
    static: true,
  },
  vite: {
    build: {
      cssCodeSplit: false,
    },
  },

[ryansolid]

I suspect you'd have this problem even if we were manually adding removing style tags from the head.. It is less about location and mostly about timing. Vinxi is handling CSS itself so I can imagine the Vite overloads not working. We need a way to delay rendering until we know the CSS is present I think. We have a lazy route component responsible for pulling stuff in. That's where the check needs to occur I imagine.

[will-chc]

Is this issue resolved?

[katywings]

@will-chc I just tried to reproduce this with a fresh SolidStart project and didn't notice a repaint/shift (dev & prod), so it seems this might be resolved. But the resulting html still looks like the right screenshot from the issue description, which makes me a bit hesitant to fully confirm that this issue is indeed 100% solved 😅 🙈.

[will-chc]

@katywings Thanks for the reply! I also created a new SolidStart project to test, and my results are the same as yours. The duplicated CSS, as mentioned in #1704, still exists.