fix: inline comments in lists and maps (#4205)

package.json

@@ -48,7 +48,7 @@
     "postcss-media-query-parser": "0.2.3",
     "postcss-scss": "1.0.4",
     "postcss-selector-parser": "2.2.3",
-    "postcss-values-parser": "1.4.0",
+    "postcss-values-parser": "1.5.0",
     "read-pkg-up": "3.0.0",
     "remark-frontmatter": "1.1.0",
     "remark-parse": "5.0.0",

src/language-css/printer-postcss.js

@@ -384,7 +384,11 @@ function genericPrint(path, options, print) {
       return path.call(print, "group");
     }
     case "value-comment": {
-      return concat(["/*", node.value, "*/"]);
+      return concat([
+        node.inline ? "//" : "/*",
+        node.value,
+        node.inline ? "" : "*/"
+      ]);
     }
     case "value-comma_group": {
       const parentNode = path.getParentNode();
@@ -444,6 +448,15 @@ function genericPrint(path, options, print) {
           continue;
         }
 
+        if (
+          (iPrevNode &&
+            iPrevNode.type === "value-comment" &&
+            iPrevNode.inline) ||
+          (iNextNode.type === "value-comment" && iNextNode.inline)
+        ) {
+          continue;
+        }
+
         const isHash = iNode.type === "value-word" && iNode.value === "#";
         const isLeftCurlyBrace =
           iNode.type === "value-word" && iNode.value === "{";
@@ -570,6 +583,8 @@ function genericPrint(path, options, print) {
           } else {
             parts.push(" ");
           }
+        } else if (iNode.type === "value-comment" && iNode.inline) {
+          parts.push(hardline);
         } else if (
           isNextMathOperator ||
           isNextEqualityOperator ||

tests/css_comments/__snapshots__/jsfmt.spec.js.snap

@@ -588,6 +588,32 @@ exports[`if-eslit-at-rule-decloration.scss 1`] = `
 
 `;
 
+exports[`lists.scss 1`] = `
+$my-list:
+  'foo', // Foo
+  'bar'; // Bar
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+$my-list: "foo",
+  // Foo
+    "bar"; // Bar
+
+`;
+
+exports[`maps.scss 1`] = `
+$my-map: (
+  'foo': 1, // Foo
+  'bar': 2, // Bar
+);
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+$my-map: (
+  "foo": 1,
+  // Foo
+    "bar": 2,
+  // Bar
+);
+
+`;
+
 exports[`places.css 1`] = `
 div {
   // a

tests/css_comments/lists.scss

@@ -0,0 +1,3 @@
+$my-list:
+  'foo', // Foo
+  'bar'; // Bar

tests/css_comments/maps.scss

@@ -0,0 +1,4 @@
+$my-map: (
+  'foo': 1, // Foo
+  'bar': 2, // Bar
+);

yarn.lock

@@ -3749,9 +3749,9 @@ postcss-selector-parser@2.2.3:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-values-parser@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-1.4.0.tgz#14a8d79caa8e93b28e4ffa46a79a990bb5e1dab3"
+postcss-values-parser@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz#5d9fa63e2bcb0179ce48f3235303765eb89f3047"
   dependencies:
     flatten "^1.0.2"
     indexes-of "^1.0.1"