styled-components injects styles for non loaded components on react-native-web

[macrozone]

Environment

System:

• OS: macOS 14.2.1
• CPU: (12) arm64 Apple M2 Max
• Memory: 3.39 GB / 64.00 GB
• Shell: 5.9 - /bin/zsh

Binaries:

• Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
• Yarn: 4.0.1 - ~/.nvm/versions/node/v18.19.1/bin/yarn
• npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm

Reproduction

I noticed this problem when tracing StyleSheet.create on react-native-web in the other issue #4270

Steps to reproduce

you can actually use the same repo as in #4270

https://github.com/macrozone/styled-components-rnw-reproduction

1. modify node_modules/react-native-web/dist/exports/StyleSheet/index.js
2. on line 86, i function create(styles) { add console.log("create stylesheet", styles)
3. rm -rf .next && yarn dev
4. now go to http://localhost:3000/no-styled-components, you will see 5 stylesheets beeing created, for View, Text, our custom one in the page and some helpers
5. restart and clear cache again: rm -rf .next && yarn dev
6. now go to http://localhost:3000/the-bug
7. you will see many more stylesheets beeing created, even for things that are not mounted

Expected Behavior

styled-components/native should only create Stylesheets for components actually created

Actual Behavior

styled-components/native creates stylesheet for unused components as well