react-native-css-interop cache is huge due to safelist in tailwind config

[evelant]

Description

Using the tailwind.config.js from gluestack-ui-v2 node_modules/react-native-css-interop/.cache/android.js is a 4.3MB minified js file that takes ~250ms to load on app start. That is a significant chunk of load time.

CodeSandbox/Snack link

https://github.com/evelant/css-interop-large-cache-example

Steps to reproduce

Copied from issue filed at nativewind here: https://github.com/nativewind/nativewind/issues/1071

Describe the bug Using the tailwind.config.js from gluestack-ui-v2 node_modules/react-native-css-interop/.cache/android.js is a 4.3MB minified js file that takes ~250ms to load on app start. That is a significant chunk of load time.

Is this intended or expected behavior? Does it come with a runtime performance penalty beyond the loading of the large file?

If this is expected behavior maybe a warning should be added to the docs.

Reproduction https://github.com/evelant/css-interop-large-cache-example

npm install
npx expo export -p android

observe that node_modules/react-native-css-interop/.cache/android.js is very large and that it slows down app load significantly

Expected behavior Nativewind adds little/no overhead to app loading and runtime

Additional context https://github.com/nativewind/nativewind/issues/1071#issuecomment-2351471898 https://github.com/nativewind/nativewind/issues/1071#issuecomment-2352415768

gluestack-ui Version

latest

Platform

• [X] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

No response