Components: use the __unsafe_useEmotionCache in the useCx hook (#…

…33982)
WordPress · Aug 11, 2021 · fce770a · fce770a
1 parent a439811
commit fce770a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -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",

diff --git a/packages/components/src/utils/hooks/emotion.d.ts b/packages/components/src/utils/hooks/emotion.d.ts
@@ -0,0 +1,5 @@
+import type { EmotionCache } from '@emotion/utils';
+
+declare module '@emotion/react' {
+	export function __unsafe_useEmotionCache(): EmotionCache | null;
+}
diff --git a/packages/components/src/utils/hooks/use-cx.ts b/packages/components/src/utils/hooks/use-cx.ts
@@ -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
@@ -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' );
 
 /**
@@ -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 ) ) {