Add a StyleProvider to support CSS-in-JS components inside iframes. #31010
Conversation
This file contains hidden or 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
Contributor
|
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
Contributor
|
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
Contributor
youknowriad
left a comment
youknowriad
left a comment
There was a problem hiding this comment.
This looks good to me but I worked on it so another tester would be good here :)
ellatrix
reviewed
Apr 21, 2021
| return createCache( { container } ); | ||
| } ); | ||
|
|
||
| export default function FrameProvider( { children, iframeDocument } ) { |
Member
There was a problem hiding this comment.
Could this be renamed to emotion cache provider, perhaps?
Contributor
There was a problem hiding this comment.
Maybe more StyleFrameProvider or something, I don't think we should be tied to a specific library.
Member
There was a problem hiding this comment.
It provides the cache right? StyleCacheProvider? Or simply StyleProvider.
Contributor
There was a problem hiding this comment.
it is what makes the styles injection work, I prefer StyleProvider
Contributor
Author
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.
Member
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 :)
Contributor
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
Member
ellatrix
left a comment
ellatrix
left a comment
There was a problem hiding this comment.
I can see the style tags in the head. Nice work!
ellatrix
reviewed
Apr 21, 2021
|
|
||
| const cache = memoizedCreateCacheWithContainer( iframeDocument.head ); | ||
|
|
||
| return <CacheProvider value={ cache }>{ children }</CacheProvider>; |
Member
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