bug #67 [Vite] Skip pruned CSS-only chunks in preload and dynamic (Kocal)

This PR was merged into the main branch.

Discussion
----------

[Vite] Skip pruned CSS-only chunks in preload and dynamic

| Q              | A
| -------------- | ---
| Bug fix?       | yes
| New feature?   | no
| Deprecations?  | no
| Documentation? | no
| Issues         | -
| License        | MIT

A bare CSS dynamic import (`import('some.css')`, e.g. a lazy Stimulus controller with an `autoimport` stylesheet) makes rolldown-vite emit a CSS-only chunk: its JS is emptied and never written to disk, but the name still shows up in the entry's `imports`/`dynamicImports`. The Vite collector forwarded those names into `entrypoints.json`, so `dynamic`/`preload` pointed at a `.js` that does not exist and, with SRI enabled, the build crashed reading it.

`emittedChunks()` now filters those lists down to names backed by a real, non-empty chunk. Rspack is unaffected. Tests: a Vite integration repro (with SRI) mirrored on Rsbuild, plus a collector unit test.

Commits
-------

9bf1deb [Vite] Skip pruned CSS-only chunks in preload and dynamic

Author: Kocal

assets/src/collectors/vite.ts

@@ -28,8 +28,8 @@ export function bundleToGraph(bundle: Rollup.OutputBundle, root: string): Normal
             entryPoints[chunk.name] = {
                 js: [chunk.fileName],
                 css,
-                preload: [...chunk.imports],
-                dynamic: [...chunk.dynamicImports],
+                preload: emittedChunks(chunk.imports, bundle),
+                dynamic: emittedChunks(chunk.dynamicImports, bundle),
             };
             assets.push({ logicalName: `${chunk.name}.js`, fileName: chunk.fileName });
         } else if (chunk.viteMetadata) {
@@ -47,6 +47,17 @@ export function bundleToGraph(bundle: Rollup.OutputBundle, root: string): Normal
     return { entryPoints, assets };
 }
 
+// A bare `import('x.css')` yields a CSS-only proxy chunk whose JS is empty or whitespace (`''` under
+// rolldown-vite, `'\n'` under Rollup/Vite 7) and is never written to disk, yet its name still shows up in
+// the entry's imports/dynamicImports. Keep only names backed by a chunk that has real JS, so preload and
+// SRI never reference a file that was never written.
+function emittedChunks(names: readonly string[], bundle: Rollup.OutputBundle): string[] {
+    return names.filter((name) => {
+        const output = bundle[name];
+        return output?.type === 'chunk' && output.code.trim() !== '';
+    });
+}
+
 // Collect an entry's CSS: its own `importedCss` plus that of every statically-imported chunk, reached
 // transitively. Static imports only — dynamic-import CSS loads with its chunk and stays out of the entry.
 function collectEntryCss(entry: ViteOutputChunk, bundle: Rollup.OutputBundle): string[] {

assets/test/collectors/vite.test.ts

@@ -7,6 +7,7 @@ function chunk(partial: Partial<Rollup.OutputChunk> & { fileName: string; name:
         type: 'chunk',
         imports: [],
         dynamicImports: [],
+        code: 'export {};',
         ...partial,
     };
 }
@@ -30,6 +31,7 @@ describe('bundleToGraph', () => {
             },
             'admin-99.js': chunk({ fileName: 'admin-99.js', name: 'admin', isEntry: true }),
             'vendor-e5.js': chunk({ fileName: 'vendor-e5.js', name: 'vendor', isEntry: false }),
+            'lazy-x.js': chunk({ fileName: 'lazy-x.js', name: 'lazy-x', isEntry: false }),
             'app-c3.css': asset('app-c3.css', ['app.css']),
         } as unknown as Rollup.OutputBundle;
 
@@ -45,6 +47,27 @@ describe('bundleToGraph', () => {
         expect(graph.entryPoints.vendor).toBeUndefined();
     });
 
+    it('drops a CSS-only dynamic import whose chunk was pruned to empty JS', () => {
+        // `import('x.css')` yields a chunk rolldown-vite empties (code === '') and never writes; its name
+        // still shows in dynamicImports. It must be dropped, and its async CSS kept out of the manifest.
+        const bundle = {
+            'app.js': {
+                ...chunk({ fileName: 'app.js', name: 'app', isEntry: true, dynamicImports: ['lazy-css.js'] }),
+                viteMetadata: { importedCss: new Set<string>(), importedAssets: new Set() },
+            },
+            'lazy-css.js': {
+                ...chunk({ fileName: 'lazy-css.js', name: 'lazy-css', isEntry: false, code: '' }),
+                viteMetadata: { importedCss: new Set(['lazy-css.css']), importedAssets: new Set() },
+            },
+            'lazy-css.css': asset('lazy-css.css', ['lazy-css.css']),
+        } as unknown as Rollup.OutputBundle;
+
+        const graph = bundleToGraph(bundle, '/app');
+
+        expect(graph.entryPoints.app.dynamic).toEqual([]);
+        expect(graph.assets.some((a) => a.fileName === 'lazy-css.css')).toBe(false);
+    });
+
     it('collects entry CSS from a facade chunk that only re-imports the real chunk', () => {
         // Rollup emits a thin *facade* entry (e.g. when the entry uses top-level await) that just re-imports
         // the real chunk; the CSS then rides on that statically-imported chunk, not the facade itself.

assets/test/fixtures/dynamic-css/app.js

@@ -0,0 +1,5 @@
+// A CSS-only dynamic import: rolldown-vite prunes the async JS chunk but still lists its name in
+// dynamicImports. Mirrors a lazy UX Stimulus controller whose autoimport is a stylesheet.
+window.addEventListener('DOMContentLoaded', () => {
+    import('./lazy.css');
+});

assets/test/fixtures/dynamic-css/lazy.css

@@ -0,0 +1,3 @@
+.lazy {
+    color: rebeccapurple;
+}

assets/test/integration/dynamic-css-integrity.test.ts

@@ -0,0 +1,64 @@
+import { existsSync, mkdtempSync, readdirSync, readFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { createRsbuild } from '@rsbuild/core';
+import { build } from 'vite';
+import { describe, expect, it } from 'vitest';
+import SymfonyRsbuild from '../../src/rsbuild';
+import SymfonyVite from '../../src/vite';
+
+// A CSS-only dynamic import (`import('x.css')`) makes rolldown-vite prune the async JS chunk while still
+// listing its name in dynamicImports. The collector must not carry that phantom into `dynamic`, or SRI
+// (integrityFromDisk) crashes reading a file that was never written. Common in the wild: a lazy UX
+// Stimulus controller whose autoimport is a stylesheet.
+const fixture = join(import.meta.dirname, '../fixtures/dynamic-css');
+
+function referenced(app: { js: string[]; css: string[]; preload: string[]; dynamic: string[] }): string[] {
+    return [...app.js, ...app.css, ...app.preload, ...app.dynamic];
+}
+
+describe('CSS-only dynamic import leaves no phantom in `dynamic` (Vite/Rsbuild parity)', () => {
+    it('vite: integrity build succeeds and every referenced file exists on disk', async () => {
+        const out = mkdtempSync(join(tmpdir(), 'ups-dyncss-vite-'));
+        await build({
+            root: fixture,
+            logLevel: 'silent',
+            build: { emptyOutDir: true, rollupOptions: { input: { app: join(fixture, 'app.js') } } },
+            plugins: [SymfonyVite({ outputPath: out, publicPath: '/build/', integrity: { enabled: true } })],
+        });
+
+        const entry = JSON.parse(readFileSync(join(out, 'entrypoints.json'), 'utf8'));
+        for (const ref of referenced(entry.entryPoints.app)) {
+            expect(existsSync(join(out, ref.replace(/^build\//, '')))).toBe(true);
+        }
+        for (const ref of Object.keys(entry.integrity ?? {})) {
+            expect(existsSync(join(out, ref.replace(/^build\//, '')))).toBe(true);
+        }
+        // the stylesheet is still emitted, it just carries no phantom JS reference
+        expect(readdirSync(out).some((f) => f.endsWith('.css'))).toBe(true);
+    }, 30_000);
+
+    it('rsbuild: integrity build succeeds and every referenced file exists on disk', async () => {
+        const out = mkdtempSync(join(tmpdir(), 'ups-dyncss-rsbuild-'));
+        const rsbuild = await createRsbuild({
+            cwd: fixture,
+            rsbuildConfig: {
+                mode: 'production',
+                source: { entry: { app: join(fixture, 'app.js') } },
+                plugins: [
+                    SymfonyRsbuild({
+                        outputPath: out,
+                        publicPath: '/build/',
+                        integrity: { enabled: true, algorithms: ['sha384'] },
+                    }),
+                ],
+            },
+        });
+        await rsbuild.build();
+
+        const entry = JSON.parse(readFileSync(join(out, 'entrypoints.json'), 'utf8'));
+        for (const ref of referenced(entry.entryPoints.app)) {
+            expect(existsSync(join(out, ref.replace(/^build\//, '')))).toBe(true);
+        }
+    }, 60_000);
+});