Format SCSS maps like CSS rules (#3070)

* Format SCSS maps like CSS rules

* Ensure parent value starts with $ before formatting map with hardlines

src/printer-postcss.js

@@ -339,13 +339,22 @@ function genericPrint(path, options, print) {
         return group(indent(fill(res)));
       }
 
+      const declaration = path.getParentNode(2);
+      const isMap =
+        declaration &&
+        declaration.type === "css-decl" &&
+        declaration.prop.startsWith("$");
+
       return group(
         concat([
           n.open ? path.call(print, "open") : "",
           indent(
             concat([
               softline,
-              join(concat([",", line]), path.map(print, "groups"))
+              join(
+                concat([",", isMap ? hardline : line]),
+                path.map(print, "groups")
+              )
             ])
           ),
           softline,

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

@@ -18,6 +18,7 @@ div {
   }
 }
 a { margin: 0 { left: 10px; } }
+$map: (color: #111111, text-shadow: 1px 1px 0 salmon);
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @media #{$g-breakpoint-tiny} {
 }
@@ -38,5 +39,9 @@ a {
     left: 10px;
   }
 }
+$map: (
+  color: #111111,
+  text-shadow: 1px 1px 0 salmon
+);
 
 `;

tests/css_scss/scss.css

@@ -8,3 +8,4 @@ div {
   }
 }
 a { margin: 0 { left: 10px; } }
+$map: (color: #111111, text-shadow: 1px 1px 0 salmon);