[compiler] Normalize whitespace in JSX string attributes for builtin tags

Browsers normalize tab, newline, and carriage return characters to spaces
when parsing HTML attribute values. Without this normalization, the compiled
code preserves these characters while the browser normalizes the server-
rendered HTML, causing a hydration mismatch.

This change normalizes \t, \n, and \r to spaces in JSX string attribute
values for builtin HTML elements (div, span, etc.) during codegen, while
preserving the original values for component props and fbt operands.

Fixes #35481

Author: Felipeness

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -1712,9 +1712,10 @@ function codegenInstructionValue(
       break;
     }
     case 'JsxExpression': {
+      const isBuiltinTag = instrValue.tag.kind === 'BuiltinTag';
       const attributes: Array<t.JSXAttribute | t.JSXSpreadAttribute> = [];
       for (const attribute of instrValue.props) {
-        attributes.push(codegenJsxAttribute(cx, attribute));
+        attributes.push(codegenJsxAttribute(cx, attribute, isBuiltinTag));
       }
       let tagValue =
         instrValue.tag.kind === 'Identifier'
@@ -2123,9 +2124,21 @@ function codegenInstructionValue(
  */
 const STRING_REQUIRES_EXPR_CONTAINER_PATTERN =
   /[\u{0000}-\u{001F}\u{007F}\u{0080}-\u{FFFF}\u{010000}-\u{10FFFF}]|"|\\/u;
+
+/**
+ * Browsers normalize tab, newline, and carriage return characters to spaces
+ * when parsing HTML attribute values. Without this normalization, the compiled
+ * code preserves these characters while the browser normalizes the server-
+ * rendered HTML, causing a hydration mismatch.
+ *
+ * See: https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state
+ */
+const ATTRIBUTE_WHITESPACE_NORMALIZE_PATTERN = /[\t\n\r]/g;
+
 function codegenJsxAttribute(
   cx: Context,
   attribute: JsxAttribute,
+  isBuiltinTag: boolean,
 ): t.JSXAttribute | t.JSXSpreadAttribute {
   switch (attribute.kind) {
     case 'JsxAttribute': {
@@ -2145,6 +2158,18 @@ function codegenJsxAttribute(
       switch (innerValue.type) {
         case 'StringLiteral': {
           value = innerValue;
+          if (
+            isBuiltinTag &&
+            !cx.fbtOperands.has(attribute.place.identifier.id)
+          ) {
+            const normalized = value.value.replace(
+              ATTRIBUTE_WHITESPACE_NORMALIZE_PATTERN,
+              ' ',
+            );
+            if (normalized !== value.value) {
+              value = createStringLiteral(value.loc, normalized);
+            }
+          }
           if (
             STRING_REQUIRES_EXPR_CONTAINER_PATTERN.test(value.value) &&
             !cx.fbtOperands.has(attribute.place.identifier.id)

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.expect.md

@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function Component() {
+  return (
+    <div
+      className={"foo\nbar"}
+    >
+      Hello
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div className="foo bar">Hello</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.js

@@ -0,0 +1,9 @@
+function Component() {
+  return (
+    <div
+      className={"foo\nbar"}
+    >
+      Hello
+    </div>
+  );
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.expect.md

@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function Component() {
+  return (
+    <div
+      className="foo
+bar
+baz"
+    >
+      Hello
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div className="foo bar baz">Hello</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.js

@@ -0,0 +1,11 @@
+function Component() {
+  return (
+    <div
+      className="foo
+bar
+baz"
+    >
+      Hello
+    </div>
+  );
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md

@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function Component() {
+  return (
+    <div
+      className={"foo\tbar\r\nbaz"}
+    >
+      Hello
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div className="foo bar  baz">Hello</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.js

@@ -0,0 +1,9 @@
+function Component() {
+  return (
+    <div
+      className={"foo\tbar\r\nbaz"}
+    >
+      Hello
+    </div>
+  );
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.expect.md

@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component() {
+  return (
+    <div
+      title="line1
+line2"
+    >
+      Hello
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div title="line1 line2">Hello</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.js

@@ -0,0 +1,10 @@
+function Component() {
+  return (
+    <div
+      title="line1
+line2"
+    >
+      Hello
+    </div>
+  );
+}