From cf5d7dd4dabc8f878cea8c2a36dd375b1fc8795d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 23 Feb 2025 15:50:38 +0100
Subject: [PATCH 01/17] Allow `nonce` to be used on hoistable styles

---
 .../src/server/ReactFizzConfigDOM.js          | 44 +++++++++--
 .../src/__tests__/ReactDOMFizzServer-test.js  | 45 +++++++++++
 .../src/__tests__/ReactDOMFloat-test.js       | 79 +++++++++++++++++++
 3 files changed, 160 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 6a86cbb2652fa..c191cbf283510 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2712,6 +2712,7 @@ function pushStyle(
   }
   const precedence = props.precedence;
   const href = props.href;
+  const nonce = props.nonce;
 
   if (
     insertionMode === SVG_MODE ||
@@ -2759,9 +2760,23 @@ function pushStyle(
         rules: ([]: Array<Chunk | PrecomputedChunk>),
         hrefs: [stringToChunk(escapeTextForBrowser(href))],
         sheets: (new Map(): Map<string, StylesheetResource>),
+        nonce: nonce && stringToChunk(escapeTextForBrowser(nonce)),
       };
       renderState.styles.set(precedence, styleQueue);
     } else {
+      if (!('nonce' in styleQueue)) {
+        // `styleQueue` could have been created by `preinit` where `nonce` is not required
+        styleQueue.nonce = nonce && stringToChunk(escapeTextForBrowser(nonce));
+      }
+      if (__DEV__) {
+        if (nonce !== styleQueue.nonce) {
+          console.error(
+            'React encountered a hoistable style tag with "%s" nonce. It doesn\'t match the previously encountered nonce "%s". They have to be the same',
+            nonce && stringToChunk(escapeTextForBrowser(nonce)),
+            styleQueue.nonce,
+          );
+        }
+      }
       // We have seen this precedence before and need to track this href
       styleQueue.hrefs.push(stringToChunk(escapeTextForBrowser(href)));
     }
@@ -4684,8 +4699,9 @@ function escapeJSObjectForInstructionScripts(input: Object): string {
 const lateStyleTagResourceOpen1 = stringToPrecomputedChunk(
   '<style media="not all" data-precedence="',
 );
-const lateStyleTagResourceOpen2 = stringToPrecomputedChunk('" data-href="');
-const lateStyleTagResourceOpen3 = stringToPrecomputedChunk('">');
+const lateStyleTagResourceOpen2 = stringToPrecomputedChunk('" nonce="');
+const lateStyleTagResourceOpen3 = stringToPrecomputedChunk('" data-href="');
+const lateStyleTagResourceOpen4 = stringToPrecomputedChunk('">');
 const lateStyleTagTemplateClose = stringToPrecomputedChunk('</style>');
 
 // Tracks whether the boundary currently flushing is flushign style tags or has any
@@ -4701,6 +4717,7 @@ function flushStyleTagsLateForBoundary(
 ) {
   const rules = styleQueue.rules;
   const hrefs = styleQueue.hrefs;
+  const nonce = styleQueue.nonce;
   if (__DEV__) {
     if (rules.length > 0 && hrefs.length === 0) {
       console.error(
@@ -4712,13 +4729,17 @@ function flushStyleTagsLateForBoundary(
   if (hrefs.length) {
     writeChunk(this, lateStyleTagResourceOpen1);
     writeChunk(this, styleQueue.precedence);
-    writeChunk(this, lateStyleTagResourceOpen2);
+    if (nonce) {
+      writeChunk(this, lateStyleTagResourceOpen2);
+      writeChunk(this, nonce);
+    }
+    writeChunk(this, lateStyleTagResourceOpen3);
     for (; i < hrefs.length - 1; i++) {
       writeChunk(this, hrefs[i]);
       writeChunk(this, spaceSeparator);
     }
     writeChunk(this, hrefs[i]);
-    writeChunk(this, lateStyleTagResourceOpen3);
+    writeChunk(this, lateStyleTagResourceOpen4);
     for (i = 0; i < rules.length; i++) {
       writeChunk(this, rules[i]);
     }
@@ -4805,9 +4826,10 @@ function flushStyleInPreamble(
 const styleTagResourceOpen1 = stringToPrecomputedChunk(
   '<style data-precedence="',
 );
-const styleTagResourceOpen2 = stringToPrecomputedChunk('" data-href="');
+const styleTagResourceOpen2 = stringToPrecomputedChunk('" nonce="');
+const styleTagResourceOpen3 = stringToPrecomputedChunk('" data-href="');
 const spaceSeparator = stringToPrecomputedChunk(' ');
-const styleTagResourceOpen3 = stringToPrecomputedChunk('">');
+const styleTagResourceOpen4 = stringToPrecomputedChunk('">');
 
 const styleTagResourceClose = stringToPrecomputedChunk('</style>');
 
@@ -4822,22 +4844,27 @@ function flushStylesInPreamble(
 
   const rules = styleQueue.rules;
   const hrefs = styleQueue.hrefs;
+  const nonce = styleQueue.nonce;
   // If we don't emit any stylesheets at this precedence we still need to maintain the precedence
   // order so even if there are no rules for style tags at this precedence we emit an empty style
   // tag with the data-precedence attribute
   if (!hasStylesheets || hrefs.length) {
     writeChunk(this, styleTagResourceOpen1);
     writeChunk(this, styleQueue.precedence);
+    if (nonce) {
+      writeChunk(this, styleTagResourceOpen2);
+      writeChunk(this, nonce);
+    }
     let i = 0;
     if (hrefs.length) {
-      writeChunk(this, styleTagResourceOpen2);
+      writeChunk(this, styleTagResourceOpen3);
       for (; i < hrefs.length - 1; i++) {
         writeChunk(this, hrefs[i]);
         writeChunk(this, spaceSeparator);
       }
       writeChunk(this, hrefs[i]);
     }
-    writeChunk(this, styleTagResourceOpen3);
+    writeChunk(this, styleTagResourceOpen4);
     for (i = 0; i < rules.length; i++) {
       writeChunk(this, rules[i]);
     }
@@ -5534,6 +5561,7 @@ export type StyleQueue = {
   rules: Array<Chunk | PrecomputedChunk>,
   hrefs: Array<Chunk | PrecomputedChunk>,
   sheets: Map<string, StylesheetResource>,
+  nonce?: ?Chunk,
 };
 
 export function createHoistableState(): HoistableState {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 38cb7798d5f6f..8d9ef397e7c28 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10331,4 +10331,49 @@ describe('ReactDOMFizzServer', () => {
       </html>,
     );
   });
+
+  it('can render styles with nonce', async () => {
+    CSPnonce = 'R4nd0m';
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce={CSPnonce}>{`.foo { color: hotpink; }`}</style>
+          <style
+            href="bar"
+            precedence="default"
+            nonce={CSPnonce}>{`.bar { background-color: blue; }`}</style>
+        </>,
+      );
+      pipe(writable);
+    });
+    expect(document.querySelector('style').nonce).toBe(
+      CSPnonce,
+    );
+  });
+
+  // @gate __DEV__
+  it('warns when it encounters a mismatched nonce on a style', async () => {
+    CSPnonce = 'R4nd0m';
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce={CSPnonce}>{`.foo { color: hotpink; }`}</style>
+          <style
+            href="bar"
+            precedence="default"
+            nonce={`${CSPnonce}${CSPnonce}`}>{`.bar { background-color: blue; }`}</style>
+        </>,
+      );
+      pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'React encountered a hoistable style tag with "R4nd0mR4nd0m" nonce. It doesn\'t match the previously encountered nonce "R4nd0m". They have to be the same',
+    ]);
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 4375ddb7d8deb..7b7d9115cb1ea 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -8435,6 +8435,85 @@ background-color: green;
             : '\n    in body (at **)' + '\n    in html (at **)'),
       ]);
     });
+
+    it('can emit styles with nonce', async () => {
+      const nonce = 'R4nD0m';
+      const fooCss = '.foo { color: hotpink; }';
+      const barCss = '.bar { background-color: blue; }';
+      const bazCss = '.baz { border: 1px solid black; }';
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Suspense>
+                <BlockedOn value="first">
+                  <div>first</div>
+                  <style href="foo" precedence="default" nonce={nonce}>
+                    {fooCss}
+                  </style>
+                  <style href="bar" precedence="default" nonce={nonce}>
+                    {barCss}
+                  </style>
+                  <BlockedOn value="second">
+                    <div>second</div>
+                    <style href="baz" precedence="default" nonce={nonce}>
+                      {bazCss}
+                    </style>
+                  </BlockedOn>
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('first');
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <style
+              data-href="foo bar"
+              data-precedence="default"
+              media="not all"
+              nonce={nonce}>
+              {`${fooCss}${barCss}`}
+            </style>
+          </body>
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('second');
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo bar" data-precedence="default" nonce={nonce}>
+              {`${fooCss}${barCss}`}
+            </style>
+            <style data-href="baz" data-precedence="default" nonce={nonce}>
+              {bazCss}
+            </style>
+          </head>
+          <body>
+            <div>first</div>
+            <div>second</div>
+          </body>
+        </html>,
+      );
+    });
   });
 
   describe('Script Resources', () => {

From 947e2f188a85cc94190f03cc1756039e62987ed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 6 Apr 2025 10:17:33 +0200
Subject: [PATCH 02/17] remove `@gate`

---
 packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 972c3d7b4836e..073f4d6e79697 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10269,7 +10269,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate __DEV__
   it('warns when it encounters a mismatched nonce on a style', async () => {
     CSPnonce = 'R4nd0m';
     await act(() => {

From 57b4c9efc125f38f0c7e855221723e529b0b21ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 25 Apr 2025 18:31:21 +0200
Subject: [PATCH 03/17] tweak logic

---
 .../src/server/ReactFizzConfigDOM.js          | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index b7ff1be1abc48..d5c75cebb860e 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2763,23 +2763,17 @@ function pushStyle(
         nonce: nonce && stringToChunk(escapeTextForBrowser(nonce)),
       };
       renderState.styles.set(precedence, styleQueue);
-    } else {
-      if (!('nonce' in styleQueue)) {
-        // `styleQueue` could have been created by `preinit` where `nonce` is not required
-        styleQueue.nonce = nonce && stringToChunk(escapeTextForBrowser(nonce));
-      }
-      if (__DEV__) {
-        if (nonce !== styleQueue.nonce) {
-          console.error(
-            'React encountered a hoistable style tag with "%s" nonce. It doesn\'t match the previously encountered nonce "%s". They have to be the same',
-            nonce && stringToChunk(escapeTextForBrowser(nonce)),
-            styleQueue.nonce,
-          );
-        }
-      }
+    } else if (nonce === styleQueue.nonce) {
       // We have seen this precedence before and need to track this href
       styleQueue.hrefs.push(stringToChunk(escapeTextForBrowser(href)));
+    } else if (__DEV__) {
+      console.error(
+        'React encountered a hoistable style tag with "%s" nonce. It doesn\'t match the previously encountered nonce "%s". They have to be the same',
+        nonce && stringToChunk(escapeTextForBrowser(nonce)),
+        styleQueue.nonce,
+      );
     }
+
     pushStyleContents(styleQueue.rules, props);
   }
   if (styleQueue) {
@@ -5561,7 +5555,7 @@ export type StyleQueue = {
   rules: Array<Chunk | PrecomputedChunk>,
   hrefs: Array<Chunk | PrecomputedChunk>,
   sheets: Map<string, StylesheetResource>,
-  nonce?: ?Chunk,
+  nonce: ?Chunk,
 };
 
 export function createHoistableState(): HoistableState {

From cbf18c53e5dc7294a5e3406f38cbccd690d44ed2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 25 Apr 2025 21:19:02 +0200
Subject: [PATCH 04/17] tweak logic

---
 .../src/server/ReactFizzConfigDOM.js          | 17 ++++------
 .../src/__tests__/ReactDOMFizzServer-test.js  | 34 ++++++++++++++++---
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index d5c75cebb860e..2efebf33c3564 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2757,24 +2757,21 @@ function pushStyle(
       // to create a StyleQueue.
       styleQueue = {
         precedence: stringToChunk(escapeTextForBrowser(precedence)),
-        rules: ([]: Array<Chunk | PrecomputedChunk>),
+        rules: pushStyleContents(([]: Array<Chunk | PrecomputedChunk>), props),
         hrefs: [stringToChunk(escapeTextForBrowser(href))],
         sheets: (new Map(): Map<string, StylesheetResource>),
-        nonce: nonce && stringToChunk(escapeTextForBrowser(nonce)),
+        nonce: nonce,
       };
       renderState.styles.set(precedence, styleQueue);
     } else if (nonce === styleQueue.nonce) {
       // We have seen this precedence before and need to track this href
       styleQueue.hrefs.push(stringToChunk(escapeTextForBrowser(href)));
+      pushStyleContents(styleQueue.rules, props);
     } else if (__DEV__) {
       console.error(
-        'React encountered a hoistable style tag with "%s" nonce. It doesn\'t match the previously encountered nonce "%s". They have to be the same',
-        nonce && stringToChunk(escapeTextForBrowser(nonce)),
-        styleQueue.nonce,
+        "React encountered a hoistable style tag with nonce. It doesn't match the previously encountered nonce. They have to be the same",
       );
     }
-
-    pushStyleContents(styleQueue.rules, props);
   }
   if (styleQueue) {
     // We need to track whether this boundary should wait on this resource or not.
@@ -2898,7 +2895,7 @@ function pushStyleContents(
     target.push(stringToChunk(escapeStyleTextContent(child)));
   }
   pushInnerHTML(target, innerHTML, children);
-  return;
+  return target;
 }
 
 function pushImg(
@@ -4725,7 +4722,7 @@ function flushStyleTagsLateForBoundary(
     writeChunk(this, styleQueue.precedence);
     if (nonce) {
       writeChunk(this, lateStyleTagResourceOpen2);
-      writeChunk(this, nonce);
+      writeChunk(this, stringToChunk(escapeTextForBrowser(nonce)));
     }
     writeChunk(this, lateStyleTagResourceOpen3);
     for (; i < hrefs.length - 1; i++) {
@@ -4847,7 +4844,7 @@ function flushStylesInPreamble(
     writeChunk(this, styleQueue.precedence);
     if (nonce) {
       writeChunk(this, styleTagResourceOpen2);
-      writeChunk(this, nonce);
+      writeChunk(this, stringToChunk(escapeTextForBrowser(nonce)));
     }
     let i = 0;
     if (hrefs.length) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 073f4d6e79697..bf40ad26b4de0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10264,12 +10264,25 @@ describe('ReactDOMFizzServer', () => {
       );
       pipe(writable);
     });
-    expect(document.querySelector('style').nonce).toBe(
-      CSPnonce,
+    expect(document.querySelector('style').nonce).toBe(CSPnonce);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo bar"
+              nonce={
+                CSPnonce
+              }>{`.foo { color: hotpink; }.bar { background-color: blue; }`}</style>
+          </div>
+        </body>
+      </html>,
     );
   });
 
-  it('warns when it encounters a mismatched nonce on a style', async () => {
+  it("shouldn't render styles with mismatched nonce", async () => {
     CSPnonce = 'R4nd0m';
     await act(() => {
       const {pipe} = renderToPipeableStream(
@@ -10287,7 +10300,20 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
     assertConsoleErrorDev([
-      'React encountered a hoistable style tag with "R4nd0mR4nd0m" nonce. It doesn\'t match the previously encountered nonce "R4nd0m". They have to be the same',
+      'React encountered a hoistable style tag with nonce. It doesn\'t match the previously encountered nonce. They have to be the same',
     ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo"
+              nonce={CSPnonce}>{`.foo { color: hotpink; }`}</style>
+          </div>
+        </body>
+      </html>,
+    );
   });
 });

From 7906af5de9aab4fba90e37103f831d4ba66a127c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 25 Apr 2025 21:21:38 +0200
Subject: [PATCH 05/17] fmt

---
 packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index a8e21ef355f1c..c4fe15c03602c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10301,7 +10301,7 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
     assertConsoleErrorDev([
-      'React encountered a hoistable style tag with nonce. It doesn\'t match the previously encountered nonce. They have to be the same',
+      "React encountered a hoistable style tag with nonce. It doesn't match the previously encountered nonce. They have to be the same",
     ]);
     expect(getVisibleChildren(document)).toEqual(
       <html>

From 3c152a91d0bd00649d4a170a98d8b0882b64d6f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 25 Apr 2025 23:54:44 +0200
Subject: [PATCH 06/17] fix type

---
 packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 11b49822982f6..c7b28cda715e6 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -5712,7 +5712,7 @@ export type StyleQueue = {
   rules: Array<Chunk | PrecomputedChunk>,
   hrefs: Array<Chunk | PrecomputedChunk>,
   sheets: Map<string, StylesheetResource>,
-  nonce: ?Chunk,
+  nonce: ?string,
 };
 
 export function createHoistableState(): HoistableState {

From 9967076c55298d0ebb3fc6de2daafd433adf2ac7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 26 Apr 2025 10:56:50 +0200
Subject: [PATCH 07/17] fix types

---
 packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js | 4 +++-
 packages/react-dom/src/shared/ReactDOMTypes.js               | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index c7b28cda715e6..84d6b9ac11e99 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2637,6 +2637,7 @@ function pushLink(
             rules: ([]: Array<Chunk | PrecomputedChunk>),
             hrefs: ([]: Array<Chunk | PrecomputedChunk>),
             sheets: (new Map(): Map<string, StylesheetResource>),
+            nonce: props.nonce,
           };
           renderState.styles.set(precedence, styleQueue);
         }
@@ -2944,7 +2945,7 @@ function pushStyleImpl(
 function pushStyleContents(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-): void {
+): Array<Chunk | PrecomputedChunk> {
   let children = null;
   let innerHTML = null;
   for (const propKey in props) {
@@ -6164,6 +6165,7 @@ function preinitStyle(
           rules: ([]: Array<Chunk | PrecomputedChunk>),
           hrefs: ([]: Array<Chunk | PrecomputedChunk>),
           sheets: (new Map(): Map<string, StylesheetResource>),
+          nonce: options ? options.nonce : undefined,
         };
         renderState.styles.set(precedence, styleQueue);
       }
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
index dbfe07f9ec8f3..623ba1cd6511a 100644
--- a/packages/react-dom/src/shared/ReactDOMTypes.js
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -68,6 +68,7 @@ export type PreinitStyleOptions = {
   crossOrigin?: ?CrossOriginEnum,
   integrity?: ?string,
   fetchPriority?: ?string,
+  nonce?: ?string,
 };
 export type PreinitScriptOptions = {
   crossOrigin?: ?CrossOriginEnum,

From 6936609cc33eebc2456ae0caef3f194917466c3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 27 May 2025 00:08:46 +0200
Subject: [PATCH 08/17] Refactor

---
 .../src/server/ReactFizzConfigDOM.js          | 114 ++++++++++--------
 .../src/server/ReactFizzConfigDOMLegacy.js    |   2 +
 .../src/__tests__/ReactDOMFizzServer-test.js  |   4 +-
 .../src/__tests__/ReactDOMFloat-test.js       |   1 +
 .../src/server/ReactDOMFizzServerBrowser.js   |   7 +-
 .../src/server/ReactDOMFizzServerBun.js       |   5 +-
 .../src/server/ReactDOMFizzServerEdge.js      |   7 +-
 .../react-dom/src/shared/ReactDOMTypes.js     |   1 -
 8 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index f69e40b798d99..69d9f9b442f8a 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -147,6 +147,8 @@ export type RenderState = {
   // inline script streaming format, unused if using external runtime / data
   startInlineScript: PrecomputedChunk,
 
+  startInlineStyle: PrecomputedChunk,
+
   // the preamble must always flush before resuming, so all these chunks must
   // be null or empty when resuming.
 
@@ -307,6 +309,8 @@ const scriptIntegirty = stringToPrecomputedChunk(' integrity="');
 const scriptCrossOrigin = stringToPrecomputedChunk(' crossorigin="');
 const endAsyncScript = stringToPrecomputedChunk(' async=""></script>');
 
+const startInlineStyle = stringToPrecomputedChunk('<style');
+
 /**
  * This escaping function is designed to work with with inline scripts where the entire
  * contents are escaped. Because we know we are escaping the entire script we can avoid for instance
@@ -365,17 +369,31 @@ if (__DEV__) {
 // is set, the server will send instructions via data attributes (instead of inline scripts)
 export function createRenderState(
   resumableState: ResumableState,
-  nonce: string | void,
+  nonce:
+    | string
+    | {
+        script?: string,
+        style?: string,
+      }
+    | void,
   externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
   importMap: ImportMap | void,
   onHeaders: void | ((headers: HeadersDescriptor) => void),
   maxHeadersLength: void | number,
 ): RenderState {
+  const nonceScript = typeof nonce === 'string' ? nonce : nonce && nonce.script;
   const inlineScriptWithNonce =
-    nonce === undefined
+    nonceScript === undefined
       ? startInlineScript
       : stringToPrecomputedChunk(
-          '<script nonce="' + escapeTextForBrowser(nonce) + '"',
+          '<script nonce="' + escapeTextForBrowser(nonceScript) + '"',
+        );
+  const nonceStyle = nonce && nonce.style;
+  const inlineStyleWithNonce =
+    nonceStyle === undefined
+      ? startInlineStyle
+      : stringToPrecomputedChunk(
+          '<style nonce="' + escapeTextForBrowser(nonceStyle) + '"',
         );
   const idPrefix = resumableState.idPrefix;
 
@@ -403,7 +421,7 @@ export function createRenderState(
           src: externalRuntimeConfig,
           async: true,
           integrity: undefined,
-          nonce: nonce,
+          nonce: nonceScript,
         });
       } else {
         externalRuntimeScript = {
@@ -414,7 +432,7 @@ export function createRenderState(
           src: externalRuntimeConfig.src,
           async: true,
           integrity: externalRuntimeConfig.integrity,
-          nonce: nonce,
+          nonce: nonceScript,
         });
       }
     }
@@ -459,6 +477,7 @@ export function createRenderState(
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: stringToPrecomputedChunk(idPrefix + 'B:'),
     startInlineScript: inlineScriptWithNonce,
+    startInlineStyle: inlineStyleWithNonce,
     preamble: createPreambleState(),
 
     externalRuntimeScript: externalRuntimeScript,
@@ -500,7 +519,10 @@ export function createRenderState(
       moduleScripts: new Map(),
     },
 
-    nonce,
+    nonce: {
+      script: nonceScript,
+      style: nonceStyle,
+    },
     // like a module global for currently rendering boundary
     hoistableState: null,
     stylesToHoist: false,
@@ -539,10 +561,10 @@ export function createRenderState(
         stringToChunk(escapeTextForBrowser(src)),
         attributeEnd,
       );
-      if (nonce) {
+      if (nonceScript) {
         bootstrapChunks.push(
           scriptNonce,
-          stringToChunk(escapeTextForBrowser(nonce)),
+          stringToChunk(escapeTextForBrowser(nonceScript)),
           attributeEnd,
         );
       }
@@ -571,7 +593,7 @@ export function createRenderState(
       const props: PreloadModuleProps = ({
         rel: 'modulepreload',
         fetchPriority: 'low',
-        nonce,
+        nonce: nonceScript,
       }: any);
       if (typeof scriptConfig === 'string') {
         props.href = src = scriptConfig;
@@ -596,10 +618,10 @@ export function createRenderState(
         stringToChunk(escapeTextForBrowser(src)),
         attributeEnd,
       );
-      if (nonce) {
+      if (nonceScript) {
         bootstrapChunks.push(
           scriptNonce,
-          stringToChunk(escapeTextForBrowser(nonce)),
+          stringToChunk(escapeTextForBrowser(nonceScript)),
           attributeEnd,
         );
       }
@@ -2882,11 +2904,11 @@ function pushLink(
         // to create a StyleQueue
         if (!styleQueue) {
           styleQueue = {
+            start: renderState.startInlineStyle,
             precedence: stringToChunk(escapeTextForBrowser(precedence)),
             rules: ([]: Array<Chunk | PrecomputedChunk>),
             hrefs: ([]: Array<Chunk | PrecomputedChunk>),
             sheets: (new Map(): Map<string, StylesheetResource>),
-            nonce: props.nonce,
           };
           renderState.styles.set(precedence, styleQueue);
         }
@@ -3091,21 +3113,29 @@ function pushStyle(
       // This is the first time we've encountered this precedence we need
       // to create a StyleQueue.
       styleQueue = {
+        start: renderState.startInlineStyle,
         precedence: stringToChunk(escapeTextForBrowser(precedence)),
-        rules: pushStyleContents(([]: Array<Chunk | PrecomputedChunk>), props),
-        hrefs: [stringToChunk(escapeTextForBrowser(href))],
+        rules: ([]: Array<Chunk | PrecomputedChunk>),
+        hrefs: ([]: Array<Chunk | PrecomputedChunk>),
         sheets: (new Map(): Map<string, StylesheetResource>),
-        nonce: nonce,
       };
       renderState.styles.set(precedence, styleQueue);
-    } else if (nonce === styleQueue.nonce) {
-      // We have seen this precedence before and need to track this href
+    }
+
+    const nonceStyle = renderState.nonce.style;
+    if (nonceStyle ? nonceStyle === nonce : !nonce) {
       styleQueue.hrefs.push(stringToChunk(escapeTextForBrowser(href)));
       pushStyleContents(styleQueue.rules, props);
     } else if (__DEV__) {
-      console.error(
-        "React encountered a hoistable style tag with nonce. It doesn't match the previously encountered nonce. They have to be the same",
-      );
+      if (nonceStyle) {
+        console.error(
+          "React encountered a hoistable style tag with nonce. It doesn't match the previously encountered nonce. They have to be the same.",
+        );
+      } else {
+        console.error(
+          'React encountered a hoistable style tag with nonce. The nonce was not passed to the render call though.',
+        );
+      }
     }
   }
   if (styleQueue) {
@@ -3198,7 +3228,7 @@ function pushStyleImpl(
 function pushStyleContents(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-): Array<Chunk | PrecomputedChunk> {
+): void {
   let children = null;
   let innerHTML = null;
   for (const propKey in props) {
@@ -3232,7 +3262,7 @@ function pushStyleContents(
     target.push(stringToChunk(escapeStyleTextContent(child)));
   }
   pushInnerHTML(target, innerHTML, children);
-  return target;
+  return;
 }
 
 function pushImg(
@@ -5155,11 +5185,10 @@ function escapeJSObjectForInstructionScripts(input: Object): string {
 }
 
 const lateStyleTagResourceOpen1 = stringToPrecomputedChunk(
-  '<style media="not all" data-precedence="',
+  ' media="not all" data-precedence="',
 );
-const lateStyleTagResourceOpen2 = stringToPrecomputedChunk('" nonce="');
-const lateStyleTagResourceOpen3 = stringToPrecomputedChunk('" data-href="');
-const lateStyleTagResourceOpen4 = stringToPrecomputedChunk('">');
+const lateStyleTagResourceOpen2 = stringToPrecomputedChunk('" data-href="');
+const lateStyleTagResourceOpen3 = stringToPrecomputedChunk('">');
 const lateStyleTagTemplateClose = stringToPrecomputedChunk('</style>');
 
 // Tracks whether the boundary currently flushing is flushign style tags or has any
@@ -5175,7 +5204,6 @@ function flushStyleTagsLateForBoundary(
 ) {
   const rules = styleQueue.rules;
   const hrefs = styleQueue.hrefs;
-  const nonce = styleQueue.nonce;
   if (__DEV__) {
     if (rules.length > 0 && hrefs.length === 0) {
       console.error(
@@ -5185,19 +5213,16 @@ function flushStyleTagsLateForBoundary(
   }
   let i = 0;
   if (hrefs.length) {
+    writeChunk(this, styleQueue.start);
     writeChunk(this, lateStyleTagResourceOpen1);
     writeChunk(this, styleQueue.precedence);
-    if (nonce) {
-      writeChunk(this, lateStyleTagResourceOpen2);
-      writeChunk(this, stringToChunk(escapeTextForBrowser(nonce)));
-    }
-    writeChunk(this, lateStyleTagResourceOpen3);
+    writeChunk(this, lateStyleTagResourceOpen2);
     for (; i < hrefs.length - 1; i++) {
       writeChunk(this, hrefs[i]);
       writeChunk(this, spaceSeparator);
     }
     writeChunk(this, hrefs[i]);
-    writeChunk(this, lateStyleTagResourceOpen4);
+    writeChunk(this, lateStyleTagResourceOpen3);
     for (i = 0; i < rules.length; i++) {
       writeChunk(this, rules[i]);
     }
@@ -5281,13 +5306,10 @@ function flushStyleInPreamble(
   stylesheet.state = PREAMBLE;
 }
 
-const styleTagResourceOpen1 = stringToPrecomputedChunk(
-  '<style data-precedence="',
-);
-const styleTagResourceOpen2 = stringToPrecomputedChunk('" nonce="');
-const styleTagResourceOpen3 = stringToPrecomputedChunk('" data-href="');
+const styleTagResourceOpen1 = stringToPrecomputedChunk(' data-precedence="');
+const styleTagResourceOpen2 = stringToPrecomputedChunk('" data-href="');
 const spaceSeparator = stringToPrecomputedChunk(' ');
-const styleTagResourceOpen4 = stringToPrecomputedChunk('">');
+const styleTagResourceOpen3 = stringToPrecomputedChunk('">');
 
 const styleTagResourceClose = stringToPrecomputedChunk('</style>');
 
@@ -5302,27 +5324,23 @@ function flushStylesInPreamble(
 
   const rules = styleQueue.rules;
   const hrefs = styleQueue.hrefs;
-  const nonce = styleQueue.nonce;
   // If we don't emit any stylesheets at this precedence we still need to maintain the precedence
   // order so even if there are no rules for style tags at this precedence we emit an empty style
   // tag with the data-precedence attribute
   if (!hasStylesheets || hrefs.length) {
+    writeChunk(this, styleQueue.start);
     writeChunk(this, styleTagResourceOpen1);
     writeChunk(this, styleQueue.precedence);
-    if (nonce) {
-      writeChunk(this, styleTagResourceOpen2);
-      writeChunk(this, stringToChunk(escapeTextForBrowser(nonce)));
-    }
     let i = 0;
     if (hrefs.length) {
-      writeChunk(this, styleTagResourceOpen3);
+      writeChunk(this, styleTagResourceOpen2);
       for (; i < hrefs.length - 1; i++) {
         writeChunk(this, hrefs[i]);
         writeChunk(this, spaceSeparator);
       }
       writeChunk(this, hrefs[i]);
     }
-    writeChunk(this, styleTagResourceOpen4);
+    writeChunk(this, styleTagResourceOpen3);
     for (i = 0; i < rules.length; i++) {
       writeChunk(this, rules[i]);
     }
@@ -6076,11 +6094,11 @@ export type HoistableState = {
 };
 
 export type StyleQueue = {
+  start: PrecomputedChunk,
   precedence: Chunk | PrecomputedChunk,
   rules: Array<Chunk | PrecomputedChunk>,
   hrefs: Array<Chunk | PrecomputedChunk>,
   sheets: Map<string, StylesheetResource>,
-  nonce: ?string,
 };
 
 export function createHoistableState(): HoistableState {
@@ -6528,11 +6546,11 @@ function preinitStyle(
       // to create a StyleQueue
       if (!styleQueue) {
         styleQueue = {
+          start: renderState.startInlineStyle,
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
           rules: ([]: Array<Chunk | PrecomputedChunk>),
           hrefs: ([]: Array<Chunk | PrecomputedChunk>),
           sheets: (new Map(): Map<string, StylesheetResource>),
-          nonce: options ? options.nonce : undefined,
         };
         renderState.styles.set(precedence, styleQueue);
       }
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
index 4e40bc4f207b6..f576d55992707 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -47,6 +47,7 @@ export type RenderState = {
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: PrecomputedChunk,
   startInlineScript: PrecomputedChunk,
+  startInlineStyle: PrecomputedChunk,
   preamble: PreambleState,
   externalRuntimeScript: null | any,
   bootstrapChunks: Array<Chunk | PrecomputedChunk>,
@@ -99,6 +100,7 @@ export function createRenderState(
     segmentPrefix: renderState.segmentPrefix,
     boundaryPrefix: renderState.boundaryPrefix,
     startInlineScript: renderState.startInlineScript,
+    startInlineStyle: renderState.startInlineStyle,
     preamble: renderState.preamble,
     externalRuntimeScript: renderState.externalRuntimeScript,
     bootstrapChunks: renderState.bootstrapChunks,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index db9da504e1683..077bd63801ad4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10294,6 +10294,7 @@ describe('ReactDOMFizzServer', () => {
             precedence="default"
             nonce={CSPnonce}>{`.bar { background-color: blue; }`}</style>
         </>,
+        {nonce: {style: CSPnonce}},
       );
       pipe(writable);
     });
@@ -10329,11 +10330,12 @@ describe('ReactDOMFizzServer', () => {
             precedence="default"
             nonce={`${CSPnonce}${CSPnonce}`}>{`.bar { background-color: blue; }`}</style>
         </>,
+        {nonce: {style: CSPnonce}},
       );
       pipe(writable);
     });
     assertConsoleErrorDev([
-      "React encountered a hoistable style tag with nonce. It doesn't match the previously encountered nonce. They have to be the same",
+      "React encountered a hoistable style tag with nonce. It doesn't match the previously encountered nonce. They have to be the same.",
     ]);
     expect(getVisibleChildren(document)).toEqual(
       <html>
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 306d2ecae4978..e3c3fb41284eb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -8624,6 +8624,7 @@ background-color: green;
               </Suspense>
             </body>
           </html>,
+          {nonce: {style: nonce}},
         ).pipe(writable);
       });
 
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 8879a511d3fa0..29476c28ca52b 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -43,7 +43,12 @@ ensureCorrectIsomorphicReactVersion();
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
-  nonce?: string,
+  nonce?:
+    | string
+    | {
+        script?: string,
+        style?: string,
+      },
   bootstrapScriptContent?: string,
   bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
   bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBun.js b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
index 750c3133c4518..b80dab51f11d1 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBun.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
@@ -37,7 +37,10 @@ ensureCorrectIsomorphicReactVersion();
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
-  nonce?: string,
+  nonce?: string | {
+    script?: string,
+    style?: string,
+  },
   bootstrapScriptContent?: string,
   bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
   bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
index 8879a511d3fa0..29476c28ca52b 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
@@ -43,7 +43,12 @@ ensureCorrectIsomorphicReactVersion();
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
-  nonce?: string,
+  nonce?:
+    | string
+    | {
+        script?: string,
+        style?: string,
+      },
   bootstrapScriptContent?: string,
   bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
   bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
index 623ba1cd6511a..dbfe07f9ec8f3 100644
--- a/packages/react-dom/src/shared/ReactDOMTypes.js
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -68,7 +68,6 @@ export type PreinitStyleOptions = {
   crossOrigin?: ?CrossOriginEnum,
   integrity?: ?string,
   fetchPriority?: ?string,
-  nonce?: ?string,
 };
 export type PreinitScriptOptions = {
   crossOrigin?: ?CrossOriginEnum,

From a89a50d437f49895dff573fabb9a1f7d60cb8493 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 27 May 2025 09:40:08 +0200
Subject: [PATCH 09/17] fixed types

---
 .../react-dom-bindings/src/server/ReactFizzConfigDOM.js    | 7 ++++++-
 .../src/server/ReactFizzConfigDOMLegacy.js                 | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 69d9f9b442f8a..0c2a9a4a3c018 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -211,6 +211,11 @@ export type RenderState = {
     moduleScripts: Map<string, Resource>,
   },
 
+  nonce: {
+    script: string | void,
+    style: string | void,
+  },
+
   // Module-global-like reference for flushing/hoisting state of style resources
   // We need to track whether the current request has flushed any style resources
   // without sending an instruction to hoist them. we do that here
@@ -388,7 +393,7 @@ export function createRenderState(
       : stringToPrecomputedChunk(
           '<script nonce="' + escapeTextForBrowser(nonceScript) + '"',
         );
-  const nonceStyle = nonce && nonce.style;
+  const nonceStyle = typeof nonce === 'string' ? undefined : nonce && nonce.style;
   const inlineStyleWithNonce =
     nonceStyle === undefined
       ? startInlineStyle
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
index f576d55992707..1489c35353725 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -77,6 +77,10 @@ export type RenderState = {
     scripts: Map<string, Resource>,
     moduleScripts: Map<string, Resource>,
   },
+  nonce: {
+    script: string | void,
+    style: string | void,
+  },
   stylesToHoist: boolean,
   // This is an extra field for the legacy renderer
   generateStaticMarkup: boolean,
@@ -120,6 +124,7 @@ export function createRenderState(
     scripts: renderState.scripts,
     bulkPreloads: renderState.bulkPreloads,
     preloads: renderState.preloads,
+    nonce: renderState.nonce,
     stylesToHoist: renderState.stylesToHoist,
 
     // This is an extra field for the legacy renderer

From 63e028264edd3d8dfdee7560ee430973eb059374 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 27 May 2025 09:49:44 +0200
Subject: [PATCH 10/17] propagate nonce type through resume options etc

---
 .../src/server/ReactFizzConfigDOM.js             | 12 ++++++++++--
 .../src/server/ReactDOMFizzServerBrowser.js      | 16 +++++++++-------
 .../src/server/ReactDOMFizzServerEdge.js         | 16 +++++++++-------
 .../src/server/ReactDOMFizzServerNode.js         | 11 +++++++++--
 .../src/server/ReactDOMFizzStaticBrowser.js      |  9 ++++++++-
 .../src/server/ReactDOMFizzStaticEdge.js         |  9 ++++++++-
 .../src/server/ReactDOMFizzStaticNode.js         |  9 ++++++++-
 7 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 0c2a9a4a3c018..62d2ed456dcaa 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -135,6 +135,13 @@ const SentMarkShellTime /*                */ = 0b001000000;
 const NeedUpgradeToViewTransitions /*     */ = 0b010000000;
 const SentUpgradeToViewTransitions /*     */ = 0b100000000;
 
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
 // Per request, global state that is not contextual to the rendering subtree.
 // This cannot be resumed and therefore should only contain things that are
 // temporary working state or are never used in the prerender pass.
@@ -393,7 +400,8 @@ export function createRenderState(
       : stringToPrecomputedChunk(
           '<script nonce="' + escapeTextForBrowser(nonceScript) + '"',
         );
-  const nonceStyle = typeof nonce === 'string' ? undefined : nonce && nonce.style;
+  const nonceStyle =
+    typeof nonce === 'string' ? undefined : nonce && nonce.style;
   const inlineStyleWithNonce =
     nonceStyle === undefined
       ? startInlineStyle
@@ -654,7 +662,7 @@ export function createRenderState(
 
 export function resumeRenderState(
   resumableState: ResumableState,
-  nonce: string | void,
+  nonce: NonceOption | void,
 ): RenderState {
   return createRenderState(
     resumableState,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 29476c28ca52b..f240db34de300 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -40,15 +40,17 @@ import {
 import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
 ensureCorrectIsomorphicReactVersion();
 
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
-  nonce?:
-    | string
-    | {
-        script?: string,
-        style?: string,
-      },
+  nonce?: NonceOption,
   bootstrapScriptContent?: string,
   bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
   bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
@@ -64,7 +66,7 @@ type Options = {
 };
 
 type ResumeOptions = {
-  nonce?: string,
+  nonce?: NonceOption,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
index 29476c28ca52b..f240db34de300 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
@@ -40,15 +40,17 @@ import {
 import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
 ensureCorrectIsomorphicReactVersion();
 
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
-  nonce?:
-    | string
-    | {
-        script?: string,
-        style?: string,
-      },
+  nonce?: NonceOption,
   bootstrapScriptContent?: string,
   bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
   bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
@@ -64,7 +66,7 @@ type Options = {
 };
 
 type ResumeOptions = {
-  nonce?: string,
+  nonce?: NonceOption,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index f0c9d75fc7107..317fc9e0867eb 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -56,10 +56,17 @@ function createCancelHandler(request: Request, reason: string) {
   };
 }
 
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
-  nonce?: string,
+  nonce?: NonceOption,
   bootstrapScriptContent?: string,
   bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
   bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
@@ -77,7 +84,7 @@ type Options = {
 };
 
 type ResumeOptions = {
-  nonce?: string,
+  nonce?: NonceOption,
   onShellReady?: () => void,
   onShellError?: (error: mixed) => void,
   onAllReady?: () => void,
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
index 82d7b12f54b6b..fe1798d8bde0e 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -43,6 +43,13 @@ import {enablePostpone, enableHalt} from 'shared/ReactFeatureFlags';
 import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
 ensureCorrectIsomorphicReactVersion();
 
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
@@ -151,7 +158,7 @@ function prerender(
 }
 
 type ResumeOptions = {
-  nonce?: string,
+  nonce?: NonceOption,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
index 1243b18adaab1..7373ec49f69ea 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
@@ -43,6 +43,13 @@ import {enablePostpone, enableHalt} from 'shared/ReactFeatureFlags';
 import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
 ensureCorrectIsomorphicReactVersion();
 
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
@@ -150,7 +157,7 @@ function prerender(
 }
 
 type ResumeOptions = {
-  nonce?: string,
+  nonce?: NonceOption,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
   onPostpone?: (reason: string) => void,
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
index e90e17cc207ee..5dbf128e0f527 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
@@ -44,6 +44,13 @@ import {enablePostpone, enableHalt} from 'shared/ReactFeatureFlags';
 import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
 ensureCorrectIsomorphicReactVersion();
 
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
@@ -151,7 +158,7 @@ function prerenderToNodeStream(
 }
 
 type ResumeOptions = {
-  nonce?: string,
+  nonce?: NonceOption,
   signal?: AbortSignal,
   onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
   onPostpone?: (reason: string, postponeInfo: PostponeInfo) => void,

From 44d19b119f35c7f4f2da9af299f6d9c8662fc91e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 27 May 2025 09:54:24 +0200
Subject: [PATCH 11/17] fmt

---
 packages/react-dom/src/server/ReactDOMFizzServerBun.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBun.js b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
index b80dab51f11d1..b59d15462ce9c 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBun.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
@@ -37,10 +37,12 @@ ensureCorrectIsomorphicReactVersion();
 type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
-  nonce?: string | {
-    script?: string,
-    style?: string,
-  },
+  nonce?:
+    | string
+    | {
+        script?: string,
+        style?: string,
+      },
   bootstrapScriptContent?: string,
   bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
   bootstrapModules?: Array<string | BootstrapScriptDescriptor>,

From 0c0eaf8eba47162d343cd24530a8aa71f6e48c7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 27 May 2025 10:19:58 +0200
Subject: [PATCH 12/17] render styles without nonce when render call didn't
 receive nonce

---
 .../src/server/ReactFizzConfigDOM.js          | 24 ++++++++------
 .../src/__tests__/ReactDOMFizzServer-test.js  | 31 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 62d2ed456dcaa..5730f5f04917e 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -3136,19 +3136,23 @@ function pushStyle(
     }
 
     const nonceStyle = renderState.nonce.style;
-    if (nonceStyle ? nonceStyle === nonce : !nonce) {
+    if (!nonceStyle || nonceStyle === nonce) {
+      if (__DEV__) {
+        if (!nonceStyle && nonce) {
+          console.error(
+            'React encountered a hoistable style tag with "%s" nonce. The nonce was not passed to the render call though.',
+            nonce,
+          );
+        }
+      }
       styleQueue.hrefs.push(stringToChunk(escapeTextForBrowser(href)));
       pushStyleContents(styleQueue.rules, props);
     } else if (__DEV__) {
-      if (nonceStyle) {
-        console.error(
-          "React encountered a hoistable style tag with nonce. It doesn't match the previously encountered nonce. They have to be the same.",
-        );
-      } else {
-        console.error(
-          'React encountered a hoistable style tag with nonce. The nonce was not passed to the render call though.',
-        );
-      }
+      console.error(
+        'React encountered a hoistable style tag with "%s" nonce. It doesn\'t match the "%s" nonce passed to the render call. They have to be the same.',
+        nonce,
+        nonceStyle,
+      );
     }
   }
   if (styleQueue) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 077bd63801ad4..8335ef213f2fd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10335,7 +10335,7 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
     assertConsoleErrorDev([
-      "React encountered a hoistable style tag with nonce. It doesn't match the previously encountered nonce. They have to be the same.",
+      'React encountered a hoistable style tag with "R4nd0mR4nd0m" nonce. It doesn\'t match the "R4nd0m" nonce passed to the render call. They have to be the same.',
     ]);
     expect(getVisibleChildren(document)).toEqual(
       <html>
@@ -10351,4 +10351,33 @@ describe('ReactDOMFizzServer', () => {
       </html>,
     );
   });
+
+  it("should render styles without nonce when render call doesn't receive nonce", async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce="R4nd0m">{`.foo { color: hotpink; }`}</style>
+        </>,
+      );
+      pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'React encountered a hoistable style tag with "R4nd0m" nonce. The nonce was not passed to the render call though.',
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo">{`.foo { color: hotpink; }`}</style>
+          </div>
+        </body>
+      </html>,
+    );
+  });
 });

From 3a6a8175298500be361fdb82c9158d9ee537a501 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 27 May 2025 10:36:18 +0200
Subject: [PATCH 13/17] add tests

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 8335ef213f2fd..6e4106c0806cd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10380,4 +10380,72 @@ describe('ReactDOMFizzServer', () => {
       </html>,
     );
   });
+
+  it('should render styles without nonce when render call receives a string nonce dedicated to scripts', async () => {
+    CSPnonce = 'R4nd0m';
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce={CSPnonce}>{`.foo { color: hotpink; }`}</style>
+        </>,
+        {nonce: CSPnonce},
+      );
+      pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'React encountered a hoistable style tag with "R4nd0m" nonce. The nonce was not passed to the render call though.',
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo">{`.foo { color: hotpink; }`}</style>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('should allow for different script and style nonces', async () => {
+    CSPnonce = 'R4nd0m';
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce="D1ff3r3nt">{`.foo { color: hotpink; }`}</style>
+        </>,
+        {
+          nonce: {script: CSPnonce, style: 'D1ff3r3nt'},
+          bootstrapScriptContent: 'function noop(){}',
+        },
+      );
+      pipe(writable);
+    });
+    const scripts = Array.from(container.getElementsByTagName('script')).filter(
+      node => node.getAttribute('nonce') === CSPnonce,
+    );
+    expect(scripts.length).toEqual(2);
+    expect(scripts[1].textContent).toBe('function noop(){}');
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo"
+              nonce="D1ff3r3nt">{`.foo { color: hotpink; }`}</style>
+          </div>
+        </body>
+      </html>,
+    );
+  });
 });

From 7ede4ed688f56abf7cbb7998c09ddc1a10c38db5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 27 May 2025 10:40:18 +0200
Subject: [PATCH 14/17] loosen up expect

---
 packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 6e4106c0806cd..1f8248666cd24 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10432,8 +10432,7 @@ describe('ReactDOMFizzServer', () => {
     const scripts = Array.from(container.getElementsByTagName('script')).filter(
       node => node.getAttribute('nonce') === CSPnonce,
     );
-    expect(scripts.length).toEqual(2);
-    expect(scripts[1].textContent).toBe('function noop(){}');
+    expect(scripts[scripts.length - 1].textContent).toBe('function noop(){}');
     expect(getVisibleChildren(document)).toEqual(
       <html>
         <head />

From aaebd2fde43170d8db0d36ee3787227ccb0280d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 29 May 2025 11:33:19 +0200
Subject: [PATCH 15/17] tweak console.error messaging

---
 .../react-dom-bindings/src/server/ReactFizzConfigDOM.js     | 6 ++++--
 packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 5730f5f04917e..d295f8329ed0a 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -3140,7 +3140,8 @@ function pushStyle(
       if (__DEV__) {
         if (!nonceStyle && nonce) {
           console.error(
-            'React encountered a hoistable style tag with "%s" nonce. The nonce was not passed to the render call though.',
+            'React encountered a style tag with `precedence` "%s" and `nonce` "%s". When React manages style rules using `precedence` it will only include a nonce attributes if you also provide the same style nonce value as a render option.',
+            precedence,
             nonce,
           );
         }
@@ -3149,7 +3150,8 @@ function pushStyle(
       pushStyleContents(styleQueue.rules, props);
     } else if (__DEV__) {
       console.error(
-        'React encountered a hoistable style tag with "%s" nonce. It doesn\'t match the "%s" nonce passed to the render call. They have to be the same.',
+        'React encountered a style tag with `precedence` "%s" and `nonce` "%s". When React manages style rules using `precedence` it will only include rules if the nonce matches the style nonce "%s" that was included with this render.',
+        precedence,
         nonce,
         nonceStyle,
       );
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 1f8248666cd24..02d7b1dad2fd5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -10335,7 +10335,7 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
     assertConsoleErrorDev([
-      'React encountered a hoistable style tag with "R4nd0mR4nd0m" nonce. It doesn\'t match the "R4nd0m" nonce passed to the render call. They have to be the same.',
+      'React encountered a style tag with `precedence` "default" and `nonce` "R4nd0mR4nd0m". When React manages style rules using `precedence` it will only include rules if the nonce matches the style nonce "R4nd0m" that was included with this render.',
     ]);
     expect(getVisibleChildren(document)).toEqual(
       <html>
@@ -10365,7 +10365,7 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
     assertConsoleErrorDev([
-      'React encountered a hoistable style tag with "R4nd0m" nonce. The nonce was not passed to the render call though.',
+      'React encountered a style tag with `precedence` "default" and `nonce` "R4nd0m". When React manages style rules using `precedence` it will only include a nonce attributes if you also provide the same style nonce value as a render option.',
     ]);
     expect(getVisibleChildren(document)).toEqual(
       <html>
@@ -10396,7 +10396,7 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
     assertConsoleErrorDev([
-      'React encountered a hoistable style tag with "R4nd0m" nonce. The nonce was not passed to the render call though.',
+      'React encountered a style tag with `precedence` "default" and `nonce` "R4nd0m". When React manages style rules using `precedence` it will only include a nonce attributes if you also provide the same style nonce value as a render option.',
     ]);
     expect(getVisibleChildren(document)).toEqual(
       <html>

From 68d592a85f5b04761682b159bc41a851fefd9121 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 29 May 2025 12:02:14 +0200
Subject: [PATCH 16/17] get rid of `styleQueue.render`

---
 .../src/server/ReactFizzConfigDOM.js               | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index d295f8329ed0a..6ca673b31c656 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -309,6 +309,8 @@ export type ResumableState = {
   },
 };
 
+let currentlyFlushingRenderState: RenderState | null = null;
+
 const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
 
 const startInlineScript = stringToPrecomputedChunk('<script');
@@ -2917,7 +2919,6 @@ function pushLink(
         // to create a StyleQueue
         if (!styleQueue) {
           styleQueue = {
-            start: renderState.startInlineStyle,
             precedence: stringToChunk(escapeTextForBrowser(precedence)),
             rules: ([]: Array<Chunk | PrecomputedChunk>),
             hrefs: ([]: Array<Chunk | PrecomputedChunk>),
@@ -3126,7 +3127,6 @@ function pushStyle(
       // This is the first time we've encountered this precedence we need
       // to create a StyleQueue.
       styleQueue = {
-        start: renderState.startInlineStyle,
         precedence: stringToChunk(escapeTextForBrowser(precedence)),
         rules: ([]: Array<Chunk | PrecomputedChunk>),
         hrefs: ([]: Array<Chunk | PrecomputedChunk>),
@@ -5232,7 +5232,7 @@ function flushStyleTagsLateForBoundary(
   }
   let i = 0;
   if (hrefs.length) {
-    writeChunk(this, styleQueue.start);
+    writeChunk(this, ((currentlyFlushingRenderState: any): RenderState).startInlineStyle);
     writeChunk(this, lateStyleTagResourceOpen1);
     writeChunk(this, styleQueue.precedence);
     writeChunk(this, lateStyleTagResourceOpen2);
@@ -5282,7 +5282,9 @@ export function writeHoistablesForBoundary(
   destinationHasCapacity = true;
 
   // Flush style tags for each precedence this boundary depends on
+  currentlyFlushingRenderState = renderState;
   hoistableState.styles.forEach(flushStyleTagsLateForBoundary, destination);
+  currentlyFlushingRenderState = null;
 
   // Determine if this boundary has stylesheets that need to be awaited upon completion
   hoistableState.stylesheets.forEach(hasStylesToHoist);
@@ -5347,7 +5349,7 @@ function flushStylesInPreamble(
   // order so even if there are no rules for style tags at this precedence we emit an empty style
   // tag with the data-precedence attribute
   if (!hasStylesheets || hrefs.length) {
-    writeChunk(this, styleQueue.start);
+    writeChunk(this, ((currentlyFlushingRenderState: any): RenderState).startInlineStyle);
     writeChunk(this, styleTagResourceOpen1);
     writeChunk(this, styleQueue.precedence);
     let i = 0;
@@ -5522,7 +5524,9 @@ export function writePreambleStart(
   renderState.highImagePreloads.clear();
 
   // Flush unblocked stylesheets by precedence
+  currentlyFlushingRenderState = renderState;
   renderState.styles.forEach(flushStylesInPreamble, destination);
+  currentlyFlushingRenderState = null;
 
   const importMapChunks = renderState.importMapChunks;
   for (i = 0; i < importMapChunks.length; i++) {
@@ -6113,7 +6117,6 @@ export type HoistableState = {
 };
 
 export type StyleQueue = {
-  start: PrecomputedChunk,
   precedence: Chunk | PrecomputedChunk,
   rules: Array<Chunk | PrecomputedChunk>,
   hrefs: Array<Chunk | PrecomputedChunk>,
@@ -6565,7 +6568,6 @@ function preinitStyle(
       // to create a StyleQueue
       if (!styleQueue) {
         styleQueue = {
-          start: renderState.startInlineStyle,
           precedence: stringToChunk(escapeTextForBrowser(precedence)),
           rules: ([]: Array<Chunk | PrecomputedChunk>),
           hrefs: ([]: Array<Chunk | PrecomputedChunk>),

From acc9f05bde2004f1f6c70284e750f65bac9d0bd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 29 May 2025 12:04:21 +0200
Subject: [PATCH 17/17] fmt

---
 .../src/server/ReactFizzConfigDOM.js                   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 6ca673b31c656..b4091511ee6b8 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -5232,7 +5232,10 @@ function flushStyleTagsLateForBoundary(
   }
   let i = 0;
   if (hrefs.length) {
-    writeChunk(this, ((currentlyFlushingRenderState: any): RenderState).startInlineStyle);
+    writeChunk(
+      this,
+      ((currentlyFlushingRenderState: any): RenderState).startInlineStyle,
+    );
     writeChunk(this, lateStyleTagResourceOpen1);
     writeChunk(this, styleQueue.precedence);
     writeChunk(this, lateStyleTagResourceOpen2);
@@ -5349,7 +5352,10 @@ function flushStylesInPreamble(
   // order so even if there are no rules for style tags at this precedence we emit an empty style
   // tag with the data-precedence attribute
   if (!hasStylesheets || hrefs.length) {
-    writeChunk(this, ((currentlyFlushingRenderState: any): RenderState).startInlineStyle);
+    writeChunk(
+      this,
+      ((currentlyFlushingRenderState: any): RenderState).startInlineStyle,
+    );
     writeChunk(this, styleTagResourceOpen1);
     writeChunk(this, styleQueue.precedence);
     let i = 0;