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 = [