warn if <style> tag href has a space on server

gnoff · gnoff · commit 5128af254cc0 · 2023-03-03T11:55:46.000-08:00
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -1581,6 +1581,15 @@ function pushStyle(
       return pushStyleImpl(target, props);
     }
 
+    if (__DEV__) {
+      if (href.includes(' ')) {
+        console.error(
+          'React expected the `href` prop for a <style> tag opting into hoisting semantics using the `precedence` prop to not have any spaces but ecountered spaces instead. using spaces in this prop will cause hydration of this style to fail on the client. The href for the <style> where this ocurred is "%s".',
+          href,
+        );
+      }
+    }
+
     const key = getResourceKey('style', href);
     let resource = resources.stylesMap.get(key);
     if (!resource) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -3492,6 +3492,7 @@ body {
         <div>1</div>,
       ]);
     });
+
     // @gate enableFloat
     it('escapes hrefs when selecting matching elements in the document when rendering Resources', async () => {
       function App() {
@@ -4424,6 +4425,24 @@ background-color: green;
         </html>,
       );
     });
+
+    it('warns if you render a <style> with an href with a space on the server', async () => {
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          renderToPipeableStream(
+            <html>
+              <body>
+                <style href="foo bar" precedence="default">
+                  style
+                </style>
+              </body>
+            </html>,
+          ).pipe(writable);
+        });
+      }).toErrorDev(
+        'React expected the `href` prop for a <style> tag opting into hoisting semantics using the `precedence` prop to not have any spaces but ecountered spaces instead. using spaces in this prop will cause hydration of this style to fail on the client. The href for the <style> where this ocurred is "foo bar".',
+      );
+    });
   });
 
   describe('Script Resources', () => {
