feat: allow adding a nonce to style tag injected by ColorModeProvider

chakra-ui · Mar 4, 2024 · 88ea77f · 88ea77f
1 parent f5c3754
commit 88ea77f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/components/src/color-mode/color-mode-provider.tsx b/packages/components/src/color-mode/color-mode-provider.tsx
@@ -44,6 +44,7 @@ export function ColorModeProvider(props: ColorModeProviderProps) {
       useSystemColorMode,
       initialColorMode,
       disableTransitionOnChange,
+      nonce,
     } = {},
     colorModeManager = localStorageManager,
   } = props
@@ -59,7 +60,11 @@ export function ColorModeProvider(props: ColorModeProviderProps) {
   )
 
   const { getSystemTheme, setClassName, setDataset, addListener } = useMemo(
-    () => getColorModeUtils({ preventTransition: disableTransitionOnChange }),
+    () =>
+      getColorModeUtils({
+        nonce,
+        preventTransition: disableTransitionOnChange,
+      }),
     [disableTransitionOnChange],
   )
 

diff --git a/packages/components/src/color-mode/color-mode-types.ts b/packages/components/src/color-mode/color-mode-types.ts
@@ -11,6 +11,7 @@ export interface ColorModeOptions {
   initialColorMode?: ColorModeWithSystem
   useSystemColorMode?: boolean
   disableTransitionOnChange?: boolean
+  nonce?: string
 }
 
 export interface ColorModeContextType {

diff --git a/packages/components/src/color-mode/color-mode.utils.ts b/packages/components/src/color-mode/color-mode.utils.ts
@@ -6,6 +6,7 @@ const classNames = {
 }
 
 type UtilOptions = {
+  nonce?: string
   preventTransition?: boolean
 }
 
@@ -14,7 +15,9 @@ export function getColorModeUtils(options: UtilOptions = {}) {
 
   const utils = {
     setDataset: (value: ColorMode) => {
-      const cleanup = preventTransition ? utils.preventTransition() : undefined
+      const cleanup = preventTransition
+        ? utils.preventTransition(options.nonce)
+        : undefined
       document.documentElement.dataset.theme = value
       document.documentElement.style.colorScheme = value
       cleanup?.()
@@ -45,8 +48,9 @@ export function getColorModeUtils(options: UtilOptions = {}) {
         else mql.removeEventListener("change", listener)
       }
     },
-    preventTransition() {
+    preventTransition(nonce?: string) {
       const css = document.createElement("style")
+      css.nonce = nonce
       css.appendChild(
         document.createTextNode(
           `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,