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,145 @@
+// 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======================================
+//simple test
+$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
+);
+
+
+//list test
+@each 
+$size 
+in 
+$sizes {
+.icon
+#{$size} 
+{
+border
+: 
+"#{$size + "px"}" 
+solid 
+red;
+}
+}
+
+@each 
+$size 
+in 
+$sizes {
+.icon-#{$size} 
+{
+border
+: 
+"#{$size + "px"}" 
+solid 
+red;
+}
+}
+
+//map test
+$font-weights
+: 
+("regular": 400
+, 
+"medium": 500, 
+"bold": 
+700);
+@each 
+$name, 
+$boldness 
+in 
+$icons {
+.text
+#{
+$name
+} {
+color: red;
+font-weight: 
+"#{$boldness}"
+}
+}
+
+$font-weights
+: 
+("regular": 400
+, 
+"medium": 500, 
+"bold": 
+700);
+@each 
+$name, 
+$boldness 
+in 
+$icons {
+.text-#{
+$name
+} {
+color: red;
+font-weight: 
+"#{$boldness}"
+}
+}
+=====================================output=====================================
+//simple test
+$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
+);
+
+//list test
+@each $size in $sizes {
+  .icon #{$size} {
+    border: "#{$size + "px"}" solid red;
+  }
+}
+
+@each $size in $sizes {
+  .icon-#{$size} {
+    border: "#{$size + "px"}" solid red;
+  }
+}
+
+//map test
+$font-weights: (
+  "regular": 400,
+  "medium": 500,
+  "bold": 700,
+);
+@each $name, $boldness in $icons {
+  .text #{ $name } {
+    color: red;
+    font-weight: "#{$boldness}";
+  }
+}
+
+$font-weights: (
+  "regular": 400,
+  "medium": 500,
+  "bold": 700,
+);
+@each $name, $boldness in $icons {
+  .text-#{ $name } {
+    color: red;
+    font-weight: "#{$boldness}";
+  }
+}
+
+================================================================================
+`;

tests/scss/others/functional_argument_on_same_lines_in_maps.scss

@@ -0,0 +1,85 @@
+//simple test
+$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
+);
+
+
+//list test
+@each 
+$size 
+in 
+$sizes {
+.icon
+#{$size} 
+{
+border
+: 
+"#{$size + "px"}" 
+solid 
+red;
+}
+}
+
+@each 
+$size 
+in 
+$sizes {
+.icon-#{$size} 
+{
+border
+: 
+"#{$size + "px"}" 
+solid 
+red;
+}
+}
+
+//map test
+$font-weights
+: 
+("regular": 400
+, 
+"medium": 500, 
+"bold": 
+700);
+@each 
+$name, 
+$boldness 
+in 
+$icons {
+.text
+#{
+$name
+} {
+color: red;
+font-weight: 
+"#{$boldness}"
+}
+}
+
+$font-weights
+: 
+("regular": 400
+, 
+"medium": 500, 
+"bold": 
+700);
+@each 
+$name, 
+$boldness 
+in 
+$icons {
+.text-#{
+$name
+} {
+color: red;
+font-weight: 
+"#{$boldness}"
+}
+}

tests/scss/others/jsfmt.spec.js

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