@tanstack/solid-router 1.168.19 → 1.168.21

package/src/Match.tsx

@@ -469,13 +469,20 @@ export const Outlet = () => {
     return router.stores.matchStores.get(id)?.get().status
   })
 
-  // Only show not-found if we're not in a redirected state
   const shouldShowNotFound = () =>
     childMatchStatus() !== 'redirected' && parentGlobalNotFound()
 
+  const childRouteKey = Solid.createMemo(() => {
+    if (shouldShowNotFound()) return undefined
+    const cid = childMatchId()
+    if (!cid) return undefined
+    return router.stores.matchStores.get(cid)?.routeId ?? cid
+  })
+
   return (
     <Solid.Show
-      when={!shouldShowNotFound() && childMatchId()}
+      when={childRouteKey()}
+      keyed
       fallback={
         <Solid.Show when={shouldShowNotFound() && route()}>
           {(resolvedRoute) =>
@@ -484,20 +491,18 @@ export const Outlet = () => {
         </Solid.Show>
       }
     >
-      {(childMatchIdAccessor) => {
-        const currentMatchId = Solid.createMemo(() => childMatchIdAccessor())
-
+      {(_routeKey: string) => {
         return (
           <Solid.Show
             when={routeId() === rootRouteId}
-            fallback={<Match matchId={currentMatchId()} />}
+            fallback={<Match matchId={childMatchId()!} />}
           >
             <Solid.Suspense
               fallback={
                 <Dynamic component={router.options.defaultPendingComponent} />
               }
             >
-              <Match matchId={currentMatchId()} />
+              <Match matchId={childMatchId()!} />
             </Solid.Suspense>
           </Solid.Show>
         )

package/src/headContentUtils.tsx

@@ -2,6 +2,7 @@ import * as Solid from 'solid-js'
 import {
   escapeHtml,
   getAssetCrossOrigin,
+  isInlinableStylesheet,
   replaceEqualDeep,
   resolveManifestAssetLink,
 } from '@tanstack/router-core'
@@ -117,20 +118,42 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
       .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
       .filter(Boolean)
       .flat(1)
-      .filter((asset) => asset.tag === 'link')
-      .map(
-        (asset) =>
-          ({
-            tag: 'link',
-            attrs: {
-              ...asset.attrs,
-              crossOrigin:
-                getAssetCrossOrigin(assetCrossOrigin, 'stylesheet') ??
-                asset.attrs?.crossOrigin,
-              nonce,
+      .flatMap((asset): Array<RouterManagedTag> => {
+        if (asset.tag === 'link') {
+          if (isInlinableStylesheet(manifest, asset)) {
+            return []
+          }
+
+          return [
+            {
+              tag: 'link',
+              attrs: {
+                ...asset.attrs,
+                crossOrigin:
+                  getAssetCrossOrigin(assetCrossOrigin, 'stylesheet') ??
+                  asset.attrs?.crossOrigin,
+                nonce,
+              },
             },
-          }) satisfies RouterManagedTag,
-      )
+          ]
+        }
+
+        if (asset.tag === 'style') {
+          return [
+            {
+              tag: 'style',
+              attrs: {
+                ...asset.attrs,
+                nonce,
+              },
+              children: asset.children,
+              ...(asset.inlineCss ? { inlineCss: true as const } : {}),
+            },
+          ]
+        }
+
+        return []
+      })
 
     return [...constructed, ...assets]
   })