Virtual styles injected by Vite plugin appear before imported stylesheets
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### 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](https://stackblitz.com/edit/vitejs-vite-vsxduvse?file=src%2Fmain.tsx) and see the same unexpected behavior where the virtual styles are injected before the imported stylesheets.
Contributor guide
Assessment
This issue has not been assessed yet.