fix(alpha): Recursively import CSS assets

examples/react/start-bare/src/routes/__root.tsx

@@ -1,13 +1,13 @@
+import * as React from 'react'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import {
-  createRootRoute,
   HeadContent,
   Link,
   Outlet,
   Scripts,
+  createRootRoute,
 } from '@tanstack/react-router'
 import appCss from '~/styles/app.css?url'
-import * as React from 'react'
 
 export const Route = createRootRoute({
   head: () => ({

examples/react/start-bare/src/routes/about.tsx

@@ -1,3 +1,5 @@
+import Counter from '~/components/Counter'
+
 export const Route = createFileRoute({
   component: RouteComponent,
 })
@@ -6,6 +8,7 @@ function RouteComponent() {
   return (
     <main>
       <h1>About</h1>
+      <Counter />
     </main>
   )
 }

examples/react/start-bare/src/routes/index.tsx

@@ -1,4 +1,3 @@
-import Counter from '~/components/Counter'
 export const Route = createFileRoute({
   component: RouteComponent,
 })
@@ -7,7 +6,6 @@ function RouteComponent() {
   return (
     <main>
       <h1 className="text-3xl text-blue-500 mb-5">Hello world!</h1>
-      <Counter />
     </main>
   )
 }

packages/start-plugin-core/src/routesManifestPlugin.ts

@@ -12,6 +12,35 @@ import type {
 import type { Manifest, RouterManagedTag } from '@tanstack/router-core'
 import type { TanStackStartOutputConfig } from './plugin'
 
+const getCSSRecursively = (
+  file: ViteManifestChunk,
+  filesByRouteFilePath: ViteManifest,
+) => {
+  const result: Array<RouterManagedTag> = []
+
+  // Get all css imports from the file
+  for (const cssFile of file.css ?? []) {
+    result.push({
+      tag: 'link',
+      attrs: {
+        rel: 'stylesheet',
+        href: joinURL('/', cssFile),
+        type: 'text/css',
+      },
+    })
+  }
+
+  // Recursively get CSS from imports
+  for (const imp of file.imports ?? []) {
+    const importInfo = filesByRouteFilePath[imp]
+    if (importInfo) {
+      result.push(...getCSSRecursively(importInfo, filesByRouteFilePath))
+    }
+  }
+
+  return result
+}
+
 export function startManifestPlugin(
   opts: TanStackStartOutputConfig,
 ): PluginOption {
@@ -127,17 +156,7 @@ export function startManifestPlugin(
               preloads.unshift(path.join('/', file.file))
             }
 
-            const cssFiles = file.css ?? []
-            const cssAssetsList: Array<RouterManagedTag> = cssFiles.map(
-              (cssFile) => ({
-                tag: 'link',
-                attrs: {
-                  rel: 'stylesheet',
-                  href: joinURL('/', cssFile),
-                  type: 'text/css',
-                },
-              }),
-            )
+            const cssAssetsList = getCSSRecursively(file, filesByRouteFilePath)
 
             routes[k] = {
               ...v,
@@ -157,16 +176,9 @@ export function startManifestPlugin(
 
           // Gather all the CSS files from the entry file in
           // the `css` key and add them to the root route
-          const entryCssFiles = entryFile.css ?? []
-          const entryCssAssetsList: Array<RouterManagedTag> = entryCssFiles.map(
-            (cssFile) => ({
-              tag: 'link',
-              attrs: {
-                rel: 'stylesheet',
-                href: joinURL('/', cssFile),
-                type: 'text/css',
-              },
-            }),
+          const entryCssAssetsList = getCSSRecursively(
+            entryFile,
+            filesByRouteFilePath,
           )
 
           routes[rootRouteId]!.assets = [