search

emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.41k stars 1.11k forks source link

Selector scoping for generated classNames inside iframe #1301

Closed joaomframos closed 5 years ago

joaomframos commented 5 years ago

Hello, I'm working on a project where we are required to use several iframes and the classes need to carefully scoped.

I found an earlier issue https://github.com/emotion-js/emotion/issues/760 that almost describes exactly what I am trying to achieve but I am failing to apply the scope inside the iframe.

While searching, I came across HSDS: React, a project developed by the creator of the issue referenced above, and its storybook where they created a story that describes this exact use case but I cannot seem to find a way to replicate it.

I created a sandbox project based on the one mentioned on the same issue in order to find a solution for my issue but I keep on getting the same dead end: as long as the ScopeProvider is defined within the iframe, the rules is not injected into the stylesheet.

If you give it a try, you'll notice that the iframe shares a copy of the outer code and, by default, the iframe will display without the styling rule. As soon as we press the 'toggle' button on top (which only removes the ScopeProvider) the CSS rule is now properly applied.

All I need is ScopeProvider to work inside the iframe, applying the proper css scope.

Emotion Version: 10.0.5 React Version: 16.8.6

joaomframos commented 5 years ago

After taking another look at my own issue and the approach I took, I understood that I completely whiffed the implementation and should have used the ScopeProvider with the proper container on CreateCache.