Start + Rsbuild: shared chunks cause CSS issues in the initial SSR response

[christiango]

Which project does this relate to?

Start

Describe the bug

In a production TanStack Start build using Rsbuild, two routes sharing a component with a CSS Module import receive incorrect stylesheet dependencies in their initial SSR responses.

The reproduction has /alpha and /beta, each importing a shared Header and its own route CSS. A Rspack cache group extracts the shared component into a separate chunk.

On the tested baseline:

/alpha receives its required styles but also receives /beta’s CSS.
/beta is missing the shared header stylesheet. Its header renders as display: block instead of grid, approximately 79px tall instead of 64px.
/ correctly loads only root styles.
This reproduces with JavaScript disabled, before hydration or client navigation. With JavaScript enabled, the missing stylesheet loads later and causes a layout shift.

Complete minimal reproducer

https://github.com/christiango/tanstack-rsbuild-css-repro

Steps to Reproduce the Bug

1. Clone and install:

git clone https://github.com/christiango/tanstack-rsbuild-css-repro.git
cd tanstack-rsbuild-css-repro
pnpm install
pnpm exec playwright install chromium
pnpm repro

2. Observe two failing browser tests: unrelated CSS on Alpha and missing shared-header CSS on Beta. The home-route control passes.3.
3. Run pnpm verify:repro. This confirms the expected failures, rebuilds with shared extraction disabled, and verifies that all three browser checks pass. Dynamic route imports remain split.
4. For manual inspection, run pnpm start, disable browser JavaScript, and open http://127.0.0.1:4317/beta.

pnpm test also contains isolated regressions for dependency mapping and cyclic CSS collection. Those assert correct behavior and fail on the affected baseline.

Expected behavior

The initial SSR response should include every stylesheet required by the matched route and its static dependencies, without including styles needed only by unrelated routes.

Both Alpha and Beta should render the shared header as a 64px grid before hydration. Results should not depend on manifest traversal order.

Screenshots or Videos

No response

Platform

OS: macOS, Apple Silicon
Browser: Chromium supplied by Playwright 1.60.0
Node: 24.15.0; pnpm: 11.25.0
@tanstack/react-start: 1.168.25
@tanstack/react-router: 1.170.15
@tanstack/start-plugin-core: 1.171.17
Bundler: Rsbuild 2.1.11, resolving Rspack 2.1.10 locally
React / React DOM: 19.2.4

Additional context

[This section is AI generated, I didn't have enough context in the codebase to prove/disprove this claim as the root cause]

The captured graph suggests two contributing defects:

1. computeAsyncChunkImports treats loading-group siblings as mutual imports. The shared header consequently appears to import its consuming routes, although its source does not.
   createChunkCssAssetCollector caches incomplete results after encountering dependency cycles, leaving later routes with missing CSS.
2. The fixture uses minSize: 0 and enforce: true to trigger shared extraction without artificially enlarging the component. This points to TanStack’s interpretation of Rspack’s graph, not incorrect CSS emission by Rspack.

Related reports: #4224 covered missing recursive CSS discovery; #7057 covered overwritten route entries; #8224 concerns CSS removal after client navigation; #8202 concerns Windows paths. This reproduction instead fails during initial SSR on macOS and demonstrates false dependency edges plus incomplete cycle caching.

[christiango]

AI generated fix, I'm validating if it fixes it first https://github.com/christiango/router/tree/fix/rsbuild-ssr-stylesheets-8415 in case that helps the tanstack team find the correct solution

[christiango]

Confirmed the vibecoded fix in that branch in fact fixes the issue, but I don't feel comfortable enough with the changes to open a PR off it

[christiango]

And here's copilot's description of the solution it came up with:

Summary

The pushed fix (5ee81b6185) addresses the underlying dependency-graph and caching problems in #8415, rather than loading all styles as a workaround. It also fixes the regression identified in the original proposal.

Assessment: a reasonable fix with moderate integration risk, not regression-proof. Automated coverage is substantially improved, but the original browser reproduction should pass against the patched package before merging.

What Changed

1. Dependencies Follow Actual Static Imports

Previously, chunks loaded together were treated as mutually dependent. A shared header chunk could therefore appear to depend on both routes using it, leaking Beta’s CSS into Alpha.

The new mapping follows directed module dependencies, checks whether they are active for the chunk’s runtime, and limits candidate chunks to its loading groups and their ancestors.

2. Duplicated Modules Do Not Create False Route Dependencies

Without shared extraction, Alpha and Beta can each contain their own copy of the shared component. Treating every chunk containing that component as a dependency incorrectly links the routes together.

The fix skips dependencies already satisfied inside the current chunk and excludes unrelated chunk placements. This corrects the regression found during the initial review.

3. Concatenated Modules and CSS-Only Chunks Are Handled

The normalizer inspects modules inside concatenated bundles and collects styles from dependency chunks without JavaScript assets. This prevents production optimizations from hiding route metadata or required stylesheets.

4. Cycles No Longer Produce Incomplete Cached CSS Lists

CSS collection now traverses dependencies independently for each requested chunk and caches only its completed result. Collecting Alpha first can no longer leave Beta with an incomplete cached stylesheet list.

There are no public API or configuration changes.

Verification

Real Rspack compilation tests cover eight combinations: four extraction modes, each with module concatenation enabled and disabled.

The tests verify:

• Exact route stylesheet and JavaScript preload lists.
• Root-route isolation and exclusion of lazy-only styles.
• Emission of the shared header’s CSS.
• Both route-processing orders.
• Parent dependencies, inactive connections, unrelated module copies, nested CSS-only dependencies, and cycle-cache completeness.

Formatting, lint, types, and affected unit checks passed before pushing. A fresh start-plugin-core run passed 551 tests. The type target used matching local Nx cache results.

Remaining Safety Concerns

• The shared collector also affects Vite-backed Start builds. The change is not entirely isolated to Rsbuild.
• CSS cascade ordering needs care. Covered acyclic cases assert ordering, but cycle tests check stylesheet membership rather than the computed result of conflicting selectors.
• Unusual chunk graphs have limited coverage. Multiple entrypoints/runtimes, complex parent-group combinations, custom extraction plugins, and other supported Rsbuild/Rspack versions are not comprehensively tested.
• Large builds may do more work. Independent CSS traversals repeat work across routes. No performance benchmark was run; this primarily affects builds and development rebuilds.

Recommended Merge Gates

1. Run the original reproduction against the patched package with JavaScript disabled, both with shared extraction enabled and disabled.
2. Verify hydration and Alpha/Beta/back navigation without missing styles, unrelated CSS, or layout shifts.
3. Run a Vite smoke test with shared/global CSS, including conflicting selectors to check cascade order.

These checks address the largest remaining regression risks without substantially expanding the implementation.