35 replies

1. Marijke Luttekes 1 min later

   @zachleat My eyes! 😭

   1. Zach Leatherman 1 min later

      @mahryekuh haha forgot the CW sorry

      1. Marijke Luttekes 28 min later

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

2. Konnor Rogers 5 min later

   @zachleat just about every frontend framework that does scoped styling 🙈

   1. Zach Leatherman 8 min later

      @konnorrogers 🥶

   2. jake lazaroff 19 min later

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

      1. Zach Leatherman 22 min later

         @jakelazaroff @konnorrogers it’s from bluesky

         1. Konnor Rogers 33 min later

            @zachleat @jakelazaroff IIRC Bluesky is React Native

            1. Zach Leatherman 35 min later

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

         2. jake lazaroff 35 min later

            @zachleat @konnorrogers i think bluesky uses react-native-web to share their UI code between mobile platforms and the web, but none of the examples that i can find on https://necolas.github.io/react-native-web/ generate inline styles so i'd guess they're doing something weird. definitely a dark corner of the JS framework world!

         3. Vint Prox 2 hr later

            @zachleat @jakelazaroff @konnorrogers

            A mixture of generated classes and inline styles? OMFG, I'm so not surprised it's on Bluesky. #webdevgoals #webdevwtf #webdevfail #ReactNative

3. catraxx 8 min later

   @zachleat 🤢

4. Khalid ⚡ 26 min later

   @zachleat I think I might have an idea. Are there any hints to what the backend tech is?

   I’ve seen this technique used on the #dotnet side of things with Blazor, where each component is given a class as an identifier so that downstream components can be targeted when the UI is mutated.

   The inline CSS could be additional scoped styles for changes from the defaults.

   This is a guess based on the screenshot.

   1. Tim 16 hr later

      @khalidabuhakmeh @zachleat I agree at first the ids look similar, but Blazor uses usually one at a time and puts them as html attributes, not classes.

5. Henry Bley-Vroman 27 min later

   @zachleat Could be Tailwind/Windi/Uno/etc. They determine which classes to build by scanning the source code. For styles that are dynamic *and* not from a set known in advance, you have to use some other solution - like inline `style`.

   Can imagine that forcing the `style="background-color:…"`.

   Harder to see it forcing `style="flex-direction… gap… padding"` (sounds like known variant, typically pseudocoded `class={condition ? 'flex-direction-… gap-… padding-…')}` - cf https://tailwindcss.com/docs/content-configuration#dynamic-class-names)

6. ryan 30 min later

   @zachleat The class structure kind of looks like the output of Emotion? https://emotion.sh/docs/introduction

   But I think even that library wouldn’t normally use inline styles, may be a dev decision or it’s like a component library also in play 😬

7. Zach Leatherman 37 min later

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

   (thank you @konnorrogers @jakelazaroff 🙌🏻)

   1. Private reply 51 min later
      1. Private reply 54 min later
         1. Private reply 57 min later
         2. Private reply 2 hr later
            1. Private reply 8 hr later
               1. Private reply 11 hr later
                  1. Private reply 11 hr later
                     1. Private reply 11 hr later
                        1. Private reply 12 hr later
                     2. Private reply 11 hr later
                        1. Private reply 12 hr later
                           1. Private reply 14 hr later
                              1. Private reply 14 hr later
                              2. Private reply 19 hr later
         3. Private reply 2 hr later
            1. Private reply 11 hr later
               1. Private reply 11 hr later
   2. elle mundy 1 hr later

      @zachleat yuck