[css] Removing empty css causes invalid code to be generated

[susnux]

Describe the bug

I have some code that imports code that uses dependencies that can not be treeshaken or have side effects, the code is written in Vue, meaning there are styles injected.

I then try to create a cjs output (library mode), the "generate bundle" part of the css plugin removes the empty css import.
But it replaces too much of the code.

To make it clearer, the code that vite produces and passes to the css plugin:

/* ... */;require("vue"),require("foo"),require("../chunks/MentionBubble.vue_vue_type_style_index_0_scoped_357e6d0e_lang-072bbb05.cjs");const o=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");/* ... */

Code after the css plugin removes the import:

/* ... */;require("vue"),require("foo"),/* empty css                                                                                    */const o=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");/* ... */

As you can see it also removes the ; which results in invalid code, as no it looks like this:

require('foo'),const o = require('...')

which is invalid (the ; before the const was required but is removed).

Reproduction

https://github.com/nextcloud-libraries/nextcloud-vue/tree/2a73983387987702f48814de0243fec0a7a3eeb2

Steps to reproduce

1. npm ci
2. npm run build
3. see dist/Components/NcHeaderMenu.cjs

System Info

System:
    OS: Linux 6.5 openSUSE Tumbleweed 20230926
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 3.55 GB / 14.97 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.7.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.1.0 - /usr/bin/npm
  Browsers:
    Chromium: 117.0.5938.92
  npmPackages:
    vite: ^4.3.9 => 4.4.9

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.

[susnux]

BTW the comma separated requires come from esbuild minifing the code.

Meaning I see two possible ways of fixing this:

1. Run the css plugin before the minify step.
2. Also remove a leading comma if available. (this seems to be error prone, so 1 is probably easier).