Repository: prettier/prettier (JavaScript)
Date: 2020-09-25 01:45:59+00:00
Task type: Bug Fix

Issue:
Formatting `mdx`, from v2.0.0 to v2.1.2 now a new line is introduced
After upgrading Prettier from some version higher than 2.0.0, I see now that the formatting for a particular code has changed in `mdx` files

This code 

```
# title

<Parenthesis>

CR: Carriage Return, \r
LF: Line Feed, \n

</Parenthesis>

```

was preserved by Prettier before (>2.0.0)

Now it gets an extra new line

```
# title

<Parenthesis>


CR: Carriage Return, \r
LF: Line Feed, \n

</Parenthesis>

```

My `.prettierrc` is this (prettier 2.1.2, eslint-config-prettier 6.11.0)

```json
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 120,
  "arrowParens": "avoid"
}
```

__How can I prevent this?__

*Didn't inserted the playground because this code (changing `<Parenthesis`> for `<div>`) gives an error, but it should not)

EDIT:

I'm trying to downgrade Prettier, but somehow I can't see a consistent behavior

Going one by one to 2.0.3 has reverted the issue, then going upwards at 2.1.0 I had the correct behavior, and at 2.1.1 I had again the new extra line

But now I've downgraded directly to `2.0.0` and I see the same new line (but upgraded to 2.0.1 and I don't see it)

So I don't know what is happening (I'm using yarn)

Now I'm at 2.1.0 and I don't see the new line, so my bet is from 2.1.0 to 2.1.1 (https://github.com/prettier/prettier/blob/master/CHANGELOG.md#211)



Issue discussion:
~Maybe introduced by https://github.com/prettier/prettier/pull/9143~ No, #9143 changes yaml..
Introduced by #8825

Solution patch:
diff --git a/changelog_unreleased/mdx/pr-9267.md b/changelog_unreleased/mdx/pr-9267.md
new file mode 100644
index 000000000000..4997d105f3c4
--- /dev/null
+++ b/changelog_unreleased/mdx/pr-9267.md
@@ -0,0 +1,35 @@
+#### Fix JSX format (#9267 by @fisker)
+
+<!-- prettier-ignore -->
+```markdown
+<!-- Input -->
+# title
+
+<Jsx>
+
+text
+
+</Jsx>
+
+<!-- Prettier stable -->
+# title
+
+<Jsx>
+
+
+text
+
+</Jsx>
+
+
+(Extra empty lines added after `<Jsx>` and `</Jsx>`)
+
+<!-- Prettier master -->
+# title
+
+<Jsx>
+
+text
+
+</Jsx>
+```
diff --git a/src/language-markdown/printer-markdown.js b/src/language-markdown/printer-markdown.js
index c338ce9c5e42..1ced1c0a9162 100644
--- a/src/language-markdown/printer-markdown.js
+++ b/src/language-markdown/printer-markdown.js
@@ -431,11 +431,12 @@ function genericPrint(path, options, print) {
     case "liquidNode":
       return concat(replaceEndOfLineWith(node.value, hardline));
     // MDX
+    // fallback to the original text if multiparser failed
+    // or `embeddedLanguageFormatting: "off"`
     case "importExport":
-    case "jsx":
-      // fallback to the original text if multiparser failed
-      // or `embeddedLanguageFormatting: "off"`
       return concat([node.value, hardline]);
+    case "jsx":
+      return node.value;
     case "math":
       return concat([
         "$$",


Test patch:
diff --git a/tests/mdx/embedded-language-formatting/__snapshots__/jsfmt.spec.js.snap b/tests/mdx/embedded-language-formatting/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..28d11e582abc
--- /dev/null
+++ b/tests/mdx/embedded-language-formatting/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`issue-9260.mdx - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["mdx"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+# title
+
+<Parenthesis>
+
+CR: Carriage Return, \\r
+LF: Line Feed, \\n
+
+</Parenthesis>
+
+=====================================output=====================================
+# title
+
+<Parenthesis>
+
+CR: Carriage Return, \\r
+LF: Line Feed, \\n
+
+</Parenthesis>
+
+================================================================================
+`;
diff --git a/tests/mdx/embedded-language-formatting/issue-9260.mdx b/tests/mdx/embedded-language-formatting/issue-9260.mdx
new file mode 100644
index 000000000000..ceb4d4c794cd
--- /dev/null
+++ b/tests/mdx/embedded-language-formatting/issue-9260.mdx
@@ -0,0 +1,8 @@
+# title
+
+<Parenthesis>
+
+CR: Carriage Return, \r
+LF: Line Feed, \n
+
+</Parenthesis>
diff --git a/tests/mdx/embedded-language-formatting/jsfmt.spec.js b/tests/mdx/embedded-language-formatting/jsfmt.spec.js
new file mode 100644
index 000000000000..42d458897728
--- /dev/null
+++ b/tests/mdx/embedded-language-formatting/jsfmt.spec.js
@@ -0,0 +1,1 @@
+run_spec(__dirname, ["mdx"], { embeddedLanguageFormatting: "off" });
diff --git a/tests/misc/embedded_language_formatting/mdx/__snapshots__/jsfmt.spec.js.snap b/tests/misc/embedded_language_formatting/mdx/__snapshots__/jsfmt.spec.js.snap
index baa62371949e..073da49b6090 100644
--- a/tests/misc/embedded_language_formatting/mdx/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/misc/embedded_language_formatting/mdx/__snapshots__/jsfmt.spec.js.snap
@@ -127,14 +127,12 @@ printWidth: 80
 <Heading hi='there'>Hello, world!
 </Heading>
 
-
 ---
 
 <Hello>
     test   <World />   test
 </Hello>123
 
-
 ---
 
 <Hello>
@@ -144,7 +142,6 @@ printWidth: 80
     test   <World />   test
 </Hello>123
 
-
 ---
 
 <Hello>
@@ -154,14 +151,12 @@ printWidth: 80
     test   <World />   test
 </Hello>       234
 
-
 ---
 
 <>
     test   <World        />   test
 </>       123
 
-
 ---
 
 | Column 1 | Column 2            |