empty css rollup input generates empty js output

[MoritzLoewenstein]

What I am doing

Empty CSS (or SCSS) file as input in vite rollupOptions config.

export default {
  build: {
    manifest: true,
    rollupOptions: {
      input: [/* 'test.scss', */ 'test.css'],
    },
  },
};

What i expect to happen

I expected either no output for this file (and no manifest entry),
or an empty css file output and a manifest entry like this:

{
  "test.css": {
    "file": "assets/test-l0sNRNKZ.css",
    "name": "test",
    "src": "test.css",
    "isEntry": true
  }
}

What is actually happening

Vite generates an empty js file as output when running vite build, e.g. this manifest entry:

{
  "test.css": {
    "file": "assets/test-l0sNRNKZ.js",
    "name": "test",
    "src": "test.css",
    "isEntry": true
  }
}

Note: the stackblitz reproduction does error when compiling scss, but the same thing happens when building an empty scss file.

Reproduction

https://stackblitz.com/edit/vite-empty-css-fzjoe4md?file=vite.config.js

Steps to reproduce

Run npm install followed by npm run build

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: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^6.3.3 => 6.3.3

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.

[nakul-py]

Hey @MoritzLoewenstein, Vite skips empty CSS files during build. You can add a dummy class (like :root {}) to make sure it's processed and output as a .css file.

Results

Before adding dummy class.

After adding dummy class.

[MoritzLoewenstein]

Hey @nakul-py ,
this is true, but when using lightningcss as the css transformer the same thing happens for every css file that minifies to an empty file (which may not always be obvious): vite-empty-css-fzjoe4md-k3rcgpsn
Note: lightningcss does not seem to work on stackblitz, only the vite config changed from the previous reproduction.

[nakul-py]

Hey @MoritzLoewenstein If test.css is empty or only has comments, LightningCSS might be stripping it all out. I hope this works vite-empty-css

[MoritzLoewenstein]

This will "work" in the sense that it will generate a css output file, my issue is that I am building a custom vite php integration which will read the manifest. It just seems illogical that a css/scss entry can generate a js output in any case. If that is expected I will handle it in my integration, I was just thinking that it seems unintuitive / appears to be a bug.

[0xlakshan]

Hey, after looking into it, I found that the build error is gone in Vite version 7, which is great! But I’m still seeing an issue where an empty CSS file results in an empty JavaScript file. Digging deeper, I noticed that both empty and non-empty CSS files send the same metadata to Rollup for bundling.

I think this might be an upstream bug. Could you, @sapphi-red, please take a look to verify? Adding the upstream label would really help clarify where this issue is coming from. Thanks

[sapphi-red]

Digging deeper, I noticed that both empty and non-empty CSS files send the same metadata to Rollup for bundling.

@0xlakshan Would you elaborate what you mean by the same metadata?

[0xlakshan]

Hi, by metadata I was referring to the data objects passed into Rollup at the following two points. (rollupOptions & ouput) these objects are used by Rollup during the build process:

Here in line 822

vite/packages/vite/src/node/build.ts

Lines 820 to 822 in 1aae595

	const { rollup } = await import('rollup')
	startTime = Date.now()
	bundle = await rollup(rollupOptions)

Here in line 830

vite/packages/vite/src/node/build.ts

Lines 829 to 831 in 1aae595

	for (const output of normalizedOutputs) {
	res.push(await bundle[options.write ? 'write' : 'generate'](output))
	}

I compared diff of these data objects (rollupOptions and output) and in both scenarios: one where I built the project with an empty CSS file and another where I built it with a non-empty CSS file. However, I found no noticeable differences that could have caused this bug.

[sapphi-red]

That doesn't necessarily mean it’s an upstream bug. Vite's internal plugins can modify the inputs and outputs, but those changes may not be observable there.