Genuine question: can anyone spot what CSS tool is generating this? A curious mixture of generated classes and inline styles.

[zachleat@fediverse.zachleat.com]

@mahryekuh haha forgot the CW sorry

[konnorrogers@ruby.social]

@zachleat just about every frontend framework that does scoped styling

[zachleat@fediverse.zachleat.com]

@konnorrogers 🥶

[ak@mastodon.social]

@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.

[zachleat@fediverse.zachleat.com]

@ak oh no

[jakelazaroff@mastodon.social]

@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!

[zachleat@fediverse.zachleat.com]

@jakelazaroff @konnorrogers it’s from bluesky

[mahryekuh@fosstodon.org]

@zachleat Boosting it so others can suffer through it too. Call it early Halloween.

[konnorrogers@ruby.social]

@zachleat @jakelazaroff IIRC Bluesky is React Native

[zachleat@fediverse.zachleat.com]

@konnorrogers @jakelazaroff https://reactnative.dev/docs/stylesheet seems to match up

[zachleat@fediverse.zachleat.com]

Looks like it’s React Native’s StyleSheet: https://reactnative.dev/docs/stylesheet

(thank you @konnorrogers @jakelazaroff )

[bcdavid@hachyderm.io]

@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

[bcdavid@hachyderm.io]

@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.

[zachleat@fediverse.zachleat.com]

@bcdavid @konnorrogers @jakelazaroff *chin hands* go onnnnnn

[heydon@front-end.social]

@zachleat @konnorrogers @jakelazaroff Thanks, I hate it.

[konnorrogers@ruby.social]

@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.

[konnorrogers@ruby.social]

@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)

[zachleat@fediverse.zachleat.com]

@konnorrogers @heydon @jakelazaroff oh no

[rawrmonstar@social.vivaldi.net]

@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

[zachleat@fediverse.zachleat.com]

@rawrmonstar @konnorrogers @bcdavid @jakelazaroff oh no