vite: { legacy: false }: In SSR build, styles are not extracted correctly

[medz]

Environment

---

• Operating System: Darwin
• Node Version: v22.9.0
• Nuxt Version: 2.18.1
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Nuxt Bridge：https://stackblitz.com/~/github.com/medz/github-avnkvf - ❌
Nuxt 3: https://stackblitz.com/~/github.com/medz/github-8bvs9l - ✅

<template>
  <div>
    <h1>test</h1>
  </div>
</template>

<style>
h1 {
  color: red;
}
</style>

import { defineNuxtConfig } from '@nuxt/bridge';

export default defineNuxtConfig({
  bridge: {
    vite: { legacy: false },
  }
});

Describe the bug

After running nuxi build, components or page styles are not extracted correctly

Additional context

Nuxt Bridge：

Nuxt 3:

Desc

By comparing the output of Nuxt Bridge and Nuxt 3, it is found that Nuxt Bridge does not extract css correctly, which causes the page style to be applied later.

Through the browser execution order, it is found that in Nuxt Bridge, the browser needs to download the component or page JS before applying the style in JS.

Correct behavior

Entering the page, the page and component styles should be extracted to the head (external css should set the correct link) but Nuxt Bridge + vite does not

Tip

It is worth noting that this behavior is correct in webpack.

The reason why I enabled vite is that Nuxt2 and Nuxt Bridge only use webpack@v4, which makes many tool chains unable to upgrade. (Most of them rely on webpack@v5)

Logs

No response

[medz]

This is very different from #1287. In the case of nuxi dev, the styles of all components and pages are loaded, so the style lag problem will no longer occur after the fix in #1287.
But the SSR app compiled by nuxi build still exists.