Genuine question: can anyone spot what CSS tool is generating this? A curious mixture of generated classes and inline styles.
-
@zachleat I think that's a personal choice lol. The tooling is generating the classes but the dev is adding style attributes, maybe getting mixed up about the attribute used to generate the classes. Or they are using CSS modules and getting lazy about editing the stylesheet files.
-
@ak oh no
-
@konnorrogers @zachleat which? i mostly work with react (using CSS modules) and svelte, and neither of those will generate inline styles unless you explicitly set style attributes. AFAIK that’s pretty normal, so i’m also curious where that markup came from!
-
Zach Leatherman :11ty:replied to jake lazaroff last edited by
@jakelazaroff @konnorrogers it’s from bluesky
-
Marijke Luttekesreplied to Zach Leatherman :11ty: last edited by
@zachleat Boosting it so others can suffer through it too. Call it early Halloween.
-
Konnor Rogersreplied to Zach Leatherman :11ty: last edited by
@zachleat @jakelazaroff IIRC Bluesky is React Native
-
Zach Leatherman :11ty:replied to Konnor Rogers last edited by
@konnorrogers @jakelazaroff https://reactnative.dev/docs/stylesheet seems to match up
-
Zach Leatherman :11ty:replied to Zach Leatherman :11ty: last edited by
Looks like it’s React Native’s StyleSheet: https://reactnative.dev/docs/stylesheet
(thank you @konnorrogers @jakelazaroff
) -
@konnorrogers @zachleat @jakelazaroff Yes, it uses react-native-web to generate the web code from React Native code. I believe RN for Web is what is ultimately generating that CSS code, but don't quote me on that.
Here's their repo: https://github.com/bluesky-social/social-app/tree/main
-
@konnorrogers @zachleat @jakelazaroff I should add that If we want to talk about things that really are threatening the web, RN for Web has caused much more harm than anything web components could ever possibly do.
-
Zach Leatherman :11ty:replied to Brian David last edited by
@bcdavid @konnorrogers @jakelazaroff *chin hands* go onnnnnn
-
Large Heydon Colliderreplied to Zach Leatherman :11ty: last edited by
@zachleat @konnorrogers @jakelazaroff Thanks, I hate it.
-
Konnor Rogersreplied to Large Heydon Collider last edited by
@heydon @zachleat @jakelazaroff oh you hate that. Check out this Flutter Web masterpiece.
Material Theme Builder
Theming for Material Design 3
(material-foundation.github.io)
Try using scrollbars, or keyboard nav, or loading it on a low end phone.
-
@bcdavid @zachleat @jakelazaroff
Speaking of ruining the web, here's a flutter web masterpiece:
Material Theme Builder
Theming for Material Design 3
(material-foundation.github.io)
Also, React Native has some....interesting...design choices like everything is display: flex by default, some things like display: grid aren't supported, etc
[Feature] Support CSS Grid · Issue #867 · facebook/yoga
Report I have searched existing issues and this is not a duplicate It's been advised to open a new issue (from this closed issue from 2015). Related react-native issue It's been 4 years since the issue was closed. This issue is to reques...
GitHub (github.com)
-
Zach Leatherman :11ty:replied to Konnor Rogers last edited by
-
@konnorrogers @bcdavid @zachleat @jakelazaroff everything is position: relative by default as well, also they made the default flex-direction column instead of row, just to feel something
-
Zach Leatherman :11ty:replied to Tegan last edited by
-
@konnorrogers display:flex + flex-direction:column is a perfectly reasonable default if you're dealing with cross-platform layout. You have the same primitives in flutter, Qt, RN, WPF, and others. It's universal.
display:grid might not be supported by one of the compilation targets, thus they either have to bother to hack it everywhere or just not implement it at all.
-
@bano @konnorrogers @zachleat @jakelazaroff It's not the web default, though. And both RN and react-native-web were aggressively marketed as web compatible by default, largely because React was built on web technologies. If they were designing based on other native platforms, that's fine. But that's absolutely not how these technologies were marketed.
-
@bano @konnorrogers @zachleat @jakelazaroff Above all that, your comment highlights the folly of technologies like RN selling themselves as singular cross-platform solutions. It means you never really get to leverage the platform you are writing for to its full extent. And eventually escape hatches get used to the extent that it would've been better to write multiple code bases to begin with.
