Code injection failed when multiple entries are importing a same style file.

[credred]

import './test.css' became /** empty css */`

I noticed that empty css is replaced by vite: css post

Here is the example

https://stackblitz.com/edit/vitejs-vite-7eeqqk?file=vite.config.ts&view=editor

[emosheeep]

Seems a little strange…but I'm too busy to work on this now. I’ll appreciate it if there’s anyone who can open a pull request🙏.

[emosheeep]

Reason

I dive deep into the source code of Vite and found that the common css file you referenced will be transform into a pureCssChunk like:

// common.Bkwfiy39.js
import "../assets/common.css";

And then you'll get import "./common.Bkwfiy39.js"; in the origin chunk

import { test as i } from "../common.js";
import "./common.Bkwfiy39.js"; // It's a common chunk.

But after the internal cssPostPlugin hook generateBundle was executed, all of the pureCssChunks imports were replaced with empty css comment.

import { test as i } from "../common.js";
/* empty css                */

But! Vite will pass the removed chunk's viteMetaData to the dependent chunk, which is done in generateChunk, here's detail:

// remove pure css chunk from other chunk's imports,
// and also register the emitted CSS files under the importer
// chunks instead.
chunk.imports = chunk.imports.filter((file) => {
  if (pureCssChunkNames.includes(file)) {
    const { importedCss, importedAssets } = bundle[file].viteMetadata;
    importedCss.forEach((file) => chunk.viteMetadata.importedCss.add(file));
    importedAssets.forEach((file) => chunk.viteMetadata.importedAssets.add(file));
    return false;
  }
  return true;
});

Conclusion

Our plugin finish code injection at renderChunk hook which is executed before generateChunk, that's what happened to you. Maybe I should consider how to complete it in generateChunk hook. 🤔🤔

[credred]

Thank you very much for taking the time to solve this problem. Have a nice weekend. 😀