components: Add useCx #33172
Merged
components: Add useCx #33172
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: +12.4 kB (+1%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
ciampo
reviewed
Jul 6, 2021
ciampo
reviewed
Jul 6, 2021
| import { useContext, useCallback } from '@wordpress/element'; | ||
|
|
||
| // @ts-ignore Private property | ||
| const EmotionCacheContext: Context< EmotionCache > = CacheProvider._context; |
There was a problem hiding this comment.
We may not need to access a private property if emotion-js/emotion#2418 gets merged 🤞
There was a problem hiding this comment.
Yeah. Unfortunately it seems that my PR isn't gaining any traction.
Looking at the React internals, they seem to use this property a lot, so I would be surprised if it went away completely in the future: https://github.com/facebook/react/search?q=._context
ciampo
reviewed
Jul 6, 2021
| ...classNames.map( ( arg ) => { | ||
| if ( isSerializedStyles( arg ) ) { | ||
| insertStyles( cache, arg, false ); | ||
| return `${ cache.key }-${ arg.name }`; |
There was a problem hiding this comment.
Is there any chance that this interpolation technique may change in emotion and potentially break this hook?
There was a problem hiding this comment.
I doubt it, but we'd notice it quickly I would think. Testing that iframes are working with Emotion should be something we do every Emotion upgrade.
There was a problem hiding this comment.
Testing that iframes are working with Emotion
This is actually a good point. Should we also add a unit test and/or storybook story to showcase iframe compatibility?
There was a problem hiding this comment.
Oh yeah, that'd be good to do, I'll add it.
ciampo
approved these changes
Jul 7, 2021
sarayourfriend
added a commit
that referenced
this pull request
Jul 15, 2021
* components: Add useCx * Add tests * Add JSDoc * Add story for useCx
12 tasks
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.
Description
Adds a
useCxhook which creates acxfunction that is able to take inSerializedStylesreturned by thecssfunction from@emotion/react. It also attaches these to the current EmotionCache meaning that it will work with iframes.How has this been tested?
Unit tests and storybook.
Types of changes
New feature.
Checklist:
*.native.jsfiles for terms that need renaming or removal).