bridge css styles not applied after building

Environment

Operating System: Windows_NT
Node Version: v16.17.0
Nuxt Version: 2.16.0-27720022.54e852f
Nitro Version: 0.5.4
Package Manager: [email protected]
Builder: vite
User Config: bridge, vite, css, plugins, components, buildModules, modules, pwa, build, serverHandlers, devServerHandlers
Runtime Modules: -
Build Modules: (), @nuxt/[email protected]

Reproduction

https://stackblitz.com/edit/nuxt-starter-y8k5hw?file=nuxt.config.js

Describe the bug

in dev mode, all styles from nuxt.config.js > css applied as well. after building the project, css files not loaded.

Additional context

this bug appears after 3.0.0-27736739.990b28d version released.

Logs

No response

Sep 27 '22 17:09 alih70442

also pwa and icon modules don't work at all

Oct 10 '22 18:10 goncharof

The manifest at .output/server/chunks/app/client.manifest.mjs is not generated correctly, there is no css under entry-legacy.xxx.js entry.

This is in turn caused by .nuxt/dist/client/manifest.json not including css under .nuxt/client-legacy.js entry.

Nov 01 '22 10:11 IlyaSemenov

FWIW, I managed to fix the problem by the following pnpm patch patches/[email protected]:

diff --git a/dist/node/chunks/dep-4da11a5e.js b/dist/node/chunks/dep-4da11a5e.js
index ef2d5d810506e20169239232d9972f1adf9bcdd8..114693e1473f068b95f016efa096ddf992521413 100644
--- a/dist/node/chunks/dep-4da11a5e.js
+++ b/dist/node/chunks/dep-4da11a5e.js
@@ -44284,7 +44284,7 @@ function cssPostPlugin(config) {
                     // this is a shared CSS-only chunk that is empty.
                     pureCssChunks.add(chunk.fileName);
                 }
-                if (opts.format === 'es' || opts.format === 'cjs') {
+                if (opts.format === 'es' || opts.format === 'cjs' || opts.format === 'system') {
                     const cssAssetName = chunk.facadeModuleId
                         ? normalizePath$3(path$n.relative(config.root, chunk.facadeModuleId))
                         : chunk.name;

With that, @vite/plugin-legacy starts injecting CSS into legacy chunks, which then makes its way into Nuxt/Nitro SSR bundle. I am not sure if that is a valid approach at all - it just happens to work.

If someone has time to come up with a minimal reproduction repo, please open an upstream issue.

Nov 01 '22 12:11 IlyaSemenov

I suspect the actual fix would be serving modern format scripts in addition to legacy (#15), and pull css information from modern format chunks.

Nov 07 '22 05:11 IlyaSemenov

Note that upgrading vite to 3.2.x makes it work (thanks to https://github.com/vitejs/vite/pull/10496), however it leads to FOUC because styles are inlined rather than injected via <link rel="stylesheet">. The patch above delivers better result.

Nov 08 '22 06:11 IlyaSemenov

Any news on this one? Running a new nuxt 2 + bridge build, it seems that global css styles aren't applied