fix(start): align Rsbuild SSR asset URLs for css?url imports

[SyMind]

Fix #7543

• Align Rsbuild server public asset output paths with the client build so SSR css?url imports resolve to client-served asset URLs.
• Add an rsc-rsbuild e2e route that imports a stylesheet with ?url and verifies the actual element style is applied.
• Polish the rsc-rsbuild fixture homepage and node_modules client component page to match the main RSC fixture’s server/client visual style.

Summary by CodeRabbit

• Bug Fixes
  • Fixed SSR stylesheet asset URLs for ?url imports so server-rendered pages load the same public assets as the client.
• New Features
  • Added an end-to-end route showcasing CSS imported via ?url (including injection into the document head).
  • Enhanced the demo UI with richer styling, navigation, and clearer server/client/SSR sections.
• Tests
  • Added Playwright coverage to validate page rendering and confirm SSR-applied ?url styles.
• Chores
  • Updated TypeScript typings for *.css?url imports.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fb34bdca-f61e-4869-ae2a-00dfa3388101

📥 Commits

Reviewing files that changed from the base of the PR and between a716fed and a27e1b0.

📒 Files selected for processing (1)

• e2e/react-start/rsc-rsbuild/src/env.d.ts

✅ Files skipped from review due to trivial changes (1)

• e2e/react-start/rsc-rsbuild/src/env.d.ts

---

📝 Walkthrough

Walkthrough

Rsbuild planning now builds client, server, and provider asset paths through shared helpers. The e2e app adds a /rsc-css-url route with a css?url import, a Playwright check for its rendered styles, and refreshed example-page layouts.

Changes

Rsbuild asset URL alignment

Layer / File(s)	Summary
Rsbuild distPath helpers and release note packages/start-plugin-core/src/rsbuild/planning.ts, .changeset/fair-assets-align.md	createRsbuildEnvironmentPlan now builds client, server, and provider distPath objects through shared helpers, and the changeset records the patch bump for @tanstack/start-plugin-core.
/rsc-css-url route and stylesheet check e2e/react-start/rsc-rsbuild/src/env.d.ts, e2e/react-start/rsc-rsbuild/src/routes/rsc-css-url.tsx, e2e/react-start/rsc-rsbuild/src/routes/rsc-css-url.css, e2e/react-start/rsc-rsbuild/src/routeTree.gen.ts, e2e/react-start/rsc-rsbuild/tests/rsc-css-url.spec.ts	The new route imports rsc-css-url.css?url into SSR head, defines the card styles, registers the route in the generated tree, declares CSS module typings, and adds a Playwright assertion for the computed card background color.

E2E example page styling

Layer / File(s)	Summary
Home page navigation refresh e2e/react-start/rsc-rsbuild/src/routes/index.tsx	The home page now uses typed inline styles, a legend, test IDs, and a mapped example card grid built from link options.
Styled example content routes e2e/react-start/rsc-rsbuild/src/routes/rsc-node-module-client.tsx, e2e/react-start/rsc-rsbuild/src/utils/RscClientPkgContent.tsx	The node-module client route and shared client content component now use typed style maps, back navigation, structured content, and updated test IDs.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• TanStack/router#7477: Shares the packages/start-plugin-core/src/rsbuild/planning.ts path and rsbuild environment output wiring.
• TanStack/router#7509: Touches the same rsbuild planning and asset-path setup used by the new SSR asset URL flow.

Suggested labels

package: start-plugin-core, package: react-start-rsc

Suggested reviewers

• beaussan
• SeanCassiere

Poem

🐇 I hopped through paths both new and neat,
And CSS URLs found their seat.
The SSR head now wears a bow,
While example cards bloom row by row.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title is concise and accurately describes the main Rsbuild SSR asset URL fix for css?url imports.
Linked Issues check	✅ Passed	The changes mirror client/server asset paths in Rsbuild planning and add e2e coverage for the css?url SSR case, matching #7543.
Out of Scope Changes check	✅ Passed	The route tree, typings, and fixture UI polish are supporting changes for the new e2e coverage and stay within the stated scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[ploskovytskyy]

Thank you very much for such a quick fix!

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 6a81ee8

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	❌ Failed	21m 50s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-07-22 20:50:42 UTC

[pkg-pr-new]

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-router-react-example-basic-authjs
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-example-rscs
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query
• tanstack-router-vue-example-basic-jsx
• tanstack-router-vue-example-basic-file-based-jsx
• tanstack-router-vue-example-basic-file-based-sfc
• tanstack-router-solid-example-authenticated-routes
• tanstack-router-solid-example-authenticated-routes-firebase
• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-default-search-params
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-basic-virtual-file-based
• tanstack-router-solid-example-basic-virtual-inside-file-based
• tanstack-router-solid-example-deferred-data
• tanstack-router-solid-i18n-paraglide
• tanstack-router-solid-example-kitchen-sink
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-kitchen-sink-solid-query
• tanstack-router-solid-example-kitchen-sink-solid-query-file-based
• tanstack-router-solid-example-large-file-based
• tanstack-router-solid-example-location-masking
• tanstack-router-solid-example-navigation-blocking
• tanstack-router-solid-example-quickstart
• tanstack-router-solid-example-quickstart-esbuild-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-router-solid-example-quickstart-rspack-file-based
• tanstack-router-solid-example-quickstart-webpack-file-based
• @tanstack/router-solid-mono-simple
• router-solid-mono-simple-lazy
• router-solid-monorepo-solid-query
• tanstack-router-solid-example-scroll-restoration
• tanstack-solid-router-search-validator-adapters
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-auth
• tanstack-solid-start-example-basic-authjs
• tanstack-solid-start-example-basic-cloudflare
• tanstack-solid-start-example-basic-netlify
• tanstack-solid-start-example-basic-nitro
• tanstack-start-example-basic-solid-query
• tanstack-solid-start-example-basic-static
• tanstack-solid-start-bun-hosting
• tanstack-solid-start-example-convex-better-auth
• tanstack-solid-start-example-counter
• tanstack-solid-start-i18n-paraglide
• tanstack-solid-start-example-large
• tanstack-solid-start-streaming-data-from-server-functions
• tanstack-solid-start-example-supabase-basic
• tanstack-solid-start-tailwind-v4
• tanstack-router-solid-example-view-transitions
• tanstack-router-solid-example-with-framer-motion
• tanstack-router-solid-example-with-trpc

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@7590

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@7590

@tanstack/eslint-plugin-start

npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@7590

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@7590

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@7590

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@7590

@tanstack/react-router-devtools

npm i https://pkg.pr.new/@tanstack/react-router-devtools@7590

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@7590

@tanstack/react-start

npm i https://pkg.pr.new/@tanstack/react-start@7590

@tanstack/react-start-client

npm i https://pkg.pr.new/@tanstack/react-start-client@7590

@tanstack/react-start-rsc

npm i https://pkg.pr.new/@tanstack/react-start-rsc@7590

@tanstack/react-start-server

npm i https://pkg.pr.new/@tanstack/react-start-server@7590

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@7590

@tanstack/router-core

npm i https://pkg.pr.new/@tanstack/router-core@7590

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@7590

@tanstack/router-devtools-core

npm i https://pkg.pr.new/@tanstack/router-devtools-core@7590

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@7590

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@7590

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@7590

@tanstack/router-utils

npm i https://pkg.pr.new/@tanstack/router-utils@7590

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@7590

@tanstack/solid-router

npm i https://pkg.pr.new/@tanstack/solid-router@7590

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/@tanstack/solid-router-devtools@7590

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@7590

@tanstack/solid-start

npm i https://pkg.pr.new/@tanstack/solid-start@7590

@tanstack/solid-start-client

npm i https://pkg.pr.new/@tanstack/solid-start-client@7590

@tanstack/solid-start-server

npm i https://pkg.pr.new/@tanstack/solid-start-server@7590

@tanstack/start-client-core

npm i https://pkg.pr.new/@tanstack/start-client-core@7590

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/@tanstack/start-fn-stubs@7590

@tanstack/start-plugin-core

npm i https://pkg.pr.new/@tanstack/start-plugin-core@7590

@tanstack/start-server-core

npm i https://pkg.pr.new/@tanstack/start-server-core@7590

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/@tanstack/start-static-server-functions@7590

@tanstack/start-storage-context

npm i https://pkg.pr.new/@tanstack/start-storage-context@7590

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@7590

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@7590

@tanstack/vue-router

npm i https://pkg.pr.new/@tanstack/vue-router@7590

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/@tanstack/vue-router-devtools@7590

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@7590

@tanstack/vue-start

npm i https://pkg.pr.new/@tanstack/vue-start@7590

@tanstack/vue-start-client

npm i https://pkg.pr.new/@tanstack/vue-start-client@7590

@tanstack/vue-start-server

npm i https://pkg.pr.new/@tanstack/vue-start-server@7590

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@7590

commit: 6a81ee8

[codspeed-hq]

Merging this PR will regress 4 benchmarks

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 6 improved benchmarks
❌ 4 regressed benchmarks
✅ 170 untouched benchmarks

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Mode	Benchmark	BASE	HEAD	Efficiency
❌	Memory	mem server error-paths not-found (react)	266.6 KB	884.8 KB	-69.86%
❌	Memory	mem server error-paths redirect (vue)	299.9 KB	396.3 KB	-24.32%
❌	Memory	mem server server-fn-churn (react)	270.9 KB	282 KB	-3.94%
❌	Simulation	client-route-tree-scale navigation loop (react)	74 ms	77 ms	-3.84%
⚡	Memory	mem server peak-large-page (react)	2,184.3 KB	955 KB	×2.3
⚡	Memory	mem server error-paths not-found (solid)	763 KB	422.7 KB	+80.5%
⚡	Memory	mem server peak-large-page (solid)	1,386.8 KB	772.5 KB	+79.53%
⚡	Memory	mem server serialization-payload (react)	5.2 MB	3.4 MB	+52.19%
⚡	Simulation	client-loaders navigation loop (react)	55.5 ms	52.8 ms	+5.17%
⚡	Memory	mem server server-fn-churn (vue)	273.7 KB	264.1 KB	+3.66%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing SyMind:fix-rsbuild-inline-css (6a81ee8) with main (07ce903)}

[nx-cloud]

Nx Cloud has identified a possible root cause for your failed CI:

We investigated the tanstack-vue-start-e2e-basic:test:e2e--vite-prerender failure and determined it is unrelated to this PR's changes. The error references a missing isPrerender export in a Vue e2e utility module that our diff does not touch, and the project itself is not among the affected projects. We are classifying this as an environment state issue — likely a stale build artifact — rather than a regression introduced by this PR.

No code changes were suggested for this issue.

You can trigger a rerun by pushing an empty commit:

git commit --allow-empty -m "chore: trigger rerun"
git push

View detailed reasoning on Nx Cloud ↗

_{🎓 Learn more about Self-Healing CI on nx.dev}