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

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: npm@10.8.3
• 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

Start with the Nuxt Bridge reproduction and run nuxi build using bridge.vite.legacy: false, then compare the generated SSR output and style-loading order with the Nuxt 3 and webpack cases. Done means component and page styles are extracted into the document head, with external CSS using the correct link, without waiting for component or page JavaScript.