@import CSS seems to be duplicated during development SSR

[hydazz]

Which project does this relate to?

Start

Describe the bug

If a stylesheet imported by the root route contains a CSS @import, the imported stylesheet appears twice in TanStack Start’s generated development stylesheet.

The first copy is inlined where the @import occurs. A second copy is appended after the parent stylesheet. This changes the cascade order, so declarations from the imported stylesheet can override declarations written after the @import.

In the reproduction, base.css sets background: white. styles.css imports base.css, then sets background: dark. During a full development refresh, the page briefly renders white, then returns to dark after hydration.

This only seems to happen during development. The production build emits the styles in the expected order.

I’m not sure whether this is an intended limitation of development CSS collection or an issue with how imported stylesheets are collected. The root-route side-effect import and CSS @import both appear to follow the documented usage.

Complete minimal reproducer

https://stackblitz.com/edit/github-qmf2qf6v

Steps to Reproduce the Bug

1. Open the stackblitz above
2. Wait for WebContainer/npm install && npm run dev
3. Keep refreshing the Preview

Expected behavior

I expected the dark background from styles.css to be used for the initial styled render too.

base.css is imported first, then the dark body rule follows it in styles.css, so I did not expect the base background: white declaration to win during the development SSR render.

Screenshots or Videos

Screen.Recording.2026-07-12.at.12.41.33.am.mov

Platform

• Router / Start Version: 1.168.27
• OS: macOS
• Browser: Chrome
• Browser Version: 150.0.7871.115
• Bundler: vite
• Bundler Version: 8.1.4

Additional context

Docs followed:
https://tanstack.com/start/latest/docs/framework/react/guide/css-styling
https://vite.dev/guide/features.html#import-inlining-and-rebasing

?url method does not have this issue.