Server side rendering and typestyled libraries

[Silvio]

First off: amazing module, I do all my CSS work using typestyle now.

I'm wondering how singletons could be made to work with server side rendering, particularly React. As you can imagine, the React components import typestyle at the top like so:

import {style} from 'typestyle';

This means it will look inside node_modules, not for a specific instance as documented in the multi-instance setup.

Why should we care? In this case, if you have a library that also does its styling with typestyle, then it will import its own typestyle (inside its own node_modules).

That means when you go get your stylesheet it will contain no styles for those third-party components because it lives in a different typestyle. The end result is your page will come back from the server un-styled for all third party components, and then you'll get a flash on the frontend post hydration.

I can think of a few options, but at the very least, some mention or guidance of this in the docs would help:

1. Somehow be able to inject an instance of typestyle into components, rather than an import at the top. Redux, for example, does this with the Provider that needs to wrap the component to be rendered.
   I also imagine this would fix any concurrency issues, which I haven't tested with typestyle but likely exist with asynchronous server side rendering. Here's literature on a similar issue with react-helmet: https://open.nytimes.com/the-future-of-meta-tag-management-for-modern-react-development-ec26a7dc9183

2. Advise third party libraries to require typestyle as a peerDependency only. That guarantees you'll have only one instance of typestyle "found" by the server. The con of this is that it makes actual development of the library harder. You'll need to install typestyle to compile/etc. But delete it before using it (if you use npm link, for example).
   It also won't solve any potential threading issues.

---

Happy to elaborate. Again, great library. But as a heavy typestyle user, writing a lot of SSR and libraries, I'm running into these obstacles and would love to help fix them.

[B1t]

Regarding (1), you can create individual instances of typestyle: https://typestyle.github.io/#/advanced#multiple-instances. Theoretically this instance could be injected into a component library to route all styles through the same typestyle object.

I can't really comment on (2). Maybe someone else on this project is better versed on the nuances of node_modules.

[Silvio]

@notoriousb1t : that link refers to what I meant as being the ideal "injectable" instance into React. The problem is that there's no way to inject it into server side components.

(2)... same here. I think a peer dependency solves it, but makes development of the library a bit clunkier.

Thanks for the input!

[Frederik Krautwald]

I am also very curious of this. It seems as (2) is maybe the only way to go about this.

[Kelly Campbell]

The workaround I've found for this on SSR only is to re-export the getStyles function from the component library.

[Silvio]

That's a great idea! I'm guessing it's limited to a single library though, right?