Vite plugin is not extracting the styles in CSS file when used in module federation setup

[smitev]

Describe the bug

I have a module federation setup with Vite using vite-plugin-federation. Also I am using vite-tsconfig-paths. When I try to build the apps, it doesn't compile/extract the styles in separate CSS file, instead it keeps them in JS files and when I run/preview the built app, I get this error: Uncaught Error: Styles were unable to be assigned to a file.

I noticed when I don't use vite-tsconfig-paths for the imports, the build output is correct.
I also tried to set vanillaExtractPlugin({ unstable_mode: 'transform' }) and that one also gives the correct build output.

Reproduction

https://github.com/smitev/vanilla-extract-vite-module-federation

System Info

System:
    OS: macOS 14.7.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 301.97 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - /opt/homebrew/opt/node@22/bin/node
    Yarn: 4.5.1 - /opt/homebrew/opt/node@22/bin/yarn
    npm: 10.9.0 - /opt/homebrew/opt/node@22/bin/npm
  Browsers:
    Chrome: 131.0.6778.86
    Edge: 131.0.2903.51
    Safari: 18.1

Used Package Manager

yarn

Logs

Uncaught Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
    at getFileScope (__federation_expose_RemoteApp-GIBzU0Fx.js:3194:11)
    at generateIdentifier (__federation_expose_RemoteApp-GIBzU0Fx.js:4980:7)
    at style (__federation_expose_RemoteApp-GIBzU0Fx.js:5047:19)
    at __federation_expose_RemoteApp-GIBzU0Fx.js:5057:19

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.