diff --git a/examples/react/start-bare/src/routes/__root.tsx b/examples/react/start-bare/src/routes/__root.tsx
index bf930f435a..c9872be2c7 100644
--- a/examples/react/start-bare/src/routes/__root.tsx
+++ b/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: () => ({
diff --git a/examples/react/start-bare/src/routes/about.tsx b/examples/react/start-bare/src/routes/about.tsx
index f0d5d234a0..25cb18b1ea 100644
--- a/examples/react/start-bare/src/routes/about.tsx
+++ b/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 (
About
+
)
}
diff --git a/examples/react/start-bare/src/routes/index.tsx b/examples/react/start-bare/src/routes/index.tsx
index bd87c0bf42..a415539bdb 100644
--- a/examples/react/start-bare/src/routes/index.tsx
+++ b/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 (
Hello world!
-
)
}
diff --git a/packages/start-plugin-core/src/routesManifestPlugin.ts b/packages/start-plugin-core/src/routesManifestPlugin.ts
index c46dbb4577..1abdd288e0 100644
--- a/packages/start-plugin-core/src/routesManifestPlugin.ts
+++ b/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 = []
+
+ // 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 = 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 = entryCssFiles.map(
- (cssFile) => ({
- tag: 'link',
- attrs: {
- rel: 'stylesheet',
- href: joinURL('/', cssFile),
- type: 'text/css',
- },
- }),
+ const entryCssAssetsList = getCSSRecursively(
+ entryFile,
+ filesByRouteFilePath,
)
routes[rootRouteId]!.assets = [