Virtual styles injected by Vite plugin appear before imported stylesheets

[corydeppen]

Describe the issue

I've noticed the location of the generated style tag that's added by the StyleX Vite plugin in development doesn't seem to be consistent and may be dependent on the location of the stylesheet(s) being imported. Interestingly, the location is often different when I move the stylesheets up to src, but I can't consistently reproduce this locally. When the app is built, the styles are appended to the stylesheet as expected, making the location during dev more problematic since it's different from a prod build.

https://stackblitz.com/edit/vitejs-vite-vnjdzgyb?file=src%2Froutes%2F__root.tsx

Expected behavior

I'd expect the StyleX styles to be injected following any styles explicitly imported in the app and the location of the injected style elements shouldn't change based on where the stylesheets are imported from.

Steps to reproduce

Review the reproducer example app mentioned above.

Test case

No response

Additional comments

I'm unsure whether the issue is related to TanStack Router or StyleX. Please let me know if I can provide additional details or if there are any steps I might be able to take to further troubleshoot the issue.

Edit: I created a separate example without TS Router and see the same unexpected behavior where the virtual styles are injected before the imported stylesheets.

[corydeppen]

Something else I'm seeing locally is that the virtual styles element is injected as expected following the stylesheets that are imported immediately after the dev server starts, but then shifts up above the other style elements after reloading the page.