Fix removing commas from function arguments in maps

changelog_unreleased/scss/14089.md

@@ -0,0 +1,22 @@
+#### Fix removing commas from function arguments in maps (#14089 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```scss
+/* Input */
+$foo: map-fn(
+  (
+    "#{prop}": inner-fn($first, $second),
+  )
+);
+
+/* Prettier stable */
+$foo: map-fn(("#{prop}": inner-fn($first $second)));
+
+/* Prettier main */
+$foo: map-fn(
+  (
+    "#{prop}": inner-fn($first, $second),
+  )
+);
+
+```

src/language-css/parser-postcss.js

@@ -122,23 +122,6 @@ 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: [],

src/language-css/printer-postcss.js

@@ -543,6 +543,9 @@ function genericPrint(path, options, print) {
 
       let insideSCSSInterpolationInString = false;
       let didBreak = false;
+
+      const isMapItemNode = isSCSSMapItemNode(path);
+
       for (let i = 0; i < node.groups.length; ++i) {
         parts.push(printed[i]);
 
@@ -853,6 +856,27 @@ function genericPrint(path, options, print) {
           continue;
         }
 
+        if (isMapItemNode) {
+          // Nodes after the colon are considered to be the value part of a key-value pair
+          //   $foo: map-fn(
+          //     (
+          //       "foo"                 :                 "bar #{inner-fn($baz)}"
+          //       ^^^^^(node.groups[0]) ^(node.groups[1]) ^^^^^^^^^^^^^^^^^^^^^^^(isPartOfValue === true)
+          //     )
+          //   );
+          const isPartOfValue =
+            node.groups?.[1]?.type === "value-colon" && i > 1;
+          if (
+            isPartOfValue &&
+            ((iNode.type === "value-string" &&
+              iNextNode?.type === "value-word") ||
+              (iNode.type === "value-word" &&
+                iPrevNode?.type === "value-string"))
+          ) {
+            continue;
+          }
+        }
+
         // Be default all values go through `line`
         parts.push(line);
       }

src/language-css/utils/index.js

@@ -276,7 +276,8 @@ function isSCSSMapItemNode(path) {
   // Check open parens contain key/value pair (i.e. `(key: value)` and `(key: (value, other-value)`)
   if (
     !isKeyValuePairInParenGroupNode(node) &&
-    !(parentParentNode && isKeyValuePairInParenGroupNode(parentParentNode))
+    !(parentParentNode && isKeyValuePairInParenGroupNode(parentParentNode)) &&
+    !isKeyValuePairNode(node)
   ) {
     return false;
   }

tests/format/scss/map/function-argument/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`function-argument-2.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+$display-breakpoints: map-deep-merge(
+  (
+    "sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})",
+  ),
+  $display-breakpoints
+);
+
+@each $name, $hue in $hues {
+  $map: map.merge(
+    $map,
+    (
+      '#{$prefix}-#{$name}': blend.set($base, $hue: $hue),
+    )
+  );
+}
+
+=====================================output=====================================
+$display-breakpoints: map-deep-merge(
+  (
+    "sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})",
+  ),
+  $display-breakpoints
+);
+
+@each $name, $hue in $hues {
+  $map: map.merge(
+    $map,
+    (
+      "#{$prefix}-#{$name}": blend.set($base, $hue: $hue),
+    )
+  );
+}
+
+================================================================================
+`;
+
 exports[`functional-argument.scss format 1`] = `
 ====================================options=====================================
 parsers: ["scss"]

tests/format/scss/map/function-argument/function-argument-2.scss

@@ -0,0 +1,15 @@
+$display-breakpoints: map-deep-merge(
+  (
+    "sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})",
+  ),
+  $display-breakpoints
+);
+
+@each $name, $hue in $hues {
+  $map: map.merge(
+    $map,
+    (
+      '#{$prefix}-#{$name}': blend.set($base, $hue: $hue),
+    )
+  );
+}