fix(markdown): print literalline for newline instead of hardline (#4083)

* test: add tests

* fix(markdown): print literalline for newline instead of hardline

* test: add tests

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
     );

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) {
+    /* ... */
+  }
+}
+\`\`\`
+
+`;

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) {
+    /* ... */
+  }
+}
+```

tests/multiparser_markdown_css/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["markdown"]);

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
 

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>
+  );
+};
+```