Hot reload CSS broken for lazy components

[bradleyayers]

What happened?

When I change className in a lazy loaded component, the component changes are hot reloaded but the CSS on the page is stale so any new classes that weren't previously already on the page are not defined so the styling breaks.

To work around it you have to restart metro or save a component that isn't part of a lazy loaded component tree.

Steps to Reproduce

1. Use React's lazy() to async load a component.
2. Edit the component to use a new unique class (a simple way to create a new class is using a color with a unique opacity value e.g. bg-blue-700/49).
3. Save the file.
4. In the browser, observe the hot reloaded component is missing styles for the new class name.

Snack or Repository Link

https://github.com/bradleyayers/uniwind-withuniwind-warning/tree/lazy-components-hot-reload

Uniwind version

1.11.0

React Native Version

0.86.0

Platforms

Web

Expo

Yes

Additional information 〰

• I've searched for similar issues in this repository and found none

[Brentlok]

Until the new version with the fix is published you can import root css file into your lazy components, and this should fix the issue as a temporary workaround