StyleProvider: Remove the Emotion cache

packages/components/CHANGELOG.md

@@ -4,8 +4,9 @@
 
 ### Breaking Changes
 
--   The component context system no longer merges Emotion-registered classes in `className`. Compose dependent Emotion styles before passing the resulting class name ([#84925](https://github.com/WordPress/gutenberg/pull/84925)).
--   Components that compose Emotion style fragments with `cx()` should pass source-order-dependent fragments in a single `css()` call. Passing separate fragments can change override order after the following components stopped rendering styles through Emotion:
+-   Components no longer use Emotion for styling, class-name composition, or cross-document style injection. Consumers that compose source-order-dependent Emotion fragments must combine them in a single `css()` call before passing the resulting `className`. Consumers using `@emotion/react` or `@emotion/styled` that relied on StyleProvider's cross-document cache must provide their own cache and `CacheProvider`; `StyleProvider` continues to register CSS Module styles. This includes:
+    -   Context-system class-name composition ([#84925](https://github.com/WordPress/gutenberg/pull/84925)).
+    -   `StyleProvider` cache removal ([#85019](https://github.com/WordPress/gutenberg/pull/85019)).
     -   `SelectControl` ([#84732](https://github.com/WordPress/gutenberg/pull/84732))
     -   `DatePicker` ([#84724](https://github.com/WordPress/gutenberg/pull/84724))
     -   `FocalPointPicker` ([#84736](https://github.com/WordPress/gutenberg/pull/84736))

packages/components/src/style-provider/index.tsx

@@ -1,33 +1,7 @@
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import * as uuid from 'uuid';
 import { useInsertionEffect } from '@wordpress/element';
 import { registerDocument } from '@wordpress/style-runtime';
 import type { StyleProviderProps } from './types';
 
-const uuidCache = new Set();
-// Use a weak map so that when the container is detached it's automatically
-// dereferenced to avoid memory leak.
-const containerCacheMap = new WeakMap();
-
-const memoizedCreateCacheWithContainer = ( container: HTMLElement ) => {
-	if ( containerCacheMap.has( container ) ) {
-		return containerCacheMap.get( container );
-	}
-
-	// Emotion only accepts alphabetical and hyphenated keys so we just
-	// strip the numbers from the UUID. It _should_ be fine.
-	let key = uuid.v4().replace( /[0-9]/g, '' );
-	while ( uuidCache.has( key ) ) {
-		key = uuid.v4().replace( /[0-9]/g, '' );
-	}
-	uuidCache.add( key );
-
-	const cache = createCache( { container, key } );
-	containerCacheMap.set( container, cache );
-	return cache;
-};
-
 export function StyleProvider( props: StyleProviderProps ) {
 	const { children, document } = props;
 
@@ -44,9 +18,7 @@ export function StyleProvider( props: StyleProviderProps ) {
 		return null;
 	}
 
-	const cache = memoizedCreateCacheWithContainer( document.head );
-
-	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
+	return <>{ children }</>;
 }
 
 export default StyleProvider;

tools/eslint/suppressions.json

@@ -8804,11 +8804,6 @@
 			"count": 1
 		}
 	},
-	"packages/components/src/style-provider/index.tsx": {
-		"no-restricted-imports": {
-			"count": 2
-		}
-	},
 	"packages/components/src/toggle-group-control/toggle-group-control/utils.ts": {
 		"react-hooks/refs": {
 			"count": 11