From a790dfa8de2b09c4ea1d7868ee2a14acc015436e Mon Sep 17 00:00:00 2001
From: Chenalejandro <65429905+Chenalejandro@users.noreply.github.com>
Date: Tue, 16 Jul 2024 17:16:29 -0300
Subject: [PATCH] Allowing passing a nonce to inline-scripts/inline-styles to
 have better support for csp (#134)

Signed-off-by: alejandro <chen.alejandro97@protonmail.com>
---
 .../src/components/elements/ssr-layout-effect.tsx    | 10 ++++++++--
 packages/stack/src/providers/theme-provider.tsx      | 12 ++++++++++--
 packages/stack/src/utils/browser-script.tsx          |  4 ++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/stack/src/components/elements/ssr-layout-effect.tsx b/packages/stack/src/components/elements/ssr-layout-effect.tsx
index db7273223..53e08ce05 100644
--- a/packages/stack/src/components/elements/ssr-layout-effect.tsx
+++ b/packages/stack/src/components/elements/ssr-layout-effect.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useLayoutEffect } from "react";
 
-export function SsrScript(props: { script: string }) {
+export function SsrScript(props: { script: string, nonce?: string }) {
   useLayoutEffect(() => {
     // TODO fix workaround: React has a bug where it doesn't run the script on the first CSR render if SSR has been skipped due to suspense
     // As a workaround, we run the script in the <script> tag again after the first render
@@ -9,5 +9,11 @@ export function SsrScript(props: { script: string }) {
     (0, eval)(props.script);
   }, []);
 
-  return <script dangerouslySetInnerHTML={{ __html: props.script }} />;
+  return (
+    <script
+      suppressHydrationWarning
+      nonce={props.nonce}
+      dangerouslySetInnerHTML={{ __html: props.script }}
+    />
+  );
 }
diff --git a/packages/stack/src/providers/theme-provider.tsx b/packages/stack/src/providers/theme-provider.tsx
index ea64942d4..738b8a65c 100644
--- a/packages/stack/src/providers/theme-provider.tsx
+++ b/packages/stack/src/providers/theme-provider.tsx
@@ -79,9 +79,11 @@ function convertColorsToCSS(theme: Theme) {
 export function StackTheme({
   theme,
   children,
+  nonce,
 } : {
   theme?: ThemeConfig,
   children?: React.ReactNode,
+  nonce?: string,
 }) {
   const themeValue: Theme = {
     ...DEFAULT_THEME,
@@ -92,8 +94,14 @@ export function StackTheme({
 
   return (
     <StyledComponentsRegistry>
-      <BrowserScript />
-      <style dangerouslySetInnerHTML={{ __html: globalCSS + '\n' + convertColorsToCSS(themeValue) }} />
+      <BrowserScript nonce={nonce} />
+      <style
+        suppressHydrationWarning
+        nonce={nonce}
+        dangerouslySetInnerHTML={{
+          __html: globalCSS + "\n" + convertColorsToCSS(themeValue),
+        }}
+      />
       {children}
     </StyledComponentsRegistry>
   );
diff --git a/packages/stack/src/utils/browser-script.tsx b/packages/stack/src/utils/browser-script.tsx
index 07a6e675e..da9b7bb29 100644
--- a/packages/stack/src/utils/browser-script.tsx
+++ b/packages/stack/src/utils/browser-script.tsx
@@ -31,6 +31,6 @@ const script = () => {
   });
 };
 
-export function BrowserScript() {
-  return <SsrScript script={`(${script.toString()})()`}/>;
+export function BrowserScript(props : { nonce?: string }) {
+  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;
 }
\ No newline at end of file