Unexpected naming of output chunks when using `cssCodeSplit`

[jetwiwo]

Describe the bug

I am working on a project where we have a number of entry points which import a mix of JS and CSS files. Some files are shared, others are not.

Where two different entry points include the same JavaScript and CSS files, the naming of the output chunks is not what I would expect it to be.

As an example:

// index.ts
import './index.css';

import './some-css.css';
import './some-js.ts';

// index-2.ts
import './index-2.css';

import './some-js.ts';
import './some-css.css';

gives the following files:

vite v7.1.5 building for production...
✓ 6 modules transformed.
dist/assets/entry-1.css  0.03 kB │ gzip: 0.05 kB
dist/assets/entry-2.css  0.03 kB │ gzip: 0.05 kB
dist/assets/some-js.css  0.10 kB │ gzip: 0.05 kB
dist/my-app-entry-1.js   0.03 kB │ gzip: 0.05 kB
dist/my-app-entry-2.js   0.03 kB │ gzip: 0.05 kB
dist/shared-chunk.js     0.05 kB │ gzip: 0.07 kB
✓ built in 59ms

The unexpected aspect of this is that it's emitted the contents of some-css.css as some-js.css

I would expect either:

• some-js.js would be emitted with the JS contents and some-css.css is emitted with the CSS content, OR
• both files have some shared name related to the file that is importing them, rather than the files being imported.

NOTE: in my real use-case the file names are completely different as the JS and CSS aren't closely related, they just both happen to be imported from the same pair of files. The above is just an example.

I did some debugging and I think the Vite CSS plugin is allowing Rollup to generate a name for the Chunk, but Rollup can't come up with a good name so it falls back to the name of the last file imported (you can see this in action if you swap the order of the imports in the example). Ideally the plugin would pass a Chunk with just the JS imports to the JS processing and then another chunk with just the CSS imports. It might also be beneficial to give each chunk a name.

Another somewhat related issue is that the CSS asset being output doesn't receive the originalFileNames when using a assetFileNames/chunkFileNames callback which is interfering with my workflow for prefixing the file names with a certain subdirectory from the original file names, but it also prevents working around this issue by using the callbacks to override the name. This appears to be caused by the CSS chunk hardcoding an empty list of original files. If the plugin were to complete all of the metadata for the Chunk it would most likely solve both of these issues.

Reproduction

https://github.com/jetwiwo/vite-repro-css-js-naming-issue

Steps to reproduce

Run npm install then npm run build

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 14.82 GB / 31.91 GB
  Binaries:
    Node: 22.16.0 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (139.0.3405.125)
  npmPackages:
    vite: ^7.1.2 => 7.1.5

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.