@tanstack/react-router 1.123.2 → 1.124.0

package/dist/llms/rules/guide.js

@@ -1892,7 +1892,7 @@ For full-stack applications that use Start, and even for single-page application
 - Analytics
 - CSS and JS loading/unloading
 
-To manage the document head, it's required that you render both the \`<HeadContent />\` and \`<Scripts />\` components and use the \`routeOptions.head\` property to manage the head of a route, which returns an object with \`title\`, \`meta\`, \`links\`, and \`scripts\` properties.
+To manage the document head, it's required that you render both the \`<HeadContent />\` and \`<Scripts />\` components and use the \`routeOptions.head\` property to manage the head of a route, which returns an object with \`title\`, \`meta\`, \`links\`, \`styles\`, and \`scripts\` properties.
 
 ## Managing the Document Head
 
@@ -1914,6 +1914,15 @@ export const Route = createRootRoute({
         href: '/favicon.ico',
       },
     ],
+    styles: [
+      {
+        media: 'all and (max-width: 500px)',
+        children: \`p {
+                  color: blue;
+                  background-color: yellow;
+                }\`
+      }
+    ]
     scripts: [
       {
         src: 'https://www.google-analytics.com/analytics.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.123.2",
+  "version": "1.124.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -81,7 +81,7 @@
     "tiny-warning": "^1.0.3",
     "isbot": "^5.1.22",
     "@tanstack/history": "1.121.34",
-    "@tanstack/router-core": "1.123.2"
+    "@tanstack/router-core": "1.124.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/HeadContent.tsx

@@ -120,6 +120,21 @@ export const useTags = () => {
     structuralSharing: true as any,
   })
 
+  const styles = useRouterState({
+    select: (state) =>
+      (
+        state.matches
+          .map((match) => match.styles!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...attrs }) => ({
+        tag: 'style',
+        attrs,
+        children,
+      })),
+    structuralSharing: true as any,
+  })
+
   const headScripts = useRouterState({
     select: (state) =>
       (
@@ -142,6 +157,7 @@ export const useTags = () => {
       ...meta,
       ...preloadMeta,
       ...links,
+      ...styles,
       ...headScripts,
     ] as Array<RouterManagedTag>,
     (d) => {

package/src/Matches.tsx

@@ -34,6 +34,7 @@ declare module '@tanstack/router-core' {
     meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>
     links?: Array<React.JSX.IntrinsicElements['link'] | undefined>
     scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>
+    styles?: Array<React.JSX.IntrinsicElements['style'] | undefined>
     headScripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>
   }
 }