fix: asset sorting (#7251)

Author: schiller-manuel

.changeset/start-asset-sorting.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/start-plugin-core': patch
+---
+
+Fix CSS asset ordering so styles from imported chunks are emitted before route chunk styles.

packages/start-plugin-core/src/start-manifest-plugin/manifestBuilder.ts

@@ -323,10 +323,6 @@ export function createChunkCssAssetCollector(options: {
     const assets: Array<RouterManagedTag> = []
     const seenAssets = new Set<RouterManagedTag>()
 
-    for (const cssFile of chunk.css) {
-      appendAsset(assets, seenAssets, options.getStylesheetAsset(cssFile))
-    }
-
     for (let i = 0; i < chunk.imports.length; i++) {
       const importedChunk = options.chunksByFileName.get(chunk.imports[i]!)
       if (!importedChunk) {
@@ -339,6 +335,10 @@ export function createChunkCssAssetCollector(options: {
       }
     }
 
+    for (const cssFile of chunk.css) {
+      appendAsset(assets, seenAssets, options.getStylesheetAsset(cssFile))
+    }
+
     stateByChunk.delete(chunk)
     assetsByChunk.set(chunk, assets)
     return assets

packages/start-plugin-core/tests/start-manifest-plugin/manifestBuilder.test.ts

@@ -289,15 +289,15 @@ describe('createManifestAssetResolvers + createChunkCssAssetCollector', () => {
         tag: 'link',
         attrs: {
           rel: 'stylesheet',
-          href: '/assets/entry.css',
+          href: '/assets/shared.css',
           type: 'text/css',
         },
       },
       {
         tag: 'link',
         attrs: {
           rel: 'stylesheet',
-          href: '/assets/shared.css',
+          href: '/assets/entry.css',
           type: 'text/css',
         },
       },
@@ -348,10 +348,10 @@ describe('createChunkCssAssetCollector', () => {
     const assets = getChunkCssAssets(chunksByFileName.get('a.js')!)
 
     expect(assets.map((asset: any) => asset.attrs.href)).toEqual([
-      '/a.css',
-      '/b.css',
       '/shared.css',
+      '/b.css',
       '/c.css',
+      '/a.css',
     ])
   })
 
@@ -497,15 +497,15 @@ describe('buildStartManifest', () => {
         tag: 'link',
         attrs: {
           rel: 'stylesheet',
-          href: '/assets/branch-a.css',
+          href: '/assets/shared.css',
           type: 'text/css',
         },
       },
       {
         tag: 'link',
         attrs: {
           rel: 'stylesheet',
-          href: '/assets/shared.css',
+          href: '/assets/branch-a.css',
           type: 'text/css',
         },
       },
@@ -520,6 +520,44 @@ describe('buildStartManifest', () => {
     ])
   })
 
+  test('orders imported chunk css before route chunk css', () => {
+    const entryChunk = makeChunk({
+      fileName: 'entry.js',
+      isEntry: true,
+    })
+    const routeChunk = makeChunk({
+      fileName: 'field-detail-panel.js',
+      imports: ['tabs.js'],
+      importedCss: ['field-detail-panel.css'],
+      moduleIds: ['/routes/field-detail-panel.tsx?tsr-split=component'],
+    })
+    const tabsChunk = makeChunk({
+      fileName: 'tabs.js',
+      importedCss: ['tabs.css'],
+    })
+
+    const manifest = buildStartManifest({
+      clientBuild: normalizeViteClientBuild({
+        'entry.js': entryChunk,
+        'field-detail-panel.js': routeChunk,
+        'tabs.js': tabsChunk,
+      }),
+      routeTreeRoutes: {
+        __root__: { children: ['/field-detail-panel'] } as any,
+        '/field-detail-panel': {
+          filePath: '/routes/field-detail-panel.tsx',
+        },
+      },
+      basePath: '/assets',
+    })
+
+    expect(
+      manifest.routes['/field-detail-panel']!.assets!.map(
+        (asset: any) => asset.attrs.href,
+      ),
+    ).toEqual(['/assets/tabs.css', '/assets/field-detail-panel.css'])
+  })
+
   test('dedupes route css already owned by ancestor routes', () => {
     const entryChunk = makeChunk({
       fileName: 'entry.js',
@@ -725,15 +763,15 @@ describe('route tree dedupe in buildStartManifest', () => {
         tag: 'link',
         attrs: {
           rel: 'stylesheet',
-          href: '/assets/root.css',
+          href: '/assets/shared.css',
           type: 'text/css',
         },
       },
       {
         tag: 'link',
         attrs: {
           rel: 'stylesheet',
-          href: '/assets/shared.css',
+          href: '/assets/root.css',
           type: 'text/css',
         },
       },
@@ -952,15 +990,15 @@ describe('route tree dedupe in buildStartManifest', () => {
         tag: 'link',
         attrs: {
           rel: 'stylesheet',
-          href: '/assets/root.css',
+          href: '/assets/shared-root.css',
           type: 'text/css',
         },
       },
       {
         tag: 'link',
         attrs: {
           rel: 'stylesheet',
-          href: '/assets/shared-root.css',
+          href: '/assets/root.css',
           type: 'text/css',
         },
       },