Add space before unary minus followed by a function call. (#15129)

changelog_unreleased/scss/15129.md

@@ -0,0 +1,19 @@
+#### Add space before unary minus followed by a function call (#15129 by @pamelalozano)
+
+<!-- prettier-ignore -->
+```less
+// Input
+div {
+  margin: - func();
+}
+
+// Prettier stable
+div {
+  margin: -func();
+}
+
+// Prettier main
+div {
+  margin: - func();
+}
+```

src/language-css/print/comma-separated-value-group.js

@@ -264,6 +264,17 @@ function printCommaSeparatedValueGroup(path, options, print) {
       iPrevNode?.type === "value-func" ||
       (iPrevNode && isWordNode(iPrevNode));
 
+    // Space before unary minus followed by a function call.
+    if (
+      options.parser === "scss" &&
+      isMathOperator &&
+      iNode.value === "-" &&
+      iNextNode.type === "value-func"
+    ) {
+      parts.push(" ");
+      continue;
+    }
+
     // Formatting `/`, `+`, `-` sign
     if (
       !(isMultiplicationNode(iNextNode) || isMultiplicationNode(iNode)) &&

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

@@ -1554,6 +1554,10 @@ label {
   pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, 2))))))))))))
 }
 
+// #5636
+div {
+  margin: - pow(2, 2) * 100px;
+}
 =====================================output=====================================
 @media #{$g-breakpoint-tiny} {
 }
@@ -2622,6 +2626,11 @@ label {
   );
 }
 
+// #5636
+div {
+  margin: - pow(2, 2) * 100px;
+}
+
 ================================================================================
 `;
 
@@ -3719,6 +3728,10 @@ label {
   pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, 2))))))))))))
 }
 
+// #5636
+div {
+  margin: - pow(2, 2) * 100px;
+}
 =====================================output=====================================
 @media #{$g-breakpoint-tiny} {
 }
@@ -4787,6 +4800,11 @@ label {
   );
 }
 
+// #5636
+div {
+  margin: - pow(2, 2) * 100px;
+}
+
 ================================================================================
 `;
 

tests/format/scss/scss/scss.scss

@@ -1084,3 +1084,8 @@ label {
   // This next pow is really powerful
   pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, pow(2, 2))))))))))))
 }
+
+// #5636
+div {
+  margin: - pow(2, 2) * 100px;
+}