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.

[askoufis]

I think both vite-tsconfig-paths and unstable_mode: 'transform' are red herrings. I've observed non-deterministic build output, regardless of whether or not the tsconfigPaths plugins is used.

Below is two builds performed one after another. One emits a CSS file, but the other doesn't. This can occur with or without the tsconfigPaths plugin. The CSS file is only occasionally generated. Usually it isn't generated.

Additionally, unstable_mode: 'transform' doesn't emit CSS files, so it "works", but that's because it's just loading the CSS at runtime via our runtime adapter, which is injected because VE is ending up bundled in the built module. This clearly isn't desirable.

I'm not sure what's causing this non-deterministic build, but for now I'm going to label this as an upstream issue and suggest you make an issue in vite-plugin-federation. If the maintainers of vite-plugin-federation can identify an issue within Vanilla Extract then we can proceed from there.

[smitev]

@askoufis thanks for checking it up.

I created issue on vite-plugin-federation for it.
originjs/vite-plugin-federation#666

[askoufis]

@smitev The fix for this was released in @vanilla-extract/[email protected]. It was likely related to the federation vite plugin being passed through to the Vanilla Extract compiler.

[smitev]

@askoufis I just updated the repo to the latest dependencies (including to @vanilla-extract/vite-plugin v5), but I still see the issue.

[askoufis]

@askoufis I just updated the repo to the latest dependencies (including to @vanilla-extract/vite-plugin v5), but I still see the issue.

It seems like the host app builds correctly every time now, but the remote app doesn't emit any CSS. I'm still not sure what's going wrong here. It seems like there's some fundamental incompatibility between Vanilla Extract and the module federation plugin. Will keep this issue open for now.