Add a StyleProvider to support CSS-in-JS components inside iframes. #31010
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +95 B (0%) Total Size: 1.47 MB
ℹ️ View Unchanged
|
sarayourfriend
force-pushed
the
try/emotion-frame-provider
branch
from
e1263e3 to
379ce12
Compare
|
Reopened to continue debugging. |
youknowriad
reviewed
Apr 21, 2021
youknowriad
reviewed
Apr 21, 2021
youknowriad
reviewed
Apr 21, 2021
youknowriad
force-pushed
the
try/emotion-frame-provider
branch
from
f5fe1bc to
7633796
Compare
youknowriad
changed the title
|
Ok, I managed to fix the issues, it's now working properly. |
youknowriad
requested review from
ajitbohra,
chrisvanpatten and
ellatrix
as code owners
youknowriad
added
[Feature] Full Site Editing
[Feature] UI Components
youknowriad
approved these changes
Apr 21, 2021
ellatrix
reviewed
Apr 21, 2021
| return createCache( { container } ); | ||
| } ); | ||
|
|
||
| export default function FrameProvider( { children, iframeDocument } ) { |
There was a problem hiding this comment.
Could this be renamed to emotion cache provider, perhaps?
There was a problem hiding this comment.
Maybe more StyleFrameProvider or something, I don't think we should be tied to a specific library.
There was a problem hiding this comment.
It provides the cache right? StyleCacheProvider? Or simply StyleProvider.
There was a problem hiding this comment.
it is what makes the styles injection work, I prefer StyleProvider
There was a problem hiding this comment.
StyleProvider might imply that it is necessary for basic style injection, but it's not. I think including the fact that this is specifically for iframes is wise, like StyleFrameProvider or IFrameStyleProvider if we want to be the most descriptive.
There was a problem hiding this comment.
What do you think @ellatrix
There was a problem hiding this comment.
Sure, I just wanted to point out that it's not providing an iframe but rather the style cache. Maybe StylesForIframeProvider?
Not a blocker, I don't care that much :)
There was a problem hiding this comment.
I guess we can always rename it later since it's experimental. I don't mind "StyleProvider" personally because it probably won't break anything if used outside an iframe, it's just useless.
ellatrix
reviewed
Apr 21, 2021
ellatrix
reviewed
Apr 21, 2021
ellatrix
approved these changes
Apr 21, 2021
ellatrix
reviewed
Apr 21, 2021
|
|
||
| const cache = memoizedCreateCacheWithContainer( iframeDocument.head ); | ||
|
|
||
| return <CacheProvider value={ cache }>{ children }</CacheProvider>; |
There was a problem hiding this comment.
I didn't know this existed. It's great that emotion provides this CacheProvider and consumes it.
youknowriad
changed the title
youknowriad
changed the title
This was referenced Jun 17, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
closes #30553
closes #28153
Testing instructions