Remove space before ; delimiter in SCSS if() function (#19384)

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

changelog_unreleased/scss/19384.md

@@ -0,0 +1,13 @@
+#### Remove space before `;` delimiter in SCSS `if()` function (#19384 by @kovsu)
+
+<!-- prettier-ignore -->
+```scss
+// Input
+$value: if(sass($x): 1 ; else: 2);
+
+// Prettier stable
+$value: if(sass($x): 1 ; else: 2);
+
+// Prettier main
+$value: if(sass($x): 1; else: 2);
+```

src/language-css/massage-ast/index.js

@@ -209,6 +209,39 @@ function massageAstNode(original, cloned, parent) {
       value: original.groups.map((node) => node.value).join(""),
     };
   }
+
+  if (
+    original.type === "value-func" &&
+    original.value === "if" &&
+    original.group.type === "value-paren_group" &&
+    original.group.groups.length === 1 &&
+    original.group.groups[0].type === "value-comma_group"
+  ) {
+    const originalGroups = original.group.groups[0].groups;
+    const clonedGroups = cloned.group.groups[0].groups;
+
+    // `if(sass(true): 10px ; else: 15px)`
+    //                      ^
+    for (let index = originalGroups.length - 1; index >= 0; index--) {
+      const group = originalGroups[index];
+
+      if (
+        group.type === "value-word" &&
+        typeof group.value === "string" &&
+        group.value.endsWith(";")
+      ) {
+        if (group.value === ";") {
+          const previousGroup = originalGroups[index - 1];
+          if (previousGroup?.type === "value-number") {
+            clonedGroups.splice(index - 1, 2, { type: "#node-placeholder" });
+          }
+          continue;
+        }
+
+        clonedGroups[index] = { type: "#node-placeholder" };
+      }
+    }
+  }
 }
 
 massageAstNode.ignoredProperties = ignoredProperties;

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

@@ -140,6 +140,22 @@ function printCommaSeparatedValueGroup(path, options, print) {
       continue;
     }
 
+    // Don't print a space before the `;` branch delimiter in the SCSS `if()`
+    // function (i.e. `if(condition: value; else: value)`)
+    if (
+      options.parser === "scss" &&
+      iNextNode.type === "value-word" &&
+      iNextNode.value === ";" &&
+      path.match(
+        undefined,
+        (node, key) => key === "groups" && node.type === "value-paren_group",
+        (node, key) =>
+          key === "group" && node.type === "value-func" && node.value === "if",
+      )
+    ) {
+      continue;
+    }
+
     // We should keep spaces between words in a embedded JS expression
     // examples:
     //   styled.div` font-size: var(--font-size-h${({ level }) => level}); `;

tests/format/scss/function/if/19355.scss

@@ -0,0 +1,14 @@
+$a: if(sass($x): 1; else: white);
+$a: if(sass($x): 1   ; else: white);
+$b: if(sass($x): map.get($view, background); else: white);
+$c: if(sass($x): map.get($view, background)   ; else: white);
+
+@debug if(sass(true): 10px; else: 15px);
+@debug if(sass(true): 10px   ; else: 15px);
+@debug if(sass(meta.variable-defined($var)): $var);
+
+@mixin foo($isDark, $view) {
+  .bar {
+    background-color: if(sass($isDark): map.get($view, background) ; else: white);
+  }
+}

tests/format/scss/function/if/__snapshots__/format.test.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`19355.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+$a: if(sass($x): 1; else: white);
+$a: if(sass($x): 1   ; else: white);
+$b: if(sass($x): map.get($view, background); else: white);
+$c: if(sass($x): map.get($view, background)   ; else: white);
+
+@debug if(sass(true): 10px; else: 15px);
+@debug if(sass(true): 10px   ; else: 15px);
+@debug if(sass(meta.variable-defined($var)): $var);
+
+@mixin foo($isDark, $view) {
+  .bar {
+    background-color: if(sass($isDark): map.get($view, background) ; else: white);
+  }
+}
+
+=====================================output=====================================
+$a: if(sass($x): 1; else: white);
+$a: if(sass($x): 1; else: white);
+$b: if(sass($x): map.get($view, background); else: white);
+$c: if(sass($x): map.get($view, background); else: white);
+
+@debug if(sass(true): 10px; else: 15px);
+@debug if(sass(true): 10px; else: 15px);
+@debug if(sass(meta.variable-defined($var)): $var);
+
+@mixin foo($isDark, $view) {
+  .bar {
+    background-color: if(
+      sass($isDark): map.get($view, background); else: white
+    );
+  }
+}
+
+================================================================================
+`;

tests/format/scss/function/if/format.test.js

@@ -0,0 +1 @@
+runFormatTest(import.meta, ["scss"]);