[Fiber][Float] preinitialized stylesheets should support integrity op…

…tion (#26881) preinitialized stylesheets did not render the integrity option on the client implementation of Float. This was an oversight.
facebook · May 31, 2023 · e1e68b9 · e1e68b9
1 parent 1cea384
commit e1e68b9
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -2394,6 +2394,7 @@ function stylesheetPropsFromPreinitOptions(
     href,
     'data-precedence': precedence,
     crossOrigin: options.crossOrigin,
+    integrity: options.integrity,
   };
 }
 

diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -4409,6 +4409,71 @@ body {
         </html>,
       );
     });
+
+    it('accepts an `integrity` option for `as: "style"`', async () => {
+      function Component({src, hash}) {
+        ReactDOM.preinit(src, {as: 'style', integrity: hash});
+        return 'hello';
+      }
+
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Component src="foo" hash="foo hash" />
+            </body>
+          </html>,
+          {
+            nonce: 'R4nD0m',
+          },
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="foo"
+              integrity="foo hash"
+              data-precedence="default"
+            />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+
+      await clientAct(() => {
+        ReactDOMClient.hydrateRoot(
+          document,
+          <html>
+            <body>
+              <Component src="bar" hash="bar hash" />
+            </body>
+          </html>,
+        );
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="foo"
+              integrity="foo hash"
+              data-precedence="default"
+            />
+            <link
+              rel="stylesheet"
+              href="bar"
+              integrity="bar hash"
+              data-precedence="default"
+            />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+    });
   });
 
   describe('Stylesheet Resources', () => {