Fixed scss function arguments on different lines in maps #9128 (#9184)

Co-authored-by: agamkrbit <agamkrbit123@gmail.com>
Co-authored-by: fisker Cheung <lionkay@gmail.com>

changelog_unreleased/scss/9184.md

@@ -0,0 +1,35 @@
+#### Fix SCSS map in arguments (#9184 by @agamkrbit)
+
+<!-- prettier-ignore -->
+```scss
+// 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})",
+  ),
+  $display-breakpoints
+);
+
+// Prettier stable
+$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})",
+  ),
+  $display-breakpoints
+);
+
+// Prettier main
+$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})",
+  ),
+  $display-breakpoints
+);
+```

src/language-css/parser-postcss.js

@@ -122,6 +122,23 @@ function parseValueNode(valueNode, options) {
       parenGroupStack.pop();
       parenGroup = getLast(parenGroupStack);
     } 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/format/scss/map/function-argument/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`functional-argument.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/format/scss/map/function-argument/functional-argument.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/format/scss/map/function-argument/jsfmt.spec.js

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