Fixed scss function arguments on different lines in maps #9128

src/language-css/parser-postcss.js

@@ -120,6 +120,23 @@ function parseValueNode(valueNode, options) {
       parenGroupStack.pop();
       parenGroup = parenGroupStack[parenGroupStack.length - 1];
     } else if (node.type === "comma") {
+      if (commaGroup.groups.length > 1) {
+        for (const group of commaGroup.groups) {
+          // if css interpolation
+          if (
+            group.value &&
+            typeof group.value === "string" &&
+            group.value.includes("#{")
+          ) {
+            commaGroup.groups = [
+              stringifyNode({
+                groups: commaGroup.groups,
+              }).trim(),
+            ];
+            break;
+          }
+        }
+      }
       parenGroup.groups.push(commaGroup);
       commaGroup = {
         groups: [],

tests/scss/others/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`functional_argument_on_same_lines_in_maps.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+$display-breakpoints: map-deep-merge(
+  (
+    "print-only": "only print",
+    "screen-only": "only screen",
+    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
+    "sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md")-1})",
+  ),
+  $display-breakpoints
+);
+=====================================output=====================================
+$display-breakpoints: map-deep-merge(
+  (
+    "print-only": "only print",
+    "screen-only": "only screen",
+    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
+    "sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md")-1})",
+  ),
+  $display-breakpoints
+);
+
+================================================================================
+`;

tests/scss/others/functional_argument_on_same_lines_in_maps.scss

@@ -0,0 +1,9 @@
+$display-breakpoints: map-deep-merge(
+  (
+    "print-only": "only print",
+    "screen-only": "only screen",
+    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
+    "sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md")-1})",
+  ),
+  $display-breakpoints
+);

tests/scss/others/jsfmt.spec.js

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