vercel / styled-jsx

Full CSS support for JSX without compromises
http://npmjs.com/styled-jsx
MIT License
7.71k stars 261 forks source link

Instance-based API instead of global singleton #64

Open rtsao opened 7 years ago

rtsao commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

rtsao commented 7 years ago

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

giuseppeg commented 6 years ago

We are going to tackle this in #389

merrywhether commented 6 years ago

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

lifeiscontent commented 4 years ago

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