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

Release Notes

• Bug Fixes

  • Fixed server-side rendering of stylesheets imported with ?url syntax by aligning asset path configuration between client and server builds.

• Tests

  • Added end-to-end test validating styles imported with ?url are correctly applied during server-side rendering.

[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: 03e17414-25e1-4d98-9b1b-66fa38941dc8

📥 Commits

Reviewing files that changed from the base of the PR and between 6f1daf5 and 1da30be.

⛔ Files ignored due to path filters (1)

• e2e/react-start/rsc-rsbuild/src/node_modules/rsc-client-pkg/index.js is excluded by !**/node_modules/**

📒 Files selected for processing (10)

• .changeset/fair-assets-align.md
• e2e/react-start/rsc-rsbuild/src/routeTree.gen.ts
• e2e/react-start/rsc-rsbuild/src/routes/index.tsx
• e2e/react-start/rsc-rsbuild/src/routes/rsc-css-url.css
• e2e/react-start/rsc-rsbuild/src/routes/rsc-css-url.tsx
• e2e/react-start/rsc-rsbuild/src/routes/rsc-node-module-client.tsx
• e2e/react-start/rsc-rsbuild/src/utils/RscClientPkgContent.tsx
• e2e/react-start/rsc-rsbuild/src/vite-env.d.ts
• e2e/react-start/rsc-rsbuild/tests/rsc-css-url.spec.ts
• packages/start-plugin-core/src/rsbuild/planning.ts

---

📝 Walkthrough

Walkthrough

This PR fixes a Rsbuild SSR asset URL duplication issue by aligning server public asset paths with client build outputs. It refactors the Rsbuild environment planning to use standardized distPath helpers, adds a comprehensive E2E test demonstrating CSS ?url import handling, and enhances the E2E homepage UI.

Changes

Rsbuild SSR Asset URL Alignment and E2E Validation

Layer / File(s)	Summary
Rsbuild distPath planning helpers packages/start-plugin-core/src/rsbuild/planning.ts	Introduces RsbuildDistPathObject type and factory functions (createClientAssetDistPath, createPublicAssetDistPath) that generate standardized distPath objects; updates client, server, and provider Rsbuild environments to use these helpers, aligning asset paths across all environments.
E2E /rsc-css-url route with CSS ?url import e2e/react-start/rsc-rsbuild/src/routes/rsc-css-url.tsx, src/routes/rsc-css-url.css, src/vite-env.d.ts	Adds new /rsc-css-url file route that demonstrates the fix by importing CSS via ./rsc-css-url.css?url and injecting it into SSR document head; defines card/badge/title/text styles; adds TypeScript ambient module declaration for *?url imports.
Auto-generated route tree updates e2e/react-start/rsc-rsbuild/src/routeTree.gen.ts	Updates generated router type interfaces and module augmentation to register the new /rsc-css-url route (FileRoutesByFullPath, FileRoutesByTo, FileRoutesById, FileRouteTypes, RootRouteChildren).
E2E Playwright test for CSS ?url e2e/react-start/rsc-rsbuild/tests/rsc-css-url.spec.ts	Adds test that navigates to /rsc-css-url, asserts HTTP 200 response, verifies element visibility, and validates computed background color, confirming CSS ?url imports are applied correctly during SSR.
E2E homepage UI enhancements e2e/react-start/rsc-rsbuild/src/routes/index.tsx, src/routes/rsc-node-module-client.tsx, src/utils/RscClientPkgContent.tsx	Expands home page with styled examples grid and navigation cards; updates node-module-client route with styled layout and back link; refactors shared UI component with consistent inline styles and test IDs for E2E integration.
Release changeset .changeset/fair-assets-align.md	Documents patch bump for @tanstack/start-plugin-core and notes the Rsbuild SSR asset URL alignment fix.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• TanStack/router#7509: Adds Rsbuild/RSC integration and RSBUILD_CLIENT_ASSETS_DIR planning that this PR extends with distPath alignment.
• TanStack/router#7540: Updates Rsbuild plugin to conditionally include node_modules for RSC builds; complements this PR's distPath standardization.
• TanStack/router#7552: Extends start-plugin-core's compiler integration using expression unwrapping utilities aligned with this PR's core module planning changes.

Suggested labels

package: start-plugin-core

Poem

🐰 The assets were scattered, both paths led astray,
One link in the server, one hidden away,
With helpers so tidy, we've stitched them as one,
The stylesheets align now—the rabbit work's done! 🎀

🚥 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 precisely describes the main change: aligning Rsbuild SSR asset URLs for css?url imports, which is the core fix across all modified files.
Linked Issues check	✅ Passed	The PR fully addresses issue #7543 by aligning server asset paths with client paths in the Rsbuild environment plan and adding test coverage for css?url SSR resolution.
Out of Scope Changes check	✅ Passed	Besides the core fix, changes include E2E test enhancements (new route, test case) and UI polish updates that are reasonably scoped to validating the fix and improving test fixtures.

_{✏️ 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 and usage tips.}

[ploskovytskyy]

Thank you very much for such a quick fix!