feat: Add style to HeadContent (#4559)

Currently Route HeadContent don't have support to inline style tags.

After a contribution proposition made by @schiller-manuel in the Discord
Group I have decided to implement this.

I also have used this in the basic example for react-start and
solid-start and added style and style w/loader test cases to both
modules.

---------

Co-authored-by: Flo <fpellet@ensc.fr>

Author: felipestanzani

docs/router/framework/react/guide/document-head-management.md

@@ -15,7 +15,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
 
@@ -37,6 +37,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',

e2e/react-start/basic/src/routes/__root.tsx

@@ -51,6 +51,17 @@ export const Route = createRootRoute({
       { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
       { rel: 'icon', href: '/favicon.ico' },
     ],
+    styles: [
+      {
+        media: 'all and (min-width: 500px)',
+        children: `
+        .inline-div {
+          color: white;
+          background-color: gray;
+          max-width: 250px;
+        }`,
+      },
+    ],
   }),
   errorComponent: (props) => {
     return (
@@ -158,6 +169,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         </div>
         <hr />
         {children}
+        <div className="inline-div">This is an inline styled div</div>
         <RouterDevtools position="bottom-right" />
         <Scripts />
       </body>

e2e/solid-start/basic/src/routes/__root.tsx

@@ -41,6 +41,17 @@ export const Route = createRootRoute({
       { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
       { rel: 'icon', href: '/favicon.ico' },
     ],
+    styles: [
+      {
+        media: 'all and (min-width: 500px)',
+        children: `
+        .inline-div {
+          color: white;
+          background-color: gray;
+          max-width: 250px;
+        }`,
+      },
+    ],
   }),
   errorComponent: (props) => <p>{props.error.stack}</p>,
   notFoundComponent: () => <NotFound />,
@@ -119,6 +130,7 @@ function RootComponent() {
         </Link>
       </div>
       <Outlet />
+      <div class="inline-div">This is an inline styled div</div>
       <TanStackRouterDevtoolsInProd />
     </>
   )

packages/react-router/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) => {

packages/react-router/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>
   }
 }

packages/react-router/tests/route.test.tsx

@@ -475,4 +475,101 @@ describe('route.head', () => {
       [{ href: 'index.css' }],
     ])
   })
+
+  test('styles', async () => {
+    const rootRoute = createRootRoute({
+      head: () => ({
+        styles: [
+          {
+            media: 'all and (min-width: 200px)',
+            children: '.inline-div { color: blue; }',
+          },
+        ],
+      }),
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      head: () => ({
+        styles: [
+          {
+            media: 'all and (min-width: 100px)',
+            children: '.inline-div { background-color: yellow; }',
+          },
+        ],
+      }),
+      component: () => <div className="inline-div">Index</div>,
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({ routeTree, history })
+    render(<RouterProvider router={router} />)
+    const indexElem = await screen.findByText('Index')
+    expect(indexElem).toBeInTheDocument()
+
+    const stylesState = router.state.matches.map((m) => m.styles)
+    expect(stylesState).toEqual([
+      [
+        {
+          media: 'all and (min-width: 200px)',
+          children: '.inline-div { color: blue; }',
+        },
+      ],
+      [
+        {
+          media: 'all and (min-width: 100px)',
+          children: '.inline-div { background-color: yellow; }',
+        },
+      ],
+    ])
+  })
+
+  test('styles w/loader', async () => {
+    const rootRoute = createRootRoute({
+      head: () => ({
+        styles: [
+          {
+            media: 'all and (min-width: 200px)',
+            children: '.inline-div { color: blue; }',
+          },
+        ],
+      }),
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      head: () => ({
+        styles: [
+          {
+            media: 'all and (min-width: 100px)',
+            children: '.inline-div { background-color: yellow; }',
+          },
+        ],
+      }),
+      loader: async () => {
+        await new Promise((resolve) => setTimeout(resolve, 200))
+      },
+      component: () => <div className="inline-div">Index</div>,
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({ routeTree, history })
+    render(<RouterProvider router={router} />)
+    const indexElem = await screen.findByText('Index')
+    expect(indexElem).toBeInTheDocument()
+
+    const stylesState = router.state.matches.map((m) => m.styles)
+    expect(stylesState).toEqual([
+      [
+        {
+          media: 'all and (min-width: 200px)',
+          children: '.inline-div { color: blue; }',
+        },
+      ],
+      [
+        {
+          media: 'all and (min-width: 100px)',
+          children: '.inline-div { background-color: yellow; }',
+        },
+      ],
+    ])
+  })
 })

packages/router-core/src/Matches.ts

@@ -109,6 +109,7 @@ export interface DefaultRouteMatchExtensions {
   links?: unknown
   headScripts?: unknown
   meta?: unknown
+  styles?: unknown
 }
 
 export interface RouteMatchExtensions extends DefaultRouteMatchExtensions {}

packages/router-core/src/route.ts

@@ -1124,6 +1124,7 @@ export interface UpdatableRouteOptions<
     links?: AnyRouteMatch['links']
     scripts?: AnyRouteMatch['headScripts']
     meta?: AnyRouteMatch['meta']
+    styles?: AnyRouteMatch['styles']
   }>
   scripts?: (
     ctx: AssetFnContextOptions<

packages/router-core/src/router.ts

@@ -2437,12 +2437,20 @@ export class RouterCore<
                       const meta = headFnContent?.meta
                       const links = headFnContent?.links
                       const headScripts = headFnContent?.scripts
+                      const styles = headFnContent?.styles
 
                       const scripts =
                         await route.options.scripts?.(assetContext)
                       const headers =
                         await route.options.headers?.(assetContext)
-                      return { meta, links, headScripts, headers, scripts }
+                      return {
+                        meta,
+                        links,
+                        headScripts,
+                        headers,
+                        scripts,
+                        styles,
+                      }
                     }
 
                     const runLoader = async () => {

packages/router-core/src/ssr/ssr-client.ts

@@ -217,6 +217,7 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       match.meta = headFnContent?.meta
       match.links = headFnContent?.links
       match.headScripts = headFnContent?.scripts
+      match.styles = headFnContent?.styles
       match.scripts = scripts
     }),
   )