From afbbd44c0175fcbe5945559ccf95d4fa08dc338e Mon Sep 17 00:00:00 2001 From: Inaki Larramendi Date: Sun, 25 May 2025 04:57:12 -0300 Subject: [PATCH 1/3] fix: Recursively import css assets, updated example to split the css bundle to show the problem fixed --- .../react/start-bare/src/routes/about.tsx | 3 ++ .../src/routesManifestPlugin.ts | 52 +++++++++++-------- 2 files changed, 32 insertions(+), 23 deletions(-) diff --git a/examples/react/start-bare/src/routes/about.tsx b/examples/react/start-bare/src/routes/about.tsx index f0d5d234a0..88b0a4efd9 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/packages/start-plugin-core/src/routesManifestPlugin.ts b/packages/start-plugin-core/src/routesManifestPlugin.ts index c46dbb4577..4f571bfce8 100644 --- a/packages/start-plugin-core/src/routesManifestPlugin.ts +++ b/packages/start-plugin-core/src/routesManifestPlugin.ts @@ -12,6 +12,32 @@ 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 { @@ -115,7 +141,7 @@ export function startManifestPlugin( Object.entries(routes).forEach(([k, v]) => { const file = filesByRouteFilePath[ - path.join(routesDirectoryFromRoot, v.filePath as string) + path.join(routesDirectoryFromRoot, v.filePath as string) ] if (file) { @@ -127,17 +153,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,17 +173,7 @@ 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 = [ ...(routes[rootRouteId]!.assets || []), From f6988d4316530e7def7fa95af0462ce87de3f1ac Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 25 May 2025 09:27:16 +0000 Subject: [PATCH 2/3] ci: apply automated fixes --- .../react/start-bare/src/routes/about.tsx | 2 +- .../src/routesManifestPlugin.ts | 22 ++++++++++++------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/examples/react/start-bare/src/routes/about.tsx b/examples/react/start-bare/src/routes/about.tsx index 88b0a4efd9..25cb18b1ea 100644 --- a/examples/react/start-bare/src/routes/about.tsx +++ b/examples/react/start-bare/src/routes/about.tsx @@ -1,4 +1,4 @@ -import Counter from "~/components/Counter" +import Counter from '~/components/Counter' export const Route = createFileRoute({ component: RouteComponent, diff --git a/packages/start-plugin-core/src/routesManifestPlugin.ts b/packages/start-plugin-core/src/routesManifestPlugin.ts index 4f571bfce8..1abdd288e0 100644 --- a/packages/start-plugin-core/src/routesManifestPlugin.ts +++ b/packages/start-plugin-core/src/routesManifestPlugin.ts @@ -12,7 +12,10 @@ import type { import type { Manifest, RouterManagedTag } from '@tanstack/router-core' import type { TanStackStartOutputConfig } from './plugin' -const getCSSRecursively = (file: ViteManifestChunk, filesByRouteFilePath: ViteManifest) => { +const getCSSRecursively = ( + file: ViteManifestChunk, + filesByRouteFilePath: ViteManifest, +) => { const result: Array = [] // Get all css imports from the file @@ -29,14 +32,14 @@ const getCSSRecursively = (file: ViteManifestChunk, filesByRouteFilePath: ViteMa // Recursively get CSS from imports for (const imp of file.imports ?? []) { - const importInfo = filesByRouteFilePath[imp]; + const importInfo = filesByRouteFilePath[imp] if (importInfo) { - result.push(...getCSSRecursively(importInfo, filesByRouteFilePath)); + result.push(...getCSSRecursively(importInfo, filesByRouteFilePath)) } } - return result; -}; + return result +} export function startManifestPlugin( opts: TanStackStartOutputConfig, @@ -141,7 +144,7 @@ export function startManifestPlugin( Object.entries(routes).forEach(([k, v]) => { const file = filesByRouteFilePath[ - path.join(routesDirectoryFromRoot, v.filePath as string) + path.join(routesDirectoryFromRoot, v.filePath as string) ] if (file) { @@ -153,7 +156,7 @@ export function startManifestPlugin( preloads.unshift(path.join('/', file.file)) } - const cssAssetsList = getCSSRecursively(file, filesByRouteFilePath); + const cssAssetsList = getCSSRecursively(file, filesByRouteFilePath) routes[k] = { ...v, @@ -173,7 +176,10 @@ export function startManifestPlugin( // Gather all the CSS files from the entry file in // the `css` key and add them to the root route - const entryCssAssetsList = getCSSRecursively(entryFile, filesByRouteFilePath) + const entryCssAssetsList = getCSSRecursively( + entryFile, + filesByRouteFilePath, + ) routes[rootRouteId]!.assets = [ ...(routes[rootRouteId]!.assets || []), From 6ac4b70f156ec8775524a57d4a946df208b615f6 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Mon, 26 May 2025 14:16:25 +1200 Subject: [PATCH 3/3] fixup example --- examples/react/start-bare/src/routes/__root.tsx | 4 ++-- examples/react/start-bare/src/routes/index.tsx | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) 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/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!

-
) }