css styles not applied after building

[alih70442]

Environment

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

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

[goncharof]

also pwa and icon modules don't work at all

[IlyaSemenov]

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.

[IlyaSemenov]

FWIW, I managed to fix the problem by the following pnpm patch patches/vite@3.1.8.patch:

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.

[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.

[IlyaSemenov]

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

[maxarias-io]

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

[AndreyYolkin]

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

#561 (comment) helps both with 3.1.x and 3.2.x

[wattanx]

Is this still occurring? If so, please provide a reproduction 🙏

[AndreyYolkin]

Is this still occurring? If so, please provide a reproduction 🙏

Repo:

https://github.com/AndreyYolkin/bridge-missing-css

Dev:

Prod:

Output:

[wattanx]

Resolved by #1164
If you want to use it quickly, you can use @nuxt/bridge-edge@3.1.0-28536231.051ed68.

https://stackblitz.com/edit/github-yueotr