Instance-based API instead of global singleton

[rtsao]

I think it would be nice if styled-jsx had a non-singleton interface.

The main use case I've found where a global singleton is problematic is related to rendering within iframes. In short, styles from components rendered within a iframe get rendered outside the iframe, preventing the styles from reaching inside the iframe.

The common pattern to solve this is to rely on React context to share instances, which allow the instance to be overridden within an iframe by overriding context. Then styles from components within a given iframe will be rendered within the iframe using its own instance.

This is somewhat uncommon use case, but creating a singleton interface from an instance is straightforward whereas going the reverse direction is much more difficult. I think making separate packages for the core and singleton interface would not add too much additional complexity or maintenance effort. I'd be happy to work on a PR, otherwise feel free to close this issue.

[rauchg]

After we did an implementation example of Styletron with custom <Document> in next, @nkzawa and I both thought that your approach with the higher order component and context is probably the best one for server rendering stuff :)

[giuseppeg]

@rtsao would you like / have time to implement this?

[rtsao]

@giuseppeg Someone else can jump on this as it looks like I probably won't be able to get to this anytime soon.

[giuseppeg]

We are going to tackle this in #389

[merrywhether]

Is this something with any internal momentum? Or is it something that a community member will probably have to tackle?

[lifeiscontent]

@giuseppeg any update on this? I'm running into this issue and I'm trying to launch a UI kit with styled-jsx.