fix react-router shared route css persistence on nav

.changeset/tough-bears-tease.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-router': patch
+---
+
+Preserve shared route stylesheet links across client navigation by rendering route CSS assets with React stylesheet precedence.

e2e/react-start/css-modules/src/routeTree.gen.ts

@@ -12,8 +12,6 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as SassMixinRouteImport } from './routes/sass-mixin'
 import { Route as QuotesRouteImport } from './routes/quotes'
 import { Route as ModulesRouteImport } from './routes/modules'
-import { Route as LazyCssStaticRouteImport } from './routes/lazy-css-static'
-import { Route as LazyCssLazyRouteImport } from './routes/lazy-css-lazy'
 import { Route as IndexRouteImport } from './routes/index'
 
 const SassMixinRoute = SassMixinRouteImport.update({
@@ -31,16 +29,6 @@ const ModulesRoute = ModulesRouteImport.update({
   path: '/modules',
   getParentRoute: () => rootRouteImport,
 } as any)
-const LazyCssStaticRoute = LazyCssStaticRouteImport.update({
-  id: '/lazy-css-static',
-  path: '/lazy-css-static',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const LazyCssLazyRoute = LazyCssLazyRouteImport.update({
-  id: '/lazy-css-lazy',
-  path: '/lazy-css-lazy',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -49,60 +37,33 @@ const IndexRoute = IndexRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/lazy-css-lazy': typeof LazyCssLazyRoute
-  '/lazy-css-static': typeof LazyCssStaticRoute
   '/modules': typeof ModulesRoute
   '/quotes': typeof QuotesRoute
   '/sass-mixin': typeof SassMixinRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/lazy-css-lazy': typeof LazyCssLazyRoute
-  '/lazy-css-static': typeof LazyCssStaticRoute
   '/modules': typeof ModulesRoute
   '/quotes': typeof QuotesRoute
   '/sass-mixin': typeof SassMixinRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/lazy-css-lazy': typeof LazyCssLazyRoute
-  '/lazy-css-static': typeof LazyCssStaticRoute
   '/modules': typeof ModulesRoute
   '/quotes': typeof QuotesRoute
   '/sass-mixin': typeof SassMixinRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
-    | '/'
-    | '/lazy-css-lazy'
-    | '/lazy-css-static'
-    | '/modules'
-    | '/quotes'
-    | '/sass-mixin'
+  fullPaths: '/' | '/modules' | '/quotes' | '/sass-mixin'
   fileRoutesByTo: FileRoutesByTo
-  to:
-    | '/'
-    | '/lazy-css-lazy'
-    | '/lazy-css-static'
-    | '/modules'
-    | '/quotes'
-    | '/sass-mixin'
-  id:
-    | '__root__'
-    | '/'
-    | '/lazy-css-lazy'
-    | '/lazy-css-static'
-    | '/modules'
-    | '/quotes'
-    | '/sass-mixin'
+  to: '/' | '/modules' | '/quotes' | '/sass-mixin'
+  id: '__root__' | '/' | '/modules' | '/quotes' | '/sass-mixin'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  LazyCssLazyRoute: typeof LazyCssLazyRoute
-  LazyCssStaticRoute: typeof LazyCssStaticRoute
   ModulesRoute: typeof ModulesRoute
   QuotesRoute: typeof QuotesRoute
   SassMixinRoute: typeof SassMixinRoute
@@ -131,20 +92,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ModulesRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/lazy-css-static': {
-      id: '/lazy-css-static'
-      path: '/lazy-css-static'
-      fullPath: '/lazy-css-static'
-      preLoaderRoute: typeof LazyCssStaticRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/lazy-css-lazy': {
-      id: '/lazy-css-lazy'
-      path: '/lazy-css-lazy'
-      fullPath: '/lazy-css-lazy'
-      preLoaderRoute: typeof LazyCssLazyRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/': {
       id: '/'
       path: '/'
@@ -157,8 +104,6 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  LazyCssLazyRoute: LazyCssLazyRoute,
-  LazyCssStaticRoute: LazyCssStaticRoute,
   ModulesRoute: ModulesRoute,
   QuotesRoute: QuotesRoute,
   SassMixinRoute: SassMixinRoute,

e2e/react-start/css-modules/src/routes/__root.tsx

@@ -62,20 +62,6 @@ function RootComponent() {
           >
             Quoted CSS
           </Link>
-          <Link
-            to="/lazy-css-static"
-            style={{ color: '#0284c7', textDecoration: 'none' }}
-            data-testid="nav-lazy-css-static"
-          >
-            Lazy CSS Static
-          </Link>
-          <Link
-            to="/lazy-css-lazy"
-            style={{ color: '#0284c7', textDecoration: 'none' }}
-            data-testid="nav-lazy-css-lazy"
-          >
-            Lazy CSS Lazy
-          </Link>
         </nav>
 
         <main style={{ padding: '20px' }}>

e2e/react-start/rsc/tests/rsc-css-modules.spec.ts

@@ -122,4 +122,33 @@ test.describe('RSC CSS Modules Tests', () => {
     )
     expect(backgroundColor).toBe('rgb(224, 242, 254)')
   })
+
+  test('RSC CSS module styles persist across sibling client-side navigation', async ({
+    page,
+  }) => {
+    await page.goto('/rsc-css-modules')
+    await page.waitForURL('/rsc-css-modules')
+
+    const cssModulesContent = page.getByTestId('rsc-css-modules-content')
+    await expect(cssModulesContent).toBeVisible()
+
+    const initialBackgroundColor = await cssModulesContent.evaluate(
+      (el) => getComputedStyle(el).backgroundColor,
+    )
+    expect(initialBackgroundColor).toBe('rgb(224, 242, 254)')
+
+    await page.getByTestId('nav-global-css').click()
+    await page.waitForURL('/rsc-global-css')
+    await expect(page.getByTestId('rsc-global-css-content')).toBeVisible()
+
+    await page.getByTestId('nav-css-modules').click()
+    await page.waitForURL('/rsc-css-modules')
+
+    await expect(cssModulesContent).toBeVisible()
+
+    const finalBackgroundColor = await cssModulesContent.evaluate(
+      (el) => getComputedStyle(el).backgroundColor,
+    )
+    expect(finalBackgroundColor).toBe('rgb(224, 242, 254)')
+  })
 })

e2e/react-start/start-manifest/src/components/AppShell.tsx

@@ -3,6 +3,10 @@ import styles from '~/styles/root-shell.module.css'
 
 const ROUTES = linkOptions([
   { to: '/', label: 'home' },
+  { to: '/a', label: '/a' },
+  { to: '/b', label: '/b' },
+  { to: '/lazy-css-static', label: '/lazy-css-static' },
+  { to: '/lazy-css-lazy', label: '/lazy-css-lazy' },
   { to: '/r1', label: '/r1' },
   { to: '/r2', label: '/r2' },
   { to: '/shared-a', label: '/shared-a' },

e2e/react-start/start-manifest/src/components/SharedCard.tsx

@@ -0,0 +1,9 @@
+import styles from '~/styles/shared-card.module.css'
+
+export function SharedCard({ label }: { label: string }) {
+  return (
+    <div className={styles.card} data-testid="shared-card">
+      Shared card {label}
+    </div>
+  )
+}

e2e/react-start/css-modules/src/components/shared-widget.tsx → e2e/react-start/start-manifest/src/components/SharedWidget.tsx

@@ -1,4 +1,3 @@
-/// <reference types="vite/client" />
 import styles from '~/styles/shared-widget.module.css'
 
 export function SharedWidget() {
@@ -8,7 +7,7 @@ export function SharedWidget() {
         Shared widget styles
       </div>
       <div className={styles.content} data-testid="shared-widget-content">
-        This widget uses a CSS module shared by a static route and a lazy route.
+        This widget uses CSS shared by a static route and a lazy route.
       </div>
     </div>
   )

e2e/react-start/css-modules/src/components/shared-widget-lazy.tsx → e2e/react-start/start-manifest/src/components/SharedWidgetLazy.tsx

@@ -1,4 +1,4 @@
-import { SharedWidget } from './shared-widget'
+import { SharedWidget } from './SharedWidget'
 
 export default function SharedWidgetLazy() {
   return <SharedWidget />