missing css in client manifest legacy chunks

[IlyaSemenov]

Describe the bug

When I generate a client manifest with @vitejs/plugin-legacy plugin enabled, legacy chunks are missing css entries.

Example:

{
  "index-legacy.html": {
    "file": "assets/index-legacy.1b2bcd2a.js",
    "src": "index-legacy.html",
    "isEntry": true
  },
  "vite/legacy-polyfills-legacy": {
    "file": "assets/polyfills-legacy.907dbd91.js",
    "src": "vite/legacy-polyfills-legacy",
    "isEntry": true
  },
  "index.html": {
    "file": "assets/index.9f336c05.js",
    "src": "index.html",
    "isEntry": true,
    "css": [
      "assets/index.824f0ed3.css"
    ]
  },
  "index.css": {
    "file": "assets/index.824f0ed3.css",
    "src": "index.css"
  }
}

In the example above, index.html includes a css dependency, but the respective index-legacy.html does not.

This is affecting third party libraries which rely on the manifest to inject the respective<link rel="stylesheet"> into HTML head. For example: nuxt/bridge#561.

Reproduction

https://stackblitz.com/edit/vitejs-vite-mjitx2?file=dist/manifest.json

Steps to reproduce

Run npm install followed by npm run build. Examine dist/manifest.json.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-legacy: ~2.3.0 => 2.3.0 
    vite: ~3.2.1 => 3.2.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[IlyaSemenov]

My naive hotfix for the time being is using the following pnpm 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;

This is simply based on the fact that plugin-legacy sets system for the output format:

vite/packages/plugin-legacy/src/index.ts

Lines 323 to 328 in 1f57f84

	const createLegacyOutput = (
	options: OutputOptions = {}
	): OutputOptions => {
	return {
	...options,
	format: 'system',

I am not competent enough to tell if this is a valid approach or if it will break things under different circumstances.

[sapphi-red]

This is expected because legacy chunks uses the inlined CSS (#2062).

[IlyaSemenov]

I see. So I suppose that's a downstream problem in the sense that any downstream app should not rely on legacy chunks only?

[sapphi-red]

I guess using only legacy chunks will work because all the CSS used are inlined. Maybe you faced a bug caused by #9761 that affected Vite 3.1.x?
It's fixed in 3.2.0 so upgrading Vite might work.

[IlyaSemenov]

Right, pinning vite to 3.2.3 makes nuxt-bridge work, however the result is unsatisfactory. Inlining CSS in a SSR build leads to the flash of unstyled content (FOUC). The server delivers pre-rendered HTML but the styles only appear after the entire set of scripts loads and starts. Legacy clients with no javascript (e.g. web crawlers) don't get any styles at all.

I am not sure how to proceed here from the triage point of view. On the one hand, vite 3.2 works "as expected". On the other hand, the current "expected" behaviour is not friendly to the downstream SSR tooling that operates with legacy chunks.

[sapphi-red]

I think we can close this issue because avoiding inlining CSS in legacy is tracked in #2062.