fix: pass the page's CSP nonce to the MUI style cache (1.0.1)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@project-graphite/ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Project Graphite design tokens, theme and React components.",
   "license": "MIT",
   "repository": {
@@ -28,13 +28,15 @@
     "preview:dev": "vite --config preview/vite.config.ts"
   },
   "peerDependencies": {
+    "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^9.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@emotion/cache": "11.14.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@mui/material": "9.5.0",

src/UiProvider.tsx

@@ -1,5 +1,6 @@
-import GlobalStyles from '@mui/material/GlobalStyles';
-import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
+import createCache, { type EmotionCache } from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { ThemeProvider } from '@mui/material/styles';
 import { createContext, useContext, useMemo, type AnchorHTMLAttributes, type ComponentType, type ReactNode } from 'react';
 import { createGraphiteTheme } from './theme.js';
 
@@ -13,15 +14,31 @@ function Anchor(props: UiLinkProps) {
 
 const LinkContext = createContext<ComponentType<UiLinkProps>>(Anchor);
 
+let layeredCache: EmotionCache | undefined;
+
+function getLayeredCache() {
+  if (layeredCache) return layeredCache;
+  const nonce = document.querySelector<HTMLMetaElement>('meta[name="csp-nonce"]')?.content || undefined;
+  const insertionPoint = document.createElement('style');
+  if (nonce) insertionPoint.setAttribute('nonce', nonce);
+  insertionPoint.textContent = '@layer theme, base, mui, components, utilities;';
+  document.head.prepend(insertionPoint);
+  const cache = createCache({ insertionPoint, key: 'mui', nonce });
+  const insert = cache.insert;
+  cache.insert = (selector, serialized, sheet, shouldCache) =>
+    insert(selector, { ...serialized, styles: `@layer mui {${serialized.styles}}` }, sheet, shouldCache);
+  layeredCache = cache;
+  return cache;
+}
+
 export function UiProvider({ children, link }: { children: ReactNode; link: ComponentType<UiLinkProps> }) {
   const theme = useMemo(() => createGraphiteTheme(link), [link]);
   return (
-    <StyledEngineProvider enableCssLayer>
-      <GlobalStyles styles="@layer theme, base, mui, components, utilities;" />
+    <CacheProvider value={getLayeredCache()}>
       <ThemeProvider theme={theme}>
         <LinkContext.Provider value={link}>{children}</LinkContext.Provider>
       </ThemeProvider>
-    </StyledEngineProvider>
+    </CacheProvider>
   );
 }