From fce770ab877427ed5d1d8f1b0a5c46fca3c59172 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 11 Aug 2021 10:15:37 +0200 Subject: [PATCH] Components: use the `__unsafe_useEmotionCache` in the `useCx` hook (#33982) --- package-lock.json | 43 ++++--------------- packages/components/package.json | 4 +- .../components/src/utils/hooks/emotion.d.ts | 5 +++ packages/components/src/utils/hooks/use-cx.ts | 23 +++++----- 4 files changed, 27 insertions(+), 48 deletions(-) create mode 100644 packages/components/src/utils/hooks/emotion.d.ts diff --git a/package-lock.json b/package-lock.json index cd681908d4866d..f112996eceea4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2115,36 +2115,19 @@ } }, "@emotion/react": { - "version": "11.4.0", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.0.tgz", - "integrity": "sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==", + "version": "11.4.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.1.tgz", + "integrity": "sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==", "requires": { "@babel/runtime": "^7.13.10", "@emotion/cache": "^11.4.0", "@emotion/serialize": "^1.0.2", - "@emotion/sheet": "^1.0.1", + "@emotion/sheet": "^1.0.2", "@emotion/utils": "^1.0.0", "@emotion/weak-memoize": "^0.2.5", "hoist-non-react-statics": "^3.3.1" }, "dependencies": { - "@emotion/cache": { - "version": "11.4.0", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz", - "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==", - "requires": { - "@emotion/memoize": "^0.7.4", - "@emotion/sheet": "^1.0.0", - "@emotion/utils": "^1.0.0", - "@emotion/weak-memoize": "^0.2.5", - "stylis": "^4.0.3" - } - }, - "@emotion/memoize": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", - "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" - }, "@emotion/serialize": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", @@ -2158,22 +2141,14 @@ } }, "@emotion/sheet": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz", - "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==" + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz", + "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==" }, "csstype": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" - }, - "hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "requires": { - "react-is": "^16.7.0" - } } } }, @@ -18157,9 +18132,9 @@ "version": "file:packages/components", "requires": { "@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:packages/a11y", diff --git a/packages/components/package.json b/packages/components/package.json index a19c1c3986aed1..8af8b32f533b10 100644 --- 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 new file mode 100644 index 00000000000000..e156f8acf69ffa --- /dev/null +++ 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 index 522b5cf4dc2485..19bc0a797d1279 100644 --- 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 ) ) {