FOUC after Nuxt 3.10.2 update

[mitjans]

Environment

---

• Operating System: Darwin
• Node Version: v20.11.0
• Nuxt Version: 3.10.1
• CLI Version: 3.10.1
• Nitro Version: -
• Package Manager: pnpm@8.15.2
• Builder: -
• User Config: devtools, css
• Runtime Modules: -
• Build Modules: -

---

Reproduction

I haven't been able to reproduce it in Stackblitz, but the following steps should work:

1. Create a new project

   $ pnpx nuxi@latest init fouc

2. Create the following file assets/css/main.css:

   body {
     background-color: greenyellow;
   }

3. Change app.vue:

   <template>
     <div>
       Hello world
     </div>
   </template>

4. Add the file to nuxt.config.ts:

   export default defineNuxtConfig({
     css: ['assets/css/main.css'],
   })

5. Start the dev server and refresh the page multiple times:

   $ pnpm dev

You will notice that there's FOUC in the body styles. It is much more prominent when there are multiple styles applied, or a tool like Tailwindcss is used.
If you fix the Nuxt version to 3.10.1 with the following change in package.json it works correctly:

"resolutions": {
  "nuxt": "3.10.1"
}

Describe the bug

FOUC for global css styles passed to nuxt.config.ts.

Additional context

I haven't been able to pinpoint the commit that causes this issue, but looking at the release notes of Nuxt 3.10.2 it might be related to the following PR:

• Inline entry styles before component styles (fix(nuxt): inline entry styles before component styles #25749)

Logs

No response

[becem-gharbi]

I've noticed that this occurs on Windows and not Linux, with external and not inline styles, in dev and not in prod. Maybe this is related to Vite.

[becem-gharbi]

The solution to me was to downgrade vite to v5.0.12 and run npx nuxi upgrade --force.

{
  "overrides": {
    "vite": "5.0.12"
  },
  "resolutions": {
    "vite": "5.0.12"
  }
}

[danielroe]

Yes, this is a vite issue. It will be resolved with vitejs/vite#15919

[patak-dev]

This should be fixed in vite@5.1.3. Thanks for the help debugging this regression @danielroe! ❤️

[rylanharper]

Hey @patak-dev just curious what the best way to pull in the latest vite changes into a Nuxt project is? Simply by just installing vite, or will this be added to the next release of Nuxt? Sorry, I'm unfamiliar with using vite in my projects as a direct dependency..

I regenerated my pnpm-lock.yaml file, but keep getting vite@5.1.1 🤔