Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: use the __unsafe_useEmotionCache in the useCx hook #33982

Merged
merged 5 commits into from
Aug 11, 2021
Merged

Components: use the __unsafe_useEmotionCache in the useCx hook #33982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ac37a65
Update @emotion/react and @emotion/cache versions
ciampo Aug 10, 2021
e7fe713
Add types for `__unsafe_useEmotionCache` via module augmentation
ciampo Aug 10, 2021
322f256
Use `__unsafe_useEmotionCache` in the `useCx` hook
ciampo Aug 10, 2021
5b2db78
Expand `!= null` check into `undefined` + `null` eqeqeq check
ciampo Aug 10, 2021
40bd650
Throw error when the returned Emotion cache is `null`
ciampo Aug 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 9 additions & 34 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@
],
"dependencies": {
"@babel/runtime": "^7.13.10",
"@emotion/cache": "^11.1.3",
"@emotion/cache": "^11.4.0",
"@emotion/css": "^11.1.3",
"@emotion/react": "^11.1.5",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@emotion/utils": "1.0.0",
"@wordpress/a11y": "file:../a11y",
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/utils/hooks/emotion.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import type { EmotionCache } from '@emotion/utils';

declare module '@emotion/react' {
export function __unsafe_useEmotionCache(): EmotionCache | null;
}
23 changes: 11 additions & 12 deletions packages/components/src/utils/hooks/use-cx.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
/**
* External dependencies
*/
// eslint-disable-next-line no-restricted-imports
import type { Context } from 'react';
import { CacheProvider, EmotionCache } from '@emotion/react';
import { __unsafe_useEmotionCache as useEmotionCache } from '@emotion/react';
import type { SerializedStyles } from '@emotion/serialize';
import { insertStyles } from '@emotion/utils';
// eslint-disable-next-line no-restricted-imports
Expand All @@ -12,16 +10,11 @@ import { cx as innerCx, ClassNamesArg } from '@emotion/css';
/**
* WordPress dependencies
*/
import { useContext, useCallback } from '@wordpress/element';

// @ts-ignore Private property
const EmotionCacheContext: Context< EmotionCache > = CacheProvider._context;

const useEmotionCacheContext = () => useContext( EmotionCacheContext );
import { useCallback } from '@wordpress/element';

const isSerializedStyles = ( o: any ): o is SerializedStyles =>
// eslint-disable-next-line eqeqeq
o != null &&
typeof o !== 'undefined' &&
o !== null &&
[ 'name', 'styles' ].every( ( p ) => typeof o[ p ] !== 'undefined' );

/**
Expand All @@ -46,10 +39,16 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
* }
*/
export const useCx = () => {
const cache = useEmotionCacheContext();
const cache = useEmotionCache();

const cx = useCallback(
( ...classNames: ( ClassNamesArg | SerializedStyles )[] ) => {
if ( cache === null ) {
throw new Error(
'The `useCx` hook should be only used within a valid Emotion Cache Context'
);
}

return innerCx(
...classNames.map( ( arg ) => {
if ( isSerializedStyles( arg ) ) {
Expand Down