RFC: Move styling to react-look

[mattkrick]

Styling is always a pain. However, I think moving to react-look would make them less of a pain.
https://github.com/rofrischmann/react-look
general info on inline styling: http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm (aphrodite is very similar to react-look)

Pros:

• Same API for React Native
• Uses pure CSS behind the scenes for media queries & pseudos, so it's fast
• No need for another HTTP call just for the stylesheet
• Send modular css, not a big prerendered dump (like what we currently do)
• Faster webpack build times

Cons:

• can't use react-dom-stream with it (or maybe you can? prove me wrong, please!)
• ?

[wtgtybhertgeghgtwtg]

I can't seem to tell from the docs, but how will it play with Content Security Policy?

[mattkrick]

what's your concern with CSP?

[tychota]

Sometimes csp are really strict about inline script/style.

[wtgtybhertgeghgtwtg]

I'm not a fan of style-src unsafe-inline. The extract-text-webpack-plugin can extract style elements to stylesheets, but depending on how react-look does its stateful conditions, it might not be sufficient.

On another note, how will this issue work with #108?

[mattkrick]

ohhhh! inline styles has nothing to do with unsafe-inline. it just means you write your css in a .js file.

For 3rd party css files (leaflet, font-awesome, graphiql, etc) I'm not sure what the best thing to do is... probably stick em in a <style> tag? Hopefully push em back to load em as lazily as possible.

[patrickleet]

@mattkrick Ever get into this? Any solution for the issues with react-dom-stream?

[wtgtybhertgeghgtwtg]

Issues with react-dom-stream might not be easy to work with. Officially, it doesn't play nice with React 15, so that's not making it any easier.
aickin/react-dom-stream#19 (comment)

[mattkrick]

Yep, react-look is implemented in Action here: github.com/parabolinc/action

Action is exactly like meatier, except I'm being paid to build it, so it'll probably take over meatier in a few months. (Although it uses auth0 instead of DIY auth).

Dom streaming just isn't possible though since the styles are rolled up into 1 large style tag for SSR. I mean, I could generate the HTML string and stream that on my own, but I just don't know how much benefit that will have. With the goal of just sending out HTML above the fold, probably very little.

[patrickleet]

Awesome, thanks for the info, I'll look at Action!

[patrickleet]

@mattkrick how does routesOrPrerender() work?

[mattkrick]

@patrickleet 😳 oh wow, you actually did look into it!

react-look stores all the styles in a singleton. So, if all the routes are in their own client-only webpack bundle, and the singleton is created with another version of react-look, we're not gonna catch em all. Getting rid of the singleton would be really, really difficult... a friend & i burned about 4 hours trying to do that. So instead, I merged the prerender code in with the client bundle.
However, that's not good enough because we still need to use the client-only routes to figure out what route to SSR. So, we could build a client-only bundle and a client-only+prerender bundle, but an entirely new webpack build means an extra 10-40 seconds compile time. bleh.
So, since the routes is a subset of client-only+prerender, i made it dynamic so you can chose the subset or the superset.

hope that makes sense. it's not glamorous, but it works & build times are screaming fast.

[patrickleet]

http://fela.js.org/

[mattkrick]

I am very excited about fela. All the goodness of react-look without the bloat! We'll be switching over our production app as soon as the dust settles.

[patrickleet]

Things are changing fast! (per usual) Yea it looks pretty awesome. I was about to start converting some radium stuff to react look and saw that posted on the react-look repo, thinking I might as well just jump straight into fela intstead.

[mattkrick]

most definitely, a couple cobwebs are starting to creep up on react-look, which is definitely understandable... nobody likes to maintain a library they no longer use. keep me posted on how you like it!