pass nonce to inline style for disableTransitionOnChange, fixes #303

pacocoursey · Nov 4, 2024 · 7f6fbfd · 7f6fbfd
1 parent 807cfe3
commit 7f6fbfd
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/next-themes/src/index.tsx b/next-themes/src/index.tsx
@@ -50,7 +50,7 @@ const Theme = ({
     }
 
     const name = value ? value[resolved] : resolved
-    const enable = disableTransitionOnChange ? disableAnimation() : null
+    const enable = disableTransitionOnChange ? disableAnimation(nonce) : null
     const d = document.documentElement
 
     const handleAttribute = (attr: Attribute) => {
@@ -77,7 +77,7 @@ const Theme = ({
     }
 
     enable?.()
-  }, [])
+  }, [nonce])
 
   const setTheme = React.useCallback(
     value => {
@@ -219,8 +219,9 @@ const getTheme = (key: string, fallback?: string) => {
   return theme || fallback
 }
 
-const disableAnimation = () => {
+const disableAnimation = (nonce?: string) => {
   const css = document.createElement('style')
+  if (nonce) css.setAttribute('nonce', nonce)
   css.appendChild(
     document.createTextNode(
       `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`

diff --git a/next-themes/src/types.ts b/next-themes/src/types.ts
@@ -50,7 +50,7 @@ export interface ThemeProviderProps extends React.PropsWithChildren {
   attribute?: Attribute | Attribute[] | undefined
   /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
   value?: ValueObject | undefined
-  /** Nonce string to pass to the inline script for CSP headers */
+  /** Nonce string to pass to the inline script and style elements for CSP headers */
   nonce?: string
   /** Props to pass the inline script */
   scriptProps?: ScriptProps