Route styles removed during transition

[ramiroazar]

Reproduction

1. Open reproduction
2. Start development with npm run dev
3. Click the Link component
4. Notice route transition works as expected (ie. current route fades out before new route fades in, including the link colours)
5. Start preview with npm run dev
6. Click the Link component
7. Notice route transition breaks because styles are removed from the current route (ie. links lose their colour before the current route fades out)

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (1) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @remix-run/dev: * => 2.10.3 
    @remix-run/node: * => 2.10.3 
    @remix-run/react: * => 2.10.3 
    @remix-run/serve: * => 2.10.3 
    vite: ^5.1.0 => 5.3.4

Used Package Manager

npm

Expected Behavior

Route transitions should work in preview and production like they do in development.

Actual Behavior

In preview and production, Remix unloads the CSS for the current route as soon as the next route is navigated to, leaving the current route unstyled during the exit transition.

The reproduction follows the AnimatedOutlet pattern described below.

remix-run/react-router#8008 (comment)

Styles are implemented using Vanilla Extract, though presumably this affects any CSS solution requiring CSS bundling.

https://remix.run/docs/en/main/guides/css-files#css-bundling-is-required-for-some-css-solutions

This may also affect regular CSS using URL imports, as they seem to be similarly handled as route based stylesheets which probably get unloaded in the same way.

https://remix.run/docs/en/main/styling/css

Obviously this isn't an issue unless introducing something like React Transition Group or Framer Motion, where the current route component isn't unmounted for the duration of the exit transition, so it's not technically a bug with Remix, but it's not clear from the various discussions and articles over time how to overcome this in order to properly achieve route transitions.

I've only been able to work around the above by forcing all CSS to be bundled together by adding something like the following to the root route (ie. root.tsx), but this isn't ideal as it's effectively opting out of more granular CSS bundling and it's benefits.

const modules = import.meta.glob("./**/*.css.{ts,tsx}", {
  eager: true,
});

Ideally, there should be some way to delay Remix completely unloading a route, or at least it's styles in this case.