Repository: swc-project/swc (rust)

Issue:
swc collapses multiple whitespace characters in JSX expressions.
**Describe the bug**
swc collapses two or more spaces into one space in JSX expressions. This causes unexpected formatting when using `white-space: pre`.

**Input code**
```tsx
const Component = () => {
  return <pre>|    |    |</pre>;
}
```

**Config**

```json
{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true
    }
  }
}
```

**Expected behavior**

Whitespace is preserved. Compare output from swc:
```tsx
var Component = function() {
    return(/*#__PURE__*/ React.createElement("pre", null, "| | |"));
};
```

to output from babel:
```tsx
var Component = function Component() {
  return /*#__PURE__*/React.createElement("pre", null, "|    |    |");
};
```

**Version**
1.2.84

**Additional context**
This case for this is ASCII art rendered in React. The current workaround is wrapping every expression in a template string to preserve spaces.

Pull request:
fix(es/transforms/jsx): collapses multiple whitespace charactars
attempt to fix #2208

Patch:
diff --git a/ecmascript/transforms/react/src/jsx/mod.rs b/ecmascript/transforms/react/src/jsx/mod.rs
index 757b81ce36..1b135b4d15 100644
--- a/ecmascript/transforms/react/src/jsx/mod.rs
+++ b/ecmascript/transforms/react/src/jsx/mod.rs
@@ -4,7 +4,7 @@ use dashmap::DashMap;
 use once_cell::sync::Lazy;
 use regex::Regex;
 use serde::{Deserialize, Serialize};
-use std::{iter, iter::once, mem, sync::Arc};
+use std::{borrow::Cow, iter, iter::once, mem, sync::Arc};
 use string_enum::StringEnum;
 use swc_atoms::{js_word, JsWord};
 use swc_common::{
@@ -1130,41 +1130,34 @@ fn to_prop_name(n: JSXAttrName) -> PropName {
 
 #[inline]
 fn jsx_text_to_str(t: JsWord) -> JsWord {
-    static SPACE_NL_START: Lazy<Regex> =
-        Lazy::new(|| Regex::new("^[\t'\n\x0C\r ]*\n[\t'\n\x0C\r ]*").unwrap());
-    static SPACE_NL_END: Lazy<Regex> =
-        Lazy::new(|| Regex::new("[\t'\n\x0C\r ]*\n[\t'\n\x0C\r ]*$").unwrap());
-
-    if t == *" " {
-        return t;
-    }
-
-    if !t.contains(' ') && !t.contains('\n') {
-        return t;
-    }
-
-    let s = SPACE_NL_START.replace_all(&t, "");
-    let s = SPACE_NL_END.replace_all(&s, "");
-    let need_leading_space = s.starts_with(' ');
-    let need_trailing_space = s.ends_with(' ');
-
-    let mut buf = String::from(if need_leading_space { " " } else { "" });
-
-    for (last, s) in s
-        .split(|c: char| c != '\u{a0}' && c.is_ascii_whitespace())
-        .filter(|s| !s.is_empty())
-        .identify_last()
-    {
-        buf.push_str(s);
-        if !last {
-            buf.push(' ');
+    static SPACE_START: Lazy<Regex> = Lazy::new(|| Regex::new("^[ ]+").unwrap());
+    static SPACE_END: Lazy<Regex> = Lazy::new(|| Regex::new("[ ]+$").unwrap());
+    let mut buf = String::new();
+    let replaced = t.replace('\t', " ");
+    let lines: Vec<&str> = replaced.lines().collect();
+    for (is_last, (i, line)) in lines.into_iter().enumerate().identify_last() {
+        if line.len() == 0 {
+            continue;
         }
+        let line = Cow::from(line);
+        let line = if i != 0 {
+            SPACE_START.replace_all(&line, "")
+        } else {
+            line
+        };
+        let line = if is_last {
+            line
+        } else {
+            SPACE_END.replace_all(&line, "")
+        };
+        if line.len() == 0 {
+            continue;
+        }
+        if i != 0 && buf.len() != 0 {
+            buf.push_str(" ")
+        }
+        buf.push_str(&line);
     }
-
-    if need_trailing_space && !buf.ends_with(' ') {
-        buf.push(' ');
-    }
-
     buf.into()
 }
 


Test patch:
diff --git a/tests/fixture/issue-2208/input/.swcrc b/tests/fixture/issue-2208/input/.swcrc
new file mode 100644
index 0000000000..71cb6953d5
--- /dev/null
+++ b/tests/fixture/issue-2208/input/.swcrc
@@ -0,0 +1,8 @@
+{
+    "jsc": {
+      "parser": {
+        "syntax": "ecmascript",
+        "jsx": true
+      }
+    }
+  }
\ No newline at end of file
diff --git a/tests/fixture/issue-2208/input/index.js b/tests/fixture/issue-2208/input/index.js
new file mode 100644
index 0000000000..c2ef3745f2
--- /dev/null
+++ b/tests/fixture/issue-2208/input/index.js
@@ -0,0 +1,3 @@
+const Component = () => {
+    return <pre>|    |    |</pre>;
+};
diff --git a/tests/fixture/issue-2208/output/index.js b/tests/fixture/issue-2208/output/index.js
new file mode 100644
index 0000000000..964c5c4a34
--- /dev/null
+++ b/tests/fixture/issue-2208/output/index.js
@@ -0,0 +1,3 @@
+var Component = function() {
+    return(/*#__PURE__*/ React.createElement("pre", null, "|    |    |"));
+};
diff --git a/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es2015.1.normal/output.js b/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es2015.1.normal/output.js
index 16aec0a874..abc929e333 100644
--- a/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es2015.1.normal/output.js
+++ b/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es2015.1.normal/output.js
@@ -19,13 +19,13 @@ function Comp(p) {
 let k1 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), " ", /*#__PURE__*/ React.createElement(AnotherButton, null));
+}, /*#__PURE__*/ React.createElement(Button, null), "  ", /*#__PURE__*/ React.createElement(AnotherButton, null));
 let k2 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null), " ");
+}, /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null), "  ");
 let k3 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, " ", /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null));
+}, "    ", /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null));
 export { };
diff --git a/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es2015.2.minified/output.js b/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es2015.2.minified/output.js
index 79246869cd..fd2fb42972 100644
--- a/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es2015.2.minified/output.js
+++ b/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es2015.2.minified/output.js
@@ -13,11 +13,11 @@ function Comp(p) {
 React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), " ", React.createElement(AnotherButton, null)), React.createElement(Comp, {
+}, React.createElement(Button, null), "  ", React.createElement(AnotherButton, null)), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), React.createElement(AnotherButton, null), " "), React.createElement(Comp, {
+}, React.createElement(Button, null), React.createElement(AnotherButton, null), "  "), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, " ", React.createElement(Button, null), React.createElement(AnotherButton, null));
+}, "    ", React.createElement(Button, null), React.createElement(AnotherButton, null));
 export { };
diff --git a/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es5.1.normal/output.js b/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es5.1.normal/output.js
index f18f5b5cb5..9b4149b014 100644
--- a/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es5.1.normal/output.js
+++ b/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es5.1.normal/output.js
@@ -91,13 +91,13 @@ function Comp(p) {
 var k1 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), " ", /*#__PURE__*/ React.createElement(AnotherButton, null));
+}, /*#__PURE__*/ React.createElement(Button, null), "  ", /*#__PURE__*/ React.createElement(AnotherButton, null));
 var k2 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null), " ");
+}, /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null), "  ");
 var k3 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, " ", /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null));
+}, "    ", /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null));
 export { };
diff --git a/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es5.2.minified/output.js b/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es5.2.minified/output.js
index 8ec2343559..57ce2d4476 100644
--- a/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es5.2.minified/output.js
+++ b/tests/tsc-references/jsx/checkJsxChildrenProperty7x/input.tsx/es5.2.minified/output.js
@@ -53,11 +53,11 @@ function Comp(p) {
 React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), " ", React.createElement(AnotherButton, null)), React.createElement(Comp, {
+}, React.createElement(Button, null), "  ", React.createElement(AnotherButton, null)), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), React.createElement(AnotherButton, null), " "), React.createElement(Comp, {
+}, React.createElement(Button, null), React.createElement(AnotherButton, null), "  "), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, " ", React.createElement(Button, null), React.createElement(AnotherButton, null));
+}, "    ", React.createElement(Button, null), React.createElement(AnotherButton, null));
 export { };
diff --git a/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es2015.1.normal/output.js b/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es2015.1.normal/output.js
index 172eeecbce..4a2382b8ee 100644
--- a/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es2015.1.normal/output.js
+++ b/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es2015.1.normal/output.js
@@ -19,17 +19,17 @@ function Comp(p) {
 let k1 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), " ", /*#__PURE__*/ React.createElement(AnotherButton, null));
+}, /*#__PURE__*/ React.createElement(Button, null), "  ", /*#__PURE__*/ React.createElement(AnotherButton, null));
 let k2 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null), " ");
+}, /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null), "  ");
 let k3 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, " ", /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null));
+}, "    ", /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null));
 let k4 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), " ");
+}, /*#__PURE__*/ React.createElement(Button, null), "  ");
 export { };
diff --git a/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es2015.2.minified/output.js b/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es2015.2.minified/output.js
index 236e5c465e..9c61eb455e 100644
--- a/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es2015.2.minified/output.js
+++ b/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es2015.2.minified/output.js
@@ -13,14 +13,14 @@ function Comp(p) {
 React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), " ", React.createElement(AnotherButton, null)), React.createElement(Comp, {
+}, React.createElement(Button, null), "  ", React.createElement(AnotherButton, null)), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), React.createElement(AnotherButton, null), " "), React.createElement(Comp, {
+}, React.createElement(Button, null), React.createElement(AnotherButton, null), "  "), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, " ", React.createElement(Button, null), React.createElement(AnotherButton, null)), React.createElement(Comp, {
+}, "    ", React.createElement(Button, null), React.createElement(AnotherButton, null)), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), " ");
+}, React.createElement(Button, null), "  ");
 export { };
diff --git a/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es5.1.normal/output.js b/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es5.1.normal/output.js
index 83f826f319..31f8c14b97 100644
--- a/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es5.1.normal/output.js
+++ b/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es5.1.normal/output.js
@@ -91,17 +91,17 @@ function Comp(p) {
 var k1 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), " ", /*#__PURE__*/ React.createElement(AnotherButton, null));
+}, /*#__PURE__*/ React.createElement(Button, null), "  ", /*#__PURE__*/ React.createElement(AnotherButton, null));
 var k2 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null), " ");
+}, /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null), "  ");
 var k3 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, " ", /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null));
+}, "    ", /*#__PURE__*/ React.createElement(Button, null), /*#__PURE__*/ React.createElement(AnotherButton, null));
 var k4 = /*#__PURE__*/ React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, /*#__PURE__*/ React.createElement(Button, null), " ");
+}, /*#__PURE__*/ React.createElement(Button, null), "  ");
 export { };
diff --git a/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es5.2.minified/output.js b/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es5.2.minified/output.js
index 2c9adfcb50..ba294bba49 100644
--- a/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es5.2.minified/output.js
+++ b/tests/tsc-references/jsx/checkJsxChildrenProperty8x/input.tsx/es5.2.minified/output.js
@@ -53,14 +53,14 @@ function Comp(p) {
 React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), " ", React.createElement(AnotherButton, null)), React.createElement(Comp, {
+}, React.createElement(Button, null), "  ", React.createElement(AnotherButton, null)), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), React.createElement(AnotherButton, null), " "), React.createElement(Comp, {
+}, React.createElement(Button, null), React.createElement(AnotherButton, null), "  "), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, " ", React.createElement(Button, null), React.createElement(AnotherButton, null)), React.createElement(Comp, {
+}, "    ", React.createElement(Button, null), React.createElement(AnotherButton, null)), React.createElement(Comp, {
     a: 10,
     b: "hi"
-}, React.createElement(Button, null), " ");
+}, React.createElement(Button, null), "  ");
 export { };
diff --git a/tests/tsc-references/jsx/tsxAttributeResolution14x/input.tsx/es2015.1.normal/output.js b/tests/tsc-references/jsx/tsxAttributeResolution14x/input.tsx/es2015.1.normal/output.js
index d7883f80a0..9eca2f7b03 100644
--- a/tests/tsc-references/jsx/tsxAttributeResolution14x/input.tsx/es2015.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxAttributeResolution14x/input.tsx/es2015.1.normal/output.js
@@ -4,11 +4,11 @@ function VerticalNavMenuItem(prop) {
 function VerticalNav() {
     return(/*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
         primaryText: 2
-    }), " // error", /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
+    }), "  // error", /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
         justRandomProp: 2,
         primaryText: "hello"
-    }), " // ok", /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
+    }), "  // ok", /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
         justRandomProp1: true,
         primaryText: "hello"
-    }), " // error"));
+    }), "  // error"));
 }
diff --git a/tests/tsc-references/jsx/tsxAttributeResolution14x/input.tsx/es5.1.normal/output.js b/tests/tsc-references/jsx/tsxAttributeResolution14x/input.tsx/es5.1.normal/output.js
index d7883f80a0..9eca2f7b03 100644
--- a/tests/tsc-references/jsx/tsxAttributeResolution14x/input.tsx/es5.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxAttributeResolution14x/input.tsx/es5.1.normal/output.js
@@ -4,11 +4,11 @@ function VerticalNavMenuItem(prop) {
 function VerticalNav() {
     return(/*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
         primaryText: 2
-    }), " // error", /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
+    }), "  // error", /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
         justRandomProp: 2,
         primaryText: "hello"
-    }), " // ok", /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
+    }), "  // ok", /*#__PURE__*/ React.createElement(VerticalNavMenuItem, {
         justRandomProp1: true,
         primaryText: "hello"
-    }), " // error"));
+    }), "  // error"));
 }
diff --git a/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es2015.1.normal/output.js b/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es2015.1.normal/output.js
index 848e875792..33a2a15bd5 100644
--- a/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es2015.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es2015.1.normal/output.js
@@ -64,6 +64,6 @@ class SomeClass {
         });
     }
 }
-var whitespace1 = /*#__PURE__*/ React.createElement("div", null, " ");
-var whitespace2 = /*#__PURE__*/ React.createElement("div", null, " ", p, " ");
+var whitespace1 = /*#__PURE__*/ React.createElement("div", null, "      ");
+var whitespace2 = /*#__PURE__*/ React.createElement("div", null, "  ", p, "    ");
 var whitespace3 = /*#__PURE__*/ React.createElement("div", null, p);
diff --git a/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es2015.2.minified/output.js b/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es2015.2.minified/output.js
index 8aed13eea6..1e94ac8356 100644
--- a/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es2015.2.minified/output.js
+++ b/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es2015.2.minified/output.js
@@ -23,4 +23,4 @@ React.createElement("div", null), React.createElement("div", {
     n: "m"
 }, !1), React.createElement("div", {
     n: "m"
-}, !1), React.createElement("div", null, " "), React.createElement("div", null, " ", p, " "), React.createElement("div", null, p);
+}, !1), React.createElement("div", null, "      "), React.createElement("div", null, "  ", p, "    "), React.createElement("div", null, p);
diff --git a/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es5.1.normal/output.js b/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es5.1.normal/output.js
index 2bbfbae4f7..f653d41a61 100644
--- a/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es5.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es5.1.normal/output.js
@@ -114,6 +114,6 @@ var SomeClass = /*#__PURE__*/ function() {
     ]);
     return SomeClass;
 }();
-var whitespace1 = /*#__PURE__*/ React.createElement("div", null, " ");
-var whitespace2 = /*#__PURE__*/ React.createElement("div", null, " ", p, " ");
+var whitespace1 = /*#__PURE__*/ React.createElement("div", null, "      ");
+var whitespace2 = /*#__PURE__*/ React.createElement("div", null, "  ", p, "    ");
 var whitespace3 = /*#__PURE__*/ React.createElement("div", null, p);
diff --git a/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es5.2.minified/output.js b/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es5.2.minified/output.js
index 3e797670f0..f02faab628 100644
--- a/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es5.2.minified/output.js
+++ b/tests/tsc-references/jsx/tsxEmit1x/input.tsx/es5.2.minified/output.js
@@ -81,4 +81,4 @@ var p, SomeClass = function() {
         }
     ], _defineProperties(Constructor.prototype, protoProps), staticProps && _defineProperties(Constructor, staticProps), SomeClass;
 }();
-React.createElement("div", null, " "), React.createElement("div", null, " ", p, " "), React.createElement("div", null, p);
+React.createElement("div", null, "      "), React.createElement("div", null, "  ", p, "    "), React.createElement("div", null, p);
diff --git a/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es2015.1.normal/output.js b/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es2015.1.normal/output.js
index 142eea7abc..08c2842ea5 100644
--- a/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es2015.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es2015.1.normal/output.js
@@ -66,6 +66,6 @@ class SomeClass {
         });
     }
 }
-var whitespace1 = /*#__PURE__*/ React.createElement("div", null, " ");
-var whitespace2 = /*#__PURE__*/ React.createElement("div", null, " ", p, " ");
+var whitespace1 = /*#__PURE__*/ React.createElement("div", null, "      ");
+var whitespace2 = /*#__PURE__*/ React.createElement("div", null, "  ", p, "    ");
 var whitespace3 = /*#__PURE__*/ React.createElement("div", null, p);
diff --git a/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es2015.2.minified/output.js b/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es2015.2.minified/output.js
index 279dd6365f..8609277e54 100644
--- a/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es2015.2.minified/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es2015.2.minified/output.js
@@ -25,4 +25,4 @@ React.createElement("div", null), React.createElement("div", {
 }, !1), React.createElement("div", {
     n: "m",
     b: !0
-}, !1), React.createElement("div", null, " "), React.createElement("div", null, " ", p, " "), React.createElement("div", null, p);
+}, !1), React.createElement("div", null, "      "), React.createElement("div", null, "  ", p, "    "), React.createElement("div", null, p);
diff --git a/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es5.1.normal/output.js b/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es5.1.normal/output.js
index 7b3caa6501..c18e5fcd24 100644
--- a/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es5.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es5.1.normal/output.js
@@ -116,6 +116,6 @@ var SomeClass = /*#__PURE__*/ function() {
     ]);
     return SomeClass;
 }();
-var whitespace1 = /*#__PURE__*/ React.createElement("div", null, " ");
-var whitespace2 = /*#__PURE__*/ React.createElement("div", null, " ", p, " ");
+var whitespace1 = /*#__PURE__*/ React.createElement("div", null, "      ");
+var whitespace2 = /*#__PURE__*/ React.createElement("div", null, "  ", p, "    ");
 var whitespace3 = /*#__PURE__*/ React.createElement("div", null, p);
diff --git a/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es5.2.minified/output.js b/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es5.2.minified/output.js
index ae488188ba..df639e73eb 100644
--- a/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es5.2.minified/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmit1x/input.tsx/es5.2.minified/output.js
@@ -83,4 +83,4 @@ var p, SomeClass = function() {
         }
     ], _defineProperties(Constructor.prototype, protoProps), staticProps && _defineProperties(Constructor, staticProps), SomeClass;
 }();
-React.createElement("div", null, " "), React.createElement("div", null, " ", p, " "), React.createElement("div", null, p);
+React.createElement("div", null, "      "), React.createElement("div", null, "  ", p, "    "), React.createElement("div", null, p);
diff --git a/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es2015.1.normal/output.js b/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es2015.1.normal/output.js
index 914648342b..d58f776e1b 100644
--- a/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es2015.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es2015.1.normal/output.js
@@ -1,1 +1,1 @@
-/*#__PURE__*/ React.createElement(Foo, null, " ", /*#__PURE__*/ React.createElement(Bar, null, " q "), " ", /*#__PURE__*/ React.createElement(Bar, null), " s ", /*#__PURE__*/ React.createElement(Bar, null), /*#__PURE__*/ React.createElement(Bar, null));
+/*#__PURE__*/ React.createElement(Foo, null, " ", /*#__PURE__*/ React.createElement(Bar, null, " q "), " ", /*#__PURE__*/ React.createElement(Bar, null), "   s ", /*#__PURE__*/ React.createElement(Bar, null), /*#__PURE__*/ React.createElement(Bar, null));
diff --git a/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es2015.2.minified/output.js b/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es2015.2.minified/output.js
index bae9f366b9..a258516ec6 100644
--- a/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es2015.2.minified/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es2015.2.minified/output.js
@@ -1,1 +1,1 @@
-React.createElement(Foo, null, " ", React.createElement(Bar, null, " q "), " ", React.createElement(Bar, null), " s ", React.createElement(Bar, null), React.createElement(Bar, null));
+React.createElement(Foo, null, " ", React.createElement(Bar, null, " q "), " ", React.createElement(Bar, null), "   s ", React.createElement(Bar, null), React.createElement(Bar, null));
diff --git a/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es5.1.normal/output.js b/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es5.1.normal/output.js
index 914648342b..d58f776e1b 100644
--- a/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es5.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es5.1.normal/output.js
@@ -1,1 +1,1 @@
-/*#__PURE__*/ React.createElement(Foo, null, " ", /*#__PURE__*/ React.createElement(Bar, null, " q "), " ", /*#__PURE__*/ React.createElement(Bar, null), " s ", /*#__PURE__*/ React.createElement(Bar, null), /*#__PURE__*/ React.createElement(Bar, null));
+/*#__PURE__*/ React.createElement(Foo, null, " ", /*#__PURE__*/ React.createElement(Bar, null, " q "), " ", /*#__PURE__*/ React.createElement(Bar, null), "   s ", /*#__PURE__*/ React.createElement(Bar, null), /*#__PURE__*/ React.createElement(Bar, null));
diff --git a/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es5.2.minified/output.js b/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es5.2.minified/output.js
index bae9f366b9..a258516ec6 100644
--- a/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es5.2.minified/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmit3x/input.tsx/es5.2.minified/output.js
@@ -1,1 +1,1 @@
-React.createElement(Foo, null, " ", React.createElement(Bar, null, " q "), " ", React.createElement(Bar, null), " s ", React.createElement(Bar, null), React.createElement(Bar, null));
+React.createElement(Foo, null, " ", React.createElement(Bar, null, " q "), " ", React.createElement(Bar, null), "   s ", React.createElement(Bar, null), React.createElement(Bar, null));
diff --git a/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es2015.1.normal/output.js b/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es2015.1.normal/output.js
index 925dfe9025..2a1e7aca82 100644
--- a/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es2015.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es2015.1.normal/output.js
@@ -2,17 +2,17 @@
 // WHITESPACE, DO NOT RUN 'FORMAT DOCUMENT' ON IT
 var p = 0;
 // Emit "   "
-/*#__PURE__*/ React.createElement("div", null, " ");
+/*#__PURE__*/ React.createElement("div", null, "   ");
 // Emit "  ", p, "   "
-/*#__PURE__*/ React.createElement("div", null, " ", p, " ");
+/*#__PURE__*/ React.createElement("div", null, "  ", p, "    ");
 // Emit only p
 /*#__PURE__*/ React.createElement("div", null, p);
 // Emit only p
 /*#__PURE__*/ React.createElement("div", null, p);
 // Emit "  3"
-/*#__PURE__*/ React.createElement("div", null, " 3");
+/*#__PURE__*/ React.createElement("div", null, "  3");
 // Emit "  3  "
-/*#__PURE__*/ React.createElement("div", null, " 3 ");
+/*#__PURE__*/ React.createElement("div", null, "  3  ");
 // Emit "3"
 /*#__PURE__*/ React.createElement("div", null, "3");
 // Emit no args
@@ -22,4 +22,4 @@ var p = 0;
 // Emit "hello\\ world"
 /*#__PURE__*/ React.createElement("div", null, "hello\\ world");
 // Emit "  a b  c d  "
-/*#__PURE__*/ React.createElement("div", null, " a b c d ");
+/*#__PURE__*/ React.createElement("div", null, "  a b  c d  ");
diff --git a/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es2015.2.minified/output.js b/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es2015.2.minified/output.js
index db10a4cbfa..61f883008a 100644
--- a/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es2015.2.minified/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es2015.2.minified/output.js
@@ -1,1 +1,1 @@
-React.createElement("div", null, " "), React.createElement("div", null, " ", 0, " "), React.createElement("div", null, 0), React.createElement("div", null, 0), React.createElement("div", null, " 3"), React.createElement("div", null, " 3 "), React.createElement("div", null, "3"), React.createElement("div", null), React.createElement("div", null, "foo bar"), React.createElement("div", null, "hello\\ world"), React.createElement("div", null, " a b c d ");
+React.createElement("div", null, "   "), React.createElement("div", null, "  ", 0, "    "), React.createElement("div", null, 0), React.createElement("div", null, 0), React.createElement("div", null, "  3"), React.createElement("div", null, "  3  "), React.createElement("div", null, "3"), React.createElement("div", null), React.createElement("div", null, "foo bar"), React.createElement("div", null, "hello\\ world"), React.createElement("div", null, "  a b  c d  ");
diff --git a/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es5.1.normal/output.js b/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es5.1.normal/output.js
index 925dfe9025..2a1e7aca82 100644
--- a/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es5.1.normal/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es5.1.normal/output.js
@@ -2,17 +2,17 @@
 // WHITESPACE, DO NOT RUN 'FORMAT DOCUMENT' ON IT
 var p = 0;
 // Emit "   "
-/*#__PURE__*/ React.createElement("div", null, " ");
+/*#__PURE__*/ React.createElement("div", null, "   ");
 // Emit "  ", p, "   "
-/*#__PURE__*/ React.createElement("div", null, " ", p, " ");
+/*#__PURE__*/ React.createElement("div", null, "  ", p, "    ");
 // Emit only p
 /*#__PURE__*/ React.createElement("div", null, p);
 // Emit only p
 /*#__PURE__*/ React.createElement("div", null, p);
 // Emit "  3"
-/*#__PURE__*/ React.createElement("div", null, " 3");
+/*#__PURE__*/ React.createElement("div", null, "  3");
 // Emit "  3  "
-/*#__PURE__*/ React.createElement("div", null, " 3 ");
+/*#__PURE__*/ React.createElement("div", null, "  3  ");
 // Emit "3"
 /*#__PURE__*/ React.createElement("div", null, "3");
 // Emit no args
@@ -22,4 +22,4 @@ var p = 0;
 // Emit "hello\\ world"
 /*#__PURE__*/ React.createElement("div", null, "hello\\ world");
 // Emit "  a b  c d  "
-/*#__PURE__*/ React.createElement("div", null, " a b c d ");
+/*#__PURE__*/ React.createElement("div", null, "  a b  c d  ");
diff --git a/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es5.2.minified/output.js b/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es5.2.minified/output.js
index db10a4cbfa..61f883008a 100644
--- a/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es5.2.minified/output.js
+++ b/tests/tsc-references/jsx/tsxReactEmitWhitespacex/input.tsx/es5.2.minified/output.js
@@ -1,1 +1,1 @@
-React.createElement("div", null, " "), React.createElement("div", null, " ", 0, " "), React.createElement("div", null, 0), React.createElement("div", null, 0), React.createElement("div", null, " 3"), React.createElement("div", null, " 3 "), React.createElement("div", null, "3"), React.createElement("div", null), React.createElement("div", null, "foo bar"), React.createElement("div", null, "hello\\ world"), React.createElement("div", null, " a b c d ");
+React.createElement("div", null, "   "), React.createElement("div", null, "  ", 0, "    "), React.createElement("div", null, 0), React.createElement("div", null, 0), React.createElement("div", null, "  3"), React.createElement("div", null, "  3  "), React.createElement("div", null, "3"), React.createElement("div", null), React.createElement("div", null, "foo bar"), React.createElement("div", null, "hello\\ world"), React.createElement("div", null, "  a b  c d  ");