Repository: prettier/prettier (JavaScript)
Date: 2018-03-01 09:45:14+00:00
Task type: Bug Fix

Issue:
Comments are indenting on every format
**Prettier 1.11.0**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEADdArAzgDwDpSRRYwAEAYhBKQLykAUAlLQHynAGmkBOcMArtygNOXUgB4AJgEsAbi1Fj2AegBUipaQAqAC2lZSAG2lQA1gZjUAhqQAOVgOZxSMHVbKSIcA1AhkAnnykcDj6MAB0GlyqygC+SlESOtykygrCYuLKMvKijADcBLGFUOioBCAANCAQtjDS0FjIoFbc3BAA7gAKrQhNKFayENKSVSBWJMgAZlaGWHDVAEbcVmCmfADK9mAmDsgw3PwLIJ5g07Pz1Sbz3DBdKw4Atlbnc8fYOABCK2ubVo9wAAyJjgr0uNX4MFskIATPtDsd7NwbsgQM9uKZPB0oGNbNwTDAAOojVzIAAcAAZqniIPNCStbKi8d44NxZKDqrwAI78aS8e6OZ5g47zR7SeFHapYXaGOAARX4flBSBmb2qMCsi2JklJSBh6pW0mMUAcAGEII8hShfFAOSB+PMtJr+qr5rFYkA)
```sh
--parser markdown
```

**Input:**
````markdown
```jsx
const Foo = () => {
  return (
    <div>
      {/*
        This links to a page that does not yet exist.
      */}    
      <hr />
    </div>
  );
};
```

````

**Output:**
````markdown
```jsx
const Foo = () => {
  return (
    <div>
      {/*
              This links to a page that does not yet exist.
            */}
      <hr />
    </div>
  );
};
```

````

**Second Output:**
````markdown
```jsx
const Foo = () => {
  return (
    <div>
      {/*
                    This links to a page that does not yet exist.
                  */}
      <hr />
    </div>
  );
};
```

````

**Expected behavior:**

Unchanged


Issue discussion:
Note that this **doesn’t** happen with a regular JSX file:

**Prettier 1.11.1**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuc0DOMAEAxCFMC8mAFAJSEB8mwAOlJpgE5wwCuj9xdDDAPACYBLAG4VuPBsAD0AKnESGAFQAWgtJgA2gqAGt1MfAENMAB0MBzOJhjLDWfhDjqoELAE8WmOAA81MAHTyPDJSAL4SQXzKjJhSYvQ8vFJCouKkANx0oZlQIAA0IBAmMILoyKCGjIwQAO4ACpUIaMgghsIQgvz5rRjIAGaGGmhwBQBGjIZgOiwAymZg2ubIMIysIyAOYP2DwwXaw4wwdRPmALaG20PrAFZo3gBCE1OzhqdwADLacJe7hawwJn+ACZlqt1mZGAcWqNDKM3BpoN0TIxtDAAOqdGzIAAcAAYCsiIMM0RMTC1kU44IxhN8CswAI6sQTMY4Wc4-dbDU6CUFrApoRYaOAARVYrm+SAGVwKMFhGP4WKQQJlE0EWig5gAwhBTuyUC4oLSQKxhopYc1JTs4KFQkA)

**Input:**
```jsx
const Foo = () => {
  return (
    <div>
      {/*
        This links to a page that does not yet exist.
      */}    
      <hr />
    </div>
  );
};

```

**Output:**
```jsx
const Foo = () => {
  return (
    <div>
      {/*
        This links to a page that does not yet exist.
      */}
      <hr />
    </div>
  );
};

```
Nice find
@lipis Pro-tip: There's a "Second format" checkbox in the playground for this type of bugs :) I updated your comment with it.
Smaller example:

**Prettier 1.11.0**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEADdArAzgDwDpQA8AJgJYBuAfAQAQ3AD0AVLTUwwL512uEAWAJxoNqRBmSoF0qAiAA0ICAAcYpaFmSgAhgIEQA7gAUdCDSi3kIpYvJBasMZADMtAGyxwFAIwFawAazgYAGUlP1IoAHNkGAEAV08QYggwZzcPBQiPARhDX0iAWy0090TsHAAhXwCg4K0CuAAZCLgSjMU4mCVOgCYY+MSwgWzkECKBf2T9KFslAQiYAHVrGD5kAA4ABgU5iA9F3yVRubhs8laFATgARzjSK7ytQuKkF1KFDwLSfoSPiMjXHAAIpxCDwNqJGBaLzLYirZA9BSxLSkVz-ADCEAKRVGUGgFxAcQ8ABVoWY3h4OBwgA)
```sh
--parser markdown
```

**Input:**
````markdown
```jsx
<div>
  {/*
  */}    
  <hr />
</div>
```

````

**Output:**
````markdown
```jsx
<div>
  {/*
    */}
  <hr />
</div>
```

````

**Second Output:**
````markdown
```jsx
<div>
  {/*
      */}
  <hr />
</div>
```

````

Solution patch:
diff --git a/src/language-markdown/embed.js b/src/language-markdown/embed.js
index 57c249e11aa7..ed22cbbf2ad5 100644
--- a/src/language-markdown/embed.js
+++ b/src/language-markdown/embed.js
@@ -5,6 +5,7 @@ const support = require("../common/support");
 const doc = require("../doc");
 const docBuilders = doc.builders;
 const hardline = docBuilders.hardline;
+const literalline = docBuilders.literalline;
 const concat = docBuilders.concat;
 const markAsRoot = docBuilders.markAsRoot;
 
@@ -24,7 +25,7 @@ function embed(path, print, textToDoc, options) {
           style,
           node.lang,
           hardline,
-          replaceNewlinesWithHardlines(doc),
+          replaceNewlinesWithLiterallines(doc),
           style
         ])
       );
@@ -51,7 +52,7 @@ function embed(path, print, textToDoc, options) {
     return null;
   }
 
-  function replaceNewlinesWithHardlines(doc) {
+  function replaceNewlinesWithLiterallines(doc) {
     return util.mapDoc(
       doc,
       currentDoc =>
@@ -59,7 +60,7 @@ function embed(path, print, textToDoc, options) {
           ? concat(
               currentDoc
                 .split(/(\n)/g)
-                .map((v, i) => (i % 2 === 0 ? v : hardline))
+                .map((v, i) => (i % 2 === 0 ? v : literalline))
             )
           : currentDoc
     );


Test patch:
diff --git a/tests/multiparser_markdown_css/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_markdown_css/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..65c2b60b5f00
--- /dev/null
+++ b/tests/multiparser_markdown_css/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`css-comment.md 1`] = `
+\`\`\`pcss
+.Avatar {
+  /* ... */
+
+  &__image {
+    /* ... */
+
+    @container (width > 100px) {
+      /*
+      Change some styles on the image element when the container is
+      wider than 100px
+      */
+    }
+  }
+
+  @container (aspect-ratio > 3) {
+    /* Change styles on the avatar itself, when the aspect-ratio is grater than 3 */
+  }
+
+  @container (width > 100px) and (height > 100px) {
+    /* ... */
+  }
+}
+\`\`\`
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+\`\`\`pcss
+.Avatar {
+  /* ... */
+
+  &__image {
+    /* ... */
+
+    @container (width > 100px) {
+      /*
+      Change some styles on the image element when the container is
+      wider than 100px
+      */
+    }
+  }
+
+  @container (aspect-ratio > 3) {
+    /* Change styles on the avatar itself, when the aspect-ratio is grater than 3 */
+  }
+
+  @container (width > 100px) and (height > 100px) {
+    /* ... */
+  }
+}
+\`\`\`
+
+`;
diff --git a/tests/multiparser_markdown_css/css-comment.md b/tests/multiparser_markdown_css/css-comment.md
new file mode 100644
index 000000000000..59a3168a9326
--- /dev/null
+++ b/tests/multiparser_markdown_css/css-comment.md
@@ -0,0 +1,24 @@
+```pcss
+.Avatar {
+  /* ... */
+
+  &__image {
+    /* ... */
+
+    @container (width > 100px) {
+      /*
+      Change some styles on the image element when the container is
+      wider than 100px
+      */
+    }
+  }
+
+  @container (aspect-ratio > 3) {
+    /* Change styles on the avatar itself, when the aspect-ratio is grater than 3 */
+  }
+
+  @container (width > 100px) and (height > 100px) {
+    /* ... */
+  }
+}
+```
diff --git a/tests/multiparser_markdown_css/jsfmt.spec.js b/tests/multiparser_markdown_css/jsfmt.spec.js
new file mode 100644
index 000000000000..ff3b58b03c88
--- /dev/null
+++ b/tests/multiparser_markdown_css/jsfmt.spec.js
@@ -0,0 +1,1 @@
+run_spec(__dirname, ["markdown"]);
diff --git a/tests/multiparser_markdown_js/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_markdown_js/__snapshots__/jsfmt.spec.js.snap
index 4c94e48eeed8..c589b54c6b37 100644
--- a/tests/multiparser_markdown_js/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_markdown_js/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`jsx-comment.md 1`] = `
+\`\`\`jsx
+const Foo = () => {
+  return (
+    <div>
+      {/*
+        This links to a page that does not yet exist.
+      */}    
+      <hr />
+    </div>
+  );
+};
+\`\`\`
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+\`\`\`jsx
+const Foo = () => {
+  return (
+    <div>
+      {/*
+        This links to a page that does not yet exist.
+      */}
+      <hr />
+    </div>
+  );
+};
+\`\`\`
+
+`;
+
 exports[`trailing-comma.md 1`] = `
 ### Some heading
 
diff --git a/tests/multiparser_markdown_js/jsx-comment.md b/tests/multiparser_markdown_js/jsx-comment.md
new file mode 100644
index 000000000000..9db8944d91d6
--- /dev/null
+++ b/tests/multiparser_markdown_js/jsx-comment.md
@@ -0,0 +1,12 @@
+```jsx
+const Foo = () => {
+  return (
+    <div>
+      {/*
+        This links to a page that does not yet exist.
+      */}    
+      <hr />
+    </div>
+  );
+};
+```