threepointone/glamor

Flash of unstyled content

Closed this issue · 9 comments

calebmer commented

I’ve found that when the React tree is rendered there is a flash of unstyled content with just the React HTML and without the glamor styles. Is there a suggestion on how to fix this?

Great library by the way! I think this approach makes use of the best of all other CSS-in-JS approaches.

threepointone commented

Thanks, very nice of you to say!

It shouldn't do the flash... do you have a sample to reproduce this?

threepointone commented

I seem to have lost the speedy toggle in the refactor. I'll get that back in; it'll speed up rule insertion a lot and should make this less of an issue. Another ugly workaround is to compile with NODE_ENV=production to trigger speedy.

Lemme know if you have a sample though, cheers.

calebmer commented

Yep, I can confirm that when NODE_ENV=production there is no flash 👍. Unfortunately though I don’t have enough time to put together a sample 😖. Especially since there’s no development build I could import into a codepen.

Thanks though, it seems like you know what’s going on 👍

Feel free to close this whenever you’re comfortable.

threepointone commented

The next release will bring back the speedy flag. I'll bring a dev build for npmcdn too. Will close this once that's done. Thanks for the feedback, and do let me know if the issue pops up again.

  • 👍1
threepointone commented

do you have any feedback you'd like to share? anything I could make better? what is your usecase? please and thanks :)

calebmer commented

Thanks for asking, I always have opinions 😊

So I really like the approach. I remember when I first heard about this library it was in Twitter code screenshots that had been retweeted a couple of times and I was intrigued, then when I actually wanted to learn more about the library, I couldn't find it 😖, luckily I dug through my Twitter feed and arrived here.

Recently I started building a React project with aphrodite and I was running into some limitations. When I hovered over a button element I wanted to change the color of a child icon. Simple, right? In aphrodite, not so much. It was still early in the project and partly inspired by @ryanflorence's recent video on actual inline styles I switched the code base to glamor to take advantage of the select function. I was also using style-loader/css-loader, in the future I now want to replace them with insertRule from glamor. So the reasons I enjoy the switch are as follows:

  1. No class names. I think this is an undersold benefit of this approach, I'd definitely recommend throwing that benefit in the README. "Forget about naming styles!". Not having to give every div a name is awesome! And it takes so long to write className…
  2. Closeness to CSS. This one is definitely glamor specific. There's definitely a big move to try and make style interfaces common across all platforms. This approach intentionally shortcuts some of the power of CSS. I might be in the minority, but I still believe CSS has a very elegant design although I would never use it directly in a large app. So the escape hatches are critical.
  3. The code just looks good. It really does 😊. Note I'm using the {...style()} syntax, I think the other styles just aren't as good. I've also barely looked at the tools outside of index.js, so I haven't touched react.js.
  4. All the reasons @ryanflorence gave for liking inline styles, he was right…(although I think the jsxstyle approach leaves much to be desired. It's much harder to build in the CSS escape hatches, or to write semantic HTML).

I haven't been using it for long (about a week now) so I can't comment on any severe architectural limitations, but there are some gotchas I've found. Specificity issues with pseudo-classes is one. So :active must always be more specific then :hover and so they must be ordered appropriately in the style sheet. Also there was some wierdness with auto-prefixing when I tried writing something like: top: ['50%', 'calc(50% - 10px)'] (because I wanted a fallback for browsers that didn't support calc. It's nothing an !important won't fix though.

One thing a will note which probably should be warned about is animations. I haven't tested this, but I assume if you want 60fps you shouldn't be updating your style object super frequently, correct? At that point I tend to fallback to the native style attribute. As a side not I'm using @chenglou's react-motion.

I also want to say, bravo on the implementation! It's really pretty neat how the software works. I saw you had a TODO item for static optimizations, it would be sweet to see a Babel transform or something 😊

Now it's your turn, why did you make this framework, what use cases of yours does it solve, what's your vision for its future?

  • 👍1
threepointone commented

This is greeeeeat feedback, thank you much!

  • the :active / :hover issue; this is something glamor should be able to help with (and perhaps automatically fix?), opened #36 for the same
  • can you give me a small input/expected/actual testcase for the fallback value problem? I want fallbacks to work in glamor, maybe I got my implementation wrong :|
  • and yes, you don't want to use this for animations. I did some earlier work to see if it's possible, but came to the same conclusion as you; directly targeting style prop makes more sense/is faster/better. glamor for the rest!

I recommend you try out the /react shim. specifically the css prop via the createElement patch is a lot of fun/ saves typing.

  • it accepts raw styles, so this is valid : <div css={{ color: 'red' }}/>
  • it accepts arrays, so this is valid <div css={[ { color: 'red' }, hover({ color: 'blue' })]} />

So I've recently started building my own thing, and wasn't happy with 1-2 things with every library. aphrodite came closest, but the lack of escape hatches/ async behavior made it hard to use. really wanted a library with no compromises, so I went ahead and built it :) That's all really, no crazy grand vision.

It's pretty close to "feature complete", I plan on getting some enhancements in and then polishing it as time goes on. Happy to hear ideas :)

  • 👍1
seidtgeist commented

@calebmer @threepointone OMG I wish we were seeing more dialogs like this. You're both awesome ✨

༼ つ ◕_◕ ༽つ✨✨✨

  • 👍1
ryanflorence commented

DOWN WITH NAMING EVERYTHING THAT DOESNT DESERVE A NAME!!!!
✌🏼️👀👨🏽👩‍👩‍👧‍👦👕🎩
On Sun, Oct 16, 2016 at 6:54 AM Sunil Pai notifications@github.com wrote:

Closed #33 #33.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#33 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAGHaPED2HWPmdtkH5CnQrTJIO8lavXIks5q0iyhgaJpZM4JuzTV
.

  • 👍3
  • 😄1