FOUC with full reload

[silveltman]

Describe the bug

My css, which is imported in main.js, is automatically inline in the head of the page when running the dev server. When running vite build and vite preview, it injects a link tag.

When running de dev server I am also experiencing a Flash of unstyled content (FOUC) when the page loads. This is very annoying, since I use vite-plugin-eleventy so rebuilds are a basic part of my dev experience.

I spent a lot of time searching on the web and in the issues, but can't seem to find the problem. It doesn't seem like normal behaviour.

Disclaimer: I'm very new to vite

I made my repo public for reproduction.

Reproduction

https://github.com/silveltman/vite-reproduction

System Info

windows 11
Firefox and Chrome (I tested those 2)
Npm 8.11.0
node v16.15.1

Dependencies can be found in the github repo

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[silveltman]

I would like to add to this that it makes working with gsap scrolltrigger nearly impossible, since the absense of style cause the content to jank. Therefore, it triggers animations that are not supposed to get triggered yet

[sapphi-red]

#4589 injects t=${timestamp} which changes every time hmr happens.
I suppose injecting t=${fullInitializeCount}which only change when circular dependency is detected instead of it will fix this. (Maybe #7893 could be done at the same time)

[Pyrolistical]

I ran into this as well and what is happening is because you are loading the css from javascript the browser think it can do the initial render.

You can workaround this if you can add a link to the css in the head.

Here is your repo with this change https://stackblitz.com/edit/github-9hxcqg?file=src/_includes/head.liquid

The css path is a little funky because its relative to src, not where the head.liquid file is defined.

[bluwy]

I'm not sure if there's something to fix here. As Pyrolistical pointed out, you're importing CSS from JS so there's bound to be a short period before the CSS is applied. If Vite has to analyze all the imports to inline into the HTML before responding it, it makes fetching the HTML much slower. Hence the optimization is only applied in builds.