bug #20 [Manifest] Drop async chunk CSS from the Vite manifest (Kocal)

This PR was merged into the main branch.

Discussion
----------

[Manifest] Drop async chunk CSS from the Vite manifest

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Deprecations? | no
| Issues        | Fix #18
| License       | MIT

## What

Async (non-entry) chunk CSS is no longer written to the Vite manifest. For example, `build/map_controller.css` for the ``@symfony`/ux-leaflet-map` lazy controller's stylesheet used to get a manifest entry; it doesn't anymore.

## Why

That CSS is loaded at runtime by the bundler itself when the lazily-imported chunk is pulled in. Twig's `asset()` never looks it up, so the manifest entry was just a byproduct, and a harmful one: it diverged from Rsbuild, which never listed these files in the first place, and it could collide when two async chunks shared a name. A local `map_controller` Stimulus controller and the ``@symfony`/ux-leaflet-map` package's `map_controller` both produce a `build/map_controller.css`, so one silently overwrote the other in the manifest.

## Kept

Entry CSS is untouched (rendered through entrypoints.json / the link tags, keyed by a unique entry name like `build/app.css`), and imported assets are untouched (path-keyed since #17). The async chunk's CSS file is still emitted to disk, it just no longer gets a manifest key.

Verified in the playground: `build/map_controller.css` is gone from the Vite manifest, entry and imported-asset keys are unchanged. Vite now matches Rsbuild here.

## Testing

Unit tests on the collector (async chunk CSS dropped, two same-named async chunks producing no colliding key, entry CSS kept) plus an integration test where an entry lazily imports a module with its own CSS, asserting it's absent from both the Vite and Rsbuild manifest while still emitted on disk.

Commits
-------

2b733f0 [Manifest] Drop async chunk CSS from the Vite manifest

Author: Kocal

assets/src/collectors/vite.ts

@@ -10,40 +10,47 @@ type ViteOutputChunk = Rollup.OutputChunk & { viteMetadata?: ViteChunkMetadata }
 export function bundleToGraph(bundle: Rollup.OutputBundle, root: string): NormalizedGraph {
     const entryPoints: Record<string, EntryFiles> = {};
     const assets: AssetEntry[] = [];
-    // File names of the CSS emitted for any chunk (entry or lazily-imported). It stays keyed by its
-    // logical name (e.g. `app.css`, `map_controller.css`), matching Rsbuild's chunk-name keying;
-    // Vite reports its `originalFileNames` as the importing JS module, so the source-path branch
-    // below (for imported images/fonts) must not apply to it.
-    const chunkCss = new Set<string>();
+    // Entry CSS stays in the manifest, keyed by its logical name (e.g. `app.css`, matching Rsbuild's
+    // chunk-name keying). Async (non-entry) chunk CSS does not: it loads at runtime with its lazily
+    // imported chunk, never via `asset()`, so a manifest entry would only be a byproduct that diverges
+    // from Rsbuild and collides when two chunks share a name. Both kinds report `originalFileNames` as
+    // the importing JS, so neither must reach the source-path branch (that is for imported images/fonts).
+    const entryCss = new Set<string>();
+    const asyncCss = new Set<string>();
 
     for (const file of Object.values(bundle)) {
         if (file.type !== 'chunk') continue;
         const chunk = file as ViteOutputChunk;
         const css = chunk.viteMetadata ? [...chunk.viteMetadata.importedCss] : [];
-        for (const name of css) chunkCss.add(name);
-        if (!chunk.isEntry) continue;
-        entryPoints[chunk.name] = {
-            js: [chunk.fileName],
-            css,
-            preload: [...chunk.imports],
-            dynamic: [...chunk.dynamicImports],
-        };
-        assets.push({ logicalName: `${chunk.name}.js`, fileName: chunk.fileName });
+        if (chunk.isEntry) {
+            for (const name of css) entryCss.add(name);
+            entryPoints[chunk.name] = {
+                js: [chunk.fileName],
+                css,
+                preload: [...chunk.imports],
+                dynamic: [...chunk.dynamicImports],
+            };
+            assets.push({ logicalName: `${chunk.name}.js`, fileName: chunk.fileName });
+        } else {
+            for (const name of css) asyncCss.add(name);
+        }
     }
 
     for (const file of Object.values(bundle)) {
         if (file.type !== 'asset') continue;
-        assets.push({ logicalName: assetLogicalName(file, root, chunkCss), fileName: file.fileName });
+        // Drop async-only chunk CSS (see above); entry CSS (also referenced by an entry) is kept.
+        if (asyncCss.has(file.fileName) && !entryCss.has(file.fileName)) continue;
+        assets.push({ logicalName: assetLogicalName(file, root, entryCss), fileName: file.fileName });
     }
 
     return { entryPoints, assets };
 }
 
-function assetLogicalName(file: Rollup.OutputAsset, root: string, chunkCss: Set<string>): string {
+function assetLogicalName(file: Rollup.OutputAsset, root: string, entryCss: Set<string>): string {
     // Imported assets (images, fonts) get their source path relative to the project root, so the
     // manifest key matches Rsbuild's `sourceFilename` and same-basename files in different folders
-    // stay distinct. Chunk CSS and assets with no source path fall back to the basename.
-    const original = chunkCss.has(file.fileName) ? undefined : file.originalFileNames[0];
+    // stay distinct. Entry CSS and assets with no source path fall back to the basename.
+    const original = entryCss.has(file.fileName) ? undefined : file.originalFileNames[0];
     if (original) return slash(relative(root, resolve(root, original)));
     return file.names[0] ?? file.fileName;
 }

assets/test/collectors/vite.test.ts

@@ -109,26 +109,36 @@ describe('bundleToGraph', () => {
         expect(graph.assets.some((a) => a.logicalName === 'assets/app.js')).toBe(false);
     });
 
-    it('keeps async (non-entry) chunk CSS keyed by name, not its importing module path', () => {
+    it('drops async (non-entry) chunk CSS from the manifest (byproduct; avoids same-name collisions)', () => {
         const bundle = {
             'app-a1b2.js': chunk({ fileName: 'app-a1b2.js', name: 'app', isEntry: true }),
-            // A lazily-imported controller: its chunk is not an entry, but it still pulls in CSS whose
-            // originalFileNames points at the importing JS (here inside node_modules).
-            'map-x.js': {
-                ...chunk({ fileName: 'map-x.js', name: 'map_controller', isEntry: false }),
-                viteMetadata: { importedCss: new Set(['map-c.css']), importedAssets: new Set() },
+            // Two lazily-imported controllers sharing a name (a local one and a package one) both emit
+            // CSS named `map_controller.css`. Keeping them would collide on a single manifest key; they
+            // load at runtime with their chunk, never via asset(), so drop them entirely.
+            'localMap.js': {
+                ...chunk({ fileName: 'localMap.js', name: 'map_controller', isEntry: false }),
+                viteMetadata: { importedCss: new Set(['localMap.css']), importedAssets: new Set() },
             },
-            'map-c.css': asset(
-                'map-c.css',
+            'pkgMap.js': {
+                ...chunk({ fileName: 'pkgMap.js', name: 'map_controller', isEntry: false }),
+                viteMetadata: { importedCss: new Set(['pkgMap.css']), importedAssets: new Set() },
+            },
+            'localMap.css': asset(
+                'localMap.css',
+                ['map_controller.css'],
+                ['/app/assets/controllers/map_controller.js']
+            ),
+            'pkgMap.css': asset(
+                'pkgMap.css',
                 ['map_controller.css'],
                 ['/app/node_modules/@x/ux-map/dist/map_controller.js']
             ),
         } as unknown as Rollup.OutputBundle;
 
         const graph = bundleToGraph(bundle, '/app');
 
-        expect(graph.assets).toContainEqual({ logicalName: 'map_controller.css', fileName: 'map-c.css' });
-        expect(graph.assets.some((a) => a.logicalName.includes('node_modules'))).toBe(false);
+        expect(graph.assets.some((a) => a.fileName === 'localMap.css' || a.fileName === 'pkgMap.css')).toBe(false);
+        expect(graph.assets.some((a) => a.logicalName === 'map_controller.css')).toBe(false);
     });
 });
 

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

@@ -0,0 +1 @@
+import('./widget.js').then((m) => console.log(m.w));

assets/test/fixtures/async-css/widget.css

@@ -0,0 +1 @@
+.widget { color: blue; }

assets/test/fixtures/async-css/widget.js

@@ -0,0 +1,2 @@
+import './widget.css';
+export const w = 1;

assets/test/integration/async-chunk-css.test.ts

@@ -0,0 +1,48 @@
+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';
+
+// The entry lazily imports a module that pulls in its own CSS. That CSS ships as an async chunk
+// stylesheet, loaded at runtime with the chunk (never via asset()), so it must not appear in
+// manifest.json — Rsbuild already omits it, and keeping it in Vite caused a divergence and a
+// same-name collision (see the collector unit tests).
+const fixture = join(import.meta.dirname, '../fixtures/async-css');
+
+describe('async chunk CSS is kept out of the manifest (Vite/Rsbuild parity)', () => {
+    it('vite omits the async chunk CSS but still emits the file', async () => {
+        const out = mkdtempSync(join(tmpdir(), 'ups-async-vite-'));
+        await build({
+            root: fixture,
+            logLevel: 'silent',
+            build: { emptyOutDir: true, rollupOptions: { input: { app: join(fixture, 'app.js') } } },
+            plugins: [SymfonyVite({ outputPath: out, publicPath: '/build/' })],
+        });
+
+        const manifest = JSON.parse(readFileSync(join(out, 'manifest.json'), 'utf8'));
+        expect(Object.keys(manifest).some((k) => k.includes('widget'))).toBe(false);
+        // The stylesheet is still emitted to disk, it just has no manifest key.
+        expect(readdirSync(out).some((f) => f.endsWith('.css'))).toBe(true);
+    }, 30_000);
+
+    it('rsbuild also omits the async chunk CSS', async () => {
+        const out = mkdtempSync(join(tmpdir(), 'ups-async-rsbuild-'));
+        const rsbuild = await createRsbuild({
+            cwd: fixture,
+            rsbuildConfig: {
+                mode: 'production',
+                source: { entry: { app: join(fixture, 'app.js') } },
+                plugins: [SymfonyRsbuild({ outputPath: out, publicPath: '/build/' })],
+            },
+        });
+        await rsbuild.build();
+
+        const manifest = JSON.parse(readFileSync(join(out, 'manifest.json'), 'utf8'));
+        expect(Object.keys(manifest).some((k) => k.includes('widget'))).toBe(false);
+        expect(existsSync(join(out, 'manifest.json'))).toBe(true);
+    }, 60_000);
+});