Repository: prettier/prettier (JavaScript)
Date: 2020-07-24 03:03:36+00:00
Task type: Bug Fix

Issue:
Unstable mdx format with `--embedded-language-formatting=off`
**Prettier pr-8811**
[Playground link](https://deploy-preview-8811--prettier.netlify.app/playground/#N4Igxg9gdgLgprEAuEBLAtgBwgJxgAmAEMBffcgMxwnXIHIAPATwC86BuAHSm4Fp-u3OA2x58kKAGcCRfAF58ARnYgANCAiYYqaJOSgiOagHcACoYR6URADbGiTPeoBGOImADWcGAGVM71CgAc2QYHABXOHU4dGc4ABN4hIAZImDwoiC4ADFcdCIYbWDkDQoKNRAACxh0GwB1StR4SX8wOB9LJtQANyamErBJJzQpODxTNyD85ApbSSiQACtJBgAhN09vHyJ0OGTAuBm5heWGH0CgmzgARXCIeCObefV-HHmcEvR4hgrMHECYHVUPEYJVkAAOAAML2o8zqbkwJT+cHe3UO6gAjnd4BNNFYQERJLwoHAEgkKjg4FjUJSJplpkhZk8FvN0KhQhEWRcrrd7odGcd1DAiM4gSCwUgAExCtyoGwXADCNAZIBRAFYKuF5gAVEVWJnPEDdSIASSgSVgPjA-y0AEFzT4YEwro95iQSEA)
```sh
--embedded-language-formatting off
--parser mdx
```

**Input:**
```mdx
import {a}   from  'xyz';

---

export const a = 1;
```

**Output:**
```mdx
import {a}   from  'xyz';
---

export const a = 1
;

```

**Second Output:**
```mdx
## import {a} from 'xyz';

export const a = 1
;
```

**Expected behavior:**

Should be stable



Issue discussion:

Solution patch:
diff --git a/changelog_unreleased/javascript/pr-7875.md b/changelog_unreleased/api/pr-7875.md
similarity index 89%
rename from changelog_unreleased/javascript/pr-7875.md
rename to changelog_unreleased/api/pr-7875.md
index a81510f05ccf..ff45f937aa17 100644
--- a/changelog_unreleased/javascript/pr-7875.md
+++ b/changelog_unreleased/api/pr-7875.md
@@ -1,4 +1,4 @@
-#### Add --embedded-language-formatting={auto,off} option ([#7875](https://github.com/prettier/prettier/pull/7875) by [@bakkot](https://github.com/bakkot))
+#### Add --embedded-language-formatting={auto,off} option ([#7875](https://github.com/prettier/prettier/pull/7875) by [@bakkot](https://github.com/bakkot), [#8825](https://github.com/prettier/prettier/pull/8825) by [@fisker](https://github.com/fiskers))
 
 When Prettier identifies cases where it looks like you've placed some code it knows how to format within a string in another file, like in a tagged template in JavaScript with a tag named `html` or in code blocks in Markdown, it will by default try to format that code.
 
diff --git a/src/language-markdown/printer-markdown.js b/src/language-markdown/printer-markdown.js
index 2c7d4fca772a..1cdc2ddd426a 100644
--- a/src/language-markdown/printer-markdown.js
+++ b/src/language-markdown/printer-markdown.js
@@ -436,7 +436,9 @@ function genericPrint(path, options, print) {
     // MDX
     case "importExport":
     case "jsx":
-      return node.value; // fallback to the original text if multiparser failed
+      // fallback to the original text if multiparser failed
+      // or `embeddedLanguageFormatting: "off"`
+      return concat([node.value, hardline]);
     case "math":
       return concat([
         "$$",


Test patch:
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
new file mode 100644
index 000000000000..baa62371949e
--- /dev/null
+++ b/tests/misc/embedded_language_formatting/mdx/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`import-export.mdx - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["mdx"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+import D from 'd'
+import {A,B,C}    from "hello-world"
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+import D from 'd'
+
+
+import {A,B,C}    from "hello-world"
+
+
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+export const meta = {
+authors: [fred, sue],
+layout: Layout
+}
+
+export default () =>
+  <Doc     components={{
+        h1: ui.Heading,
+         p:    ui.Text,
+      code:     ui.Code
+         }}
+      />
+
+---
+
+export const a = 1;
+export const b = 1;
+
+=====================================output=====================================
+import D from 'd'
+import {A,B,C}    from "hello-world"
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+import D from 'd'
+
+import {A,B,C}    from "hello-world"
+
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+export const meta = {
+authors: [fred, sue],
+layout: Layout
+}
+
+export default () =>
+  <Doc     components={{
+        h1: ui.Heading,
+         p:    ui.Text,
+      code:     ui.Code
+         }}
+      />
+
+---
+
+export const a = 1;
+export const b = 1;
+
+================================================================================
+`;
+
+exports[`jsx.mdx - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["mdx"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<Heading hi='there'>Hello, world!
+</Heading>
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>123
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>
+<Hello>
+    test   <World />   test
+</Hello>123
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>       123
+<Hello>
+    test   <World />   test
+</Hello>       234
+
+---
+
+<>
+    test   <World        />   test
+</>       123
+
+---
+
+| Column 1 | Column 2 |
+|---|---|
+| Text | <Hello>Text</Hello> |
+
+=====================================output=====================================
+<Heading hi='there'>Hello, world!
+</Heading>
+
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>123
+
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>
+<Hello>
+    test   <World />   test
+</Hello>123
+
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>       123
+<Hello>
+    test   <World />   test
+</Hello>       234
+
+
+---
+
+<>
+    test   <World        />   test
+</>       123
+
+
+---
+
+| Column 1 | Column 2            |
+| -------- | ------------------- |
+| Text     | <Hello>Text</Hello> |
+
+================================================================================
+`;
diff --git a/tests/misc/embedded_language_formatting/mdx/import-export.mdx b/tests/misc/embedded_language_formatting/mdx/import-export.mdx
new file mode 100644
index 000000000000..725c8908a62c
--- /dev/null
+++ b/tests/misc/embedded_language_formatting/mdx/import-export.mdx
@@ -0,0 +1,33 @@
+import D from 'd'
+import {A,B,C}    from "hello-world"
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+import D from 'd'
+
+
+import {A,B,C}    from "hello-world"
+
+
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+export const meta = {
+authors: [fred, sue],
+layout: Layout
+}
+
+export default () =>
+  <Doc     components={{
+        h1: ui.Heading,
+         p:    ui.Text,
+      code:     ui.Code
+         }}
+      />
+
+---
+
+export const a = 1;
+export const b = 1;
diff --git a/tests/misc/embedded_language_formatting/mdx/jsfmt.spec.js b/tests/misc/embedded_language_formatting/mdx/jsfmt.spec.js
new file mode 100644
index 000000000000..42d458897728
--- /dev/null
+++ b/tests/misc/embedded_language_formatting/mdx/jsfmt.spec.js
@@ -0,0 +1,1 @@
+run_spec(__dirname, ["mdx"], { embeddedLanguageFormatting: "off" });
diff --git a/tests/misc/embedded_language_formatting/mdx/jsx.mdx b/tests/misc/embedded_language_formatting/mdx/jsx.mdx
new file mode 100644
index 000000000000..85961c373e72
--- /dev/null
+++ b/tests/misc/embedded_language_formatting/mdx/jsx.mdx
@@ -0,0 +1,38 @@
+<Heading hi='there'>Hello, world!
+</Heading>
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>123
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>
+<Hello>
+    test   <World />   test
+</Hello>123
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>       123
+<Hello>
+    test   <World />   test
+</Hello>       234
+
+---
+
+<>
+    test   <World        />   test
+</>       123
+
+---
+
+| Column 1 | Column 2 |
+|---|---|
+| Text | <Hello>Text</Hello> |