search

styled-components / styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
https://styled-components.com
MIT License
40.11k stars 2.48k forks source link

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

Open macrozone opened 2 months ago

macrozone commented 2 months ago

Environment

System:

Reproduction

I noticed this problem when tracing StyleSheet.create on react-native-web in the other issue https://github.com/styled-components/styled-components/issues/4270

Steps to reproduce

you can actually use the same repo as in https://github.com/styled-components/styled-components/issues/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