feat: emotion cache accessible via shared package context (#3520)

packages/core/src/hooks/useCss.ts

@@ -26,7 +26,7 @@ function getRef(args: any[]) {
   return { args: [argCopy], ref };
 }
 
-const { cssFactory } = (() => {
+const cssFactory = (() => {
   function merge(registered: RegisteredCache, css: CSS, className: string) {
     const registeredStyles: string[] = [];
 
@@ -43,13 +43,11 @@ const { cssFactory } = (() => {
     return rawClassName + css(registeredStyles);
   }
 
-  function innerCssFactory(params: { cache: EmotionCache }) {
-    const { cache } = params;
-
+  function innerCssFactory(cache: EmotionCache) {
     const css: CSS = (...styles: any) => {
       const { ref, args } = getRef(styles);
       const serialized = serializeStyles(args, cache.registered);
-      insertStyles(cache as any, serialized, false);
+      insertStyles(cache, serialized, false);
       return `${cache.key}-${serialized.name}${
         ref === undefined ? "" : ` ${ref}`
       }`;
@@ -60,10 +58,10 @@ const { cssFactory } = (() => {
     return { css, cx };
   }
 
-  return { cssFactory: innerCssFactory };
+  return innerCssFactory;
 })();
 
 export function useCss() {
   const cache = useEmotionCache();
-  return useMemo(() => cssFactory({ cache }), [cache]);
+  return useMemo(() => cssFactory(cache), [cache]);
 }

packages/core/src/hooks/useEmotionCache.ts

@@ -1,7 +1,6 @@
 import { useContext } from "react";
-import { EmotionContext, defaultEmotionCache } from "..";
+import { EmotionContext } from "..";
 
 export function useEmotionCache() {
-  const cache = useContext(EmotionContext)?.cache;
-  return cache || defaultEmotionCache;
+  return useContext(EmotionContext).cache;
 }

packages/core/src/providers/ThemeProvider.tsx

@@ -1,34 +1,24 @@
-import {
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { parseTheme, HvThemeStructure } from "@hitachivantara/uikit-styles";
-import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
+import {
+  HvThemeContext,
+  defaultCacheKey,
+  defaultEmotionCache,
+  EmotionContext,
+} from "@hitachivantara/uikit-react-shared";
 import type { HvThemeContextValue } from "@hitachivantara/uikit-react-shared";
 import {
   createTheme,
   ThemeProvider as MuiThemeProvider,
 } from "@mui/material/styles";
-import createCache, { EmotionCache } from "@emotion/cache";
+import { EmotionCache } from "@emotion/cache";
 import { setElementAttrs } from "@core/utils";
 import { HvTheme } from "@core/types";
 
 export { HvThemeContext };
 export type { HvThemeContextValue };
 
-export const defaultCacheKey = "hv";
-
-export const defaultEmotionCache = createCache({
-  key: defaultCacheKey,
-  prepend: true,
-});
-
-export const EmotionContext = createContext<{ cache: EmotionCache }>({
-  cache: defaultEmotionCache,
-});
+export { defaultCacheKey, defaultEmotionCache, EmotionContext };
 
 interface HvThemeProviderProps {
   children: React.ReactNode;

packages/shared/package.json

@@ -33,6 +33,7 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
+    "@emotion/cache": "^11.11.0",
     "@hitachivantara/uikit-styles": "^5.9.1"
   },
   "devDependencies": {

packages/shared/src/context/EmotionContext.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+
+import createCache, { EmotionCache } from "@emotion/cache";
+
+export const defaultCacheKey = "hv";
+
+export const defaultEmotionCache = createCache({
+  key: defaultCacheKey,
+  prepend: true,
+});
+
+export const EmotionContext = createContext<{ cache: EmotionCache }>({
+  cache: defaultEmotionCache,
+});

packages/shared/src/context/index.ts

@@ -1 +1,2 @@
 export * from "./ThemeContext";
+export * from "./EmotionContext";