manifest.json does not contain css files imported by js entry points any more

[helhum]

Describe the bug

In Vite 4, the manifest file contained CSS files that were imported in a JS entry point. In Vite 5 this is not the case any more.

To illustrate the changes in manifest.json generation I created a minimal project.

--- a/dist/manifest.json
+++ b/dist/manifest.json
@@ -1,13 +1,9 @@
 {
-  "main.css": {
-    "file": "assets/main-829fb0a8.css",
-    "src": "main.css"
-  },
   "main.js": {
     "css": [
-      "assets/main-829fb0a8.css"
+      "assets/foo-sok_4qEN.css"
     ],
-    "file": "assets/foo-b8911e79.js",
+    "file": "assets/foo-TcdXag5j.js",
     "isEntry": true,
     "src": "main.js"
   }

This change breaks my backend integration with vite, as I need to find the css file that is related to JS entry point separately.

Reproduction

https://github.com/helhum/vite-manifest/

Steps to reproduce

npm install followed by npm run build

System Info

System:
    OS: macOS 13.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 89.02 MB / 32.00 GB
    Shell: 5.2.15 - /opt/homebrew/bin/bash
  Binaries:
    Node: 20.3.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 16.6
  npmPackages:
    vite: ^5.0.2 => 5.0.2 

### Used Package Manager

npm

### Logs

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] 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](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[sapphi-red]

Yes, this is an intentional change.

First, the CSS file entry in the top-level object had the wrong key name. Instead of the original file name, it had the filename importing the CSS with .js replaced with .css as the key.
Second, the document doesn't say that the manifest contains a non-entry CSS file in the top-level object.
Third, it's not possible for Vite to know the original file name of the non-entry CSS file.

So there's two options you can take.

1. when injecting the JS file, inject the corresponding CSS file: it can be obtained from the css property. (This is the way written in the document)
2. if you need to inject the CSS file separately from JS file, add the CSS file in the entry point.

[bluwy]

It looks like we didn't document #14945 in the migration guide, maybe we can touch on it under the advanced section to clear things up.

[helhum]

It looks like we didn't document #14945 in the migration guide, maybe we can touch on it under the advanced section to clear things up.

Yes, mentioning that in the migration guide would actually help a lot.

1. when injecting the JS file, inject the corresponding CSS file: it can be obtained from the css property.
2. if you need to inject the CSS file separately from JS file, add the CSS file in the entry point.

I'm aware of these options, but thanks for clearing that up.

For the not so common use case to need both (separate injection and corresponding injection), a backend integration still can access the css file for a js entry point from the manifest.

Feel free to close once the migration guide is updated.