From 8745eece5f46ec77188d53d1dbbcd5357a3742f6 Mon Sep 17 00:00:00 2001
From: Felipe Coelho <felipecoelho.ness@gmail.com>
Date: Sun, 8 Mar 2026 12:15:54 -0300
Subject: [PATCH 1/3] [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
---
 .../ReactiveScopes/CodegenReactiveFunction.ts | 27 ++++++++++++-
 ...o-multiline-classname-expression.expect.md | 36 ++++++++++++++++++
 .../repro-multiline-classname-expression.js   |  9 +++++
 ...ro-multiline-classname-hydration.expect.md | 38 +++++++++++++++++++
 .../repro-multiline-classname-hydration.js    | 11 ++++++
 .../repro-multiline-classname-tabs.expect.md  | 36 ++++++++++++++++++
 .../repro-multiline-classname-tabs.js         |  9 +++++
 .../repro-multiline-title-attribute.expect.md | 37 ++++++++++++++++++
 .../repro-multiline-title-attribute.js        | 10 +++++
 9 files changed, 212 insertions(+), 1 deletion(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
index 486773d5eb91..b6f31c4661ba 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+++ b/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)
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.expect.md
new file mode 100644
index 000000000000..4eaaf210c4d7
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.js
new file mode 100644
index 000000000000..80b337cec273
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.expect.md
new file mode 100644
index 000000000000..029bfdaf0744
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.js
new file mode 100644
index 000000000000..bf890ea64532
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md
new file mode 100644
index 000000000000..e91b478b9b16
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.js
new file mode 100644
index 000000000000..fc82c9af331c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.expect.md
new file mode 100644
index 000000000000..1bf6e0678769
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.js
new file mode 100644
index 000000000000..8cc7f13d4fd5
--- /dev/null
+++ b/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>
+  );
+}

From a19d07876e4c1a3448b0ca9cde443e6fd7140b50 Mon Sep 17 00:00:00 2001
From: Felipe Coelho <felipecoelho.ness@gmail.com>
Date: Sun, 8 Mar 2026 12:59:17 -0300
Subject: [PATCH 2/3] fix: correct CRLF handling, JSDoc, and add negative test

- Fix \r\n producing double space: normalize CRLF to LF first, then
  replace remaining \t\n\r with spaces
- Fix JSDoc: the real cause is Babel's code generator silently replacing
  newlines during serialization, not browser attribute normalization
- Add negative test: component props (non-builtin tags) must preserve
  \n unchanged
---
 .../ReactiveScopes/CodegenReactiveFunction.ts | 28 +++++++++------
 .../repro-multiline-classname-tabs.expect.md  |  2 +-
 ...ltiline-component-prop-preserved.expect.md | 34 +++++++++++++++++++
 ...epro-multiline-component-prop-preserved.js |  7 ++++
 4 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-component-prop-preserved.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-component-prop-preserved.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
index b6f31c4661ba..414d32578e5a 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -2126,14 +2126,23 @@ 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.
+ * When the compiler creates new StringLiteral AST nodes (without Babel's
+ * extra.raw), strings containing \n are wrapped in JSXExpressionContainers
+ * by STRING_REQUIRES_EXPR_CONTAINER_PATTERN. Babel's code generator may then
+ * silently replace newline characters with spaces during serialization
+ * (depending on retainLines/compact options), changing the runtime value.
+ * This causes a hydration mismatch: the server renders the original value
+ * while the client gets the Babel-transformed one.
  *
- * See: https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state
+ * We normalize \t, \n, and \r to spaces in string attributes of intrinsic
+ * HTML elements before the expression container check, which both prevents
+ * the Babel serialization issue and avoids unnecessary expression containers.
+ *
+ * CRLF (\r\n) is collapsed to a single space first, matching the HTML input
+ * stream preprocessing step (https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream).
  */
-const ATTRIBUTE_WHITESPACE_NORMALIZE_PATTERN = /[\t\n\r]/g;
+const NORMALIZE_CRLF_PATTERN = /\r\n/g;
+const NORMALIZE_WHITESPACE_PATTERN = /[\t\n\r]/g;
 
 function codegenJsxAttribute(
   cx: Context,
@@ -2162,10 +2171,9 @@ function codegenJsxAttribute(
             isBuiltinTag &&
             !cx.fbtOperands.has(attribute.place.identifier.id)
           ) {
-            const normalized = value.value.replace(
-              ATTRIBUTE_WHITESPACE_NORMALIZE_PATTERN,
-              ' ',
-            );
+            const normalized = value.value
+              .replace(NORMALIZE_CRLF_PATTERN, '\n')
+              .replace(NORMALIZE_WHITESPACE_PATTERN, ' ');
             if (normalized !== value.value) {
               value = createStringLiteral(value.loc, normalized);
             }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md
index e91b478b9b16..b9f00cae9cd4 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md
@@ -22,7 +22,7 @@ function Component() {
   const $ = _c(1);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <div className="foo bar  baz">Hello</div>;
+    t0 = <div className="foo bar baz">Hello</div>;
     $[0] = t0;
   } else {
     t0 = $[0];
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-component-prop-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-component-prop-preserved.expect.md
new file mode 100644
index 000000000000..6e979b28bea5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-component-prop-preserved.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function Component() {
+  return (
+    <MyComponent
+      data={"foo\nbar"}
+    />
+  );
+}
+
+```
+
+## 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 = <MyComponent data={"foo\nbar"} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-component-prop-preserved.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-component-prop-preserved.js
new file mode 100644
index 000000000000..931d1bf2223b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-component-prop-preserved.js
@@ -0,0 +1,7 @@
+function Component() {
+  return (
+    <MyComponent
+      data={"foo\nbar"}
+    />
+  );
+}

From 4574136e8b0f265c78013db01ebf0472958f0ce7 Mon Sep 17 00:00:00 2001
From: Felipe Coelho <felipecoelho.ness@gmail.com>
Date: Sun, 8 Mar 2026 13:26:51 -0300
Subject: [PATCH 3/3] fix: use JSX transform's /\n\s+/g regex as the
 normalization
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The actual root cause is @babel/plugin-transform-react-jsx normalizing
/\n\s+/g → " " for plain JSX string attributes but skipping this for
JSXExpressionContainer values. The compiler wraps strings in expression
containers, bypassing the normalization and creating a mismatch.

Use the same regex /\n\s+/g as the JSX transform to produce identical
output. This replaces the incorrect /[\t\n\r]/g which over-normalized
\t and \r (untouched by JSX transform) and diverged in output for all
whitespace patterns.

Rewrite fixtures to test the reporter's actual scenario (newline +
indentation in Tailwind className).
---
 .../ReactiveScopes/CodegenReactiveFunction.ts | 33 +++++++++----------
 ...o-multiline-classname-expression.expect.md |  2 +-
 ...ro-multiline-classname-hydration.expect.md | 13 +++++---
 .../repro-multiline-classname-hydration.js    |  7 ++--
 ...tiline-classname-newline-indent.expect.md} |  2 +-
 ...pro-multiline-classname-newline-indent.js} |  2 +-
 .../repro-multiline-title-attribute.expect.md |  2 +-
 .../repro-multiline-title-attribute.js        |  2 +-
 8 files changed, 34 insertions(+), 29 deletions(-)
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{repro-multiline-classname-tabs.expect.md => repro-multiline-classname-newline-indent.expect.md} (92%)
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{repro-multiline-classname-tabs.js => repro-multiline-classname-newline-indent.js} (67%)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
index 414d32578e5a..94c2032c2587 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -2126,23 +2126,21 @@ const STRING_REQUIRES_EXPR_CONTAINER_PATTERN =
   /[\u{0000}-\u{001F}\u{007F}\u{0080}-\u{FFFF}\u{010000}-\u{10FFFF}]|"|\\/u;
 
 /**
- * When the compiler creates new StringLiteral AST nodes (without Babel's
- * extra.raw), strings containing \n are wrapped in JSXExpressionContainers
- * by STRING_REQUIRES_EXPR_CONTAINER_PATTERN. Babel's code generator may then
- * silently replace newline characters with spaces during serialization
- * (depending on retainLines/compact options), changing the runtime value.
- * This causes a hydration mismatch: the server renders the original value
- * while the client gets the Babel-transformed one.
+ * The Babel JSX transform (@babel/plugin-transform-react-jsx) normalizes
+ * newlines followed by whitespace in plain JSX string attributes:
  *
- * We normalize \t, \n, and \r to spaces in string attributes of intrinsic
- * HTML elements before the expression container check, which both prevents
- * the Babel serialization issue and avoids unnecessary expression containers.
+ *   value.value = value.value.replace(/\n\s+/g, " ");
  *
- * CRLF (\r\n) is collapsed to a single space first, matching the HTML input
- * stream preprocessing step (https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream).
+ * However, this normalization is skipped for JSXExpressionContainer values.
+ * When the compiler wraps strings in expression containers (because they
+ * match STRING_REQUIRES_EXPR_CONTAINER_PATTERN), the JSX transform bypasses
+ * normalization. The server code (uncompiled or differently compiled) goes
+ * through the standard normalization, creating a hydration mismatch.
+ *
+ * We apply the same normalization here before the expression container check,
+ * ensuring compiled output matches the behavior of non-compiled code.
  */
-const NORMALIZE_CRLF_PATTERN = /\r\n/g;
-const NORMALIZE_WHITESPACE_PATTERN = /[\t\n\r]/g;
+const JSX_STRING_NEWLINE_PATTERN = /\n\s+/g;
 
 function codegenJsxAttribute(
   cx: Context,
@@ -2171,9 +2169,10 @@ function codegenJsxAttribute(
             isBuiltinTag &&
             !cx.fbtOperands.has(attribute.place.identifier.id)
           ) {
-            const normalized = value.value
-              .replace(NORMALIZE_CRLF_PATTERN, '\n')
-              .replace(NORMALIZE_WHITESPACE_PATTERN, ' ');
+            const normalized = value.value.replace(
+              JSX_STRING_NEWLINE_PATTERN,
+              ' ',
+            );
             if (normalized !== value.value) {
               value = createStringLiteral(value.loc, normalized);
             }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.expect.md
index 4eaaf210c4d7..0dd4c5b6eeac 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-expression.expect.md
@@ -22,7 +22,7 @@ function Component() {
   const $ = _c(1);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <div className="foo bar">Hello</div>;
+    t0 = <div className={"foo\nbar"}>Hello</div>;
     $[0] = t0;
   } else {
     t0 = $[0];
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.expect.md
index 029bfdaf0744..1481c4b9a8ec 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.expect.md
@@ -5,9 +5,10 @@
 function Component() {
   return (
     <div
-      className="foo
-bar
-baz"
+      className="
+        flex min-h-screen items-center
+        dark:bg-black
+      "
     >
       Hello
     </div>
@@ -24,7 +25,11 @@ function Component() {
   const $ = _c(1);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <div className="foo bar baz">Hello</div>;
+    t0 = (
+      <div className=" flex min-h-screen items-center dark:bg-black ">
+        Hello
+      </div>
+    );
     $[0] = t0;
   } else {
     t0 = $[0];
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.js
index bf890ea64532..57a8948561eb 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-hydration.js
@@ -1,9 +1,10 @@
 function Component() {
   return (
     <div
-      className="foo
-bar
-baz"
+      className="
+        flex min-h-screen items-center
+        dark:bg-black
+      "
     >
       Hello
     </div>
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-newline-indent.expect.md
similarity index 92%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-newline-indent.expect.md
index b9f00cae9cd4..83970c76b8f8 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-newline-indent.expect.md
@@ -5,7 +5,7 @@
 function Component() {
   return (
     <div
-      className={"foo\tbar\r\nbaz"}
+      className={"foo\n  bar\n  baz"}
     >
       Hello
     </div>
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-newline-indent.js
similarity index 67%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-newline-indent.js
index fc82c9af331c..fe81bd1cf61f 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-tabs.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-classname-newline-indent.js
@@ -1,7 +1,7 @@
 function Component() {
   return (
     <div
-      className={"foo\tbar\r\nbaz"}
+      className={"foo\n  bar\n  baz"}
     >
       Hello
     </div>
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.expect.md
index 1bf6e0678769..c18f93fb808b 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.expect.md
@@ -6,7 +6,7 @@ function Component() {
   return (
     <div
       title="line1
-line2"
+        line2"
     >
       Hello
     </div>
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.js
index 8cc7f13d4fd5..08c874456747 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-multiline-title-attribute.js
@@ -2,7 +2,7 @@ function Component() {
   return (
     <div
       title="line1
-line2"
+        line2"
     >
       Hello
     </div>