Fix SCSS compound comparison line breaks (#19687)

Co-authored-by: fisker Cheung <lionkay@gmail.com>
Signed-off-by: Aland <158173939+aland-omed@users.noreply.github.com>

changelog_unreleased/scss/19687.md

@@ -0,0 +1,19 @@
+#### Keep compound comparisons together (#19687 by @aland-omed)
+
+<!-- prettier-ignore -->
+```scss
+// Input
+@if $something == $something-else and $another-thing == $another-thing-with-long-name {}
+
+// Prettier stable
+@if $something ==
+  $something-else and
+  $another-thing ==
+  $another-thing-with-long-name
+{}
+
+// Prettier main
+@if $something == $something-else and
+  $another-thing == $another-thing-with-long-name
+{}
+```

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

@@ -67,6 +67,8 @@ function printCommaSeparatedValueGroup(path, options, print) {
   const isControlDirective =
     atRuleAncestorNode &&
     isSCSSControlDirectiveNode(atRuleAncestorNode, options);
+  const hasLogicalOperator =
+    isControlDirective && node.groups.some(isIfElseKeywordNode);
   const hasInlineComment = node.groups.some((node) =>
     isInlineValueCommentNode(node),
   );
@@ -422,6 +424,8 @@ function printCommaSeparatedValueGroup(path, options, print) {
       isControlDirective &&
       (isEqualityOperatorNode(iNextNode) ||
         isRelationalOperatorNode(iNextNode) ||
+        (hasLogicalOperator &&
+          (isEqualityOperatorNode(iNode) || isRelationalOperatorNode(iNode))) ||
         isIfElseKeywordNode(iNextNode) ||
         isEachKeywordNode(iNode) ||
         isForKeywordNode(iNode))

tests/format/scss/atrule/__snapshots__/format.test.js.snap

@@ -557,6 +557,7 @@ p {
     @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
+    @if $something == $something-else and $another-thing == $another-thing-with-long-name {}
     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
     @if (str-slice($item, 0, 1) == ":") {}
     @if (str-slice($item, 0, 3) == " : ") {}
@@ -645,44 +646,34 @@ p {
   }
   @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {
   }
-  @if $very-very-very-very-very-very-long-var ==
+  @if $very-very-very-very-very-very-long-var == 0 and
-    0 and
+    $very-very-very-long-var == 0
-    $very-very-very-long-var ==
-    0
   {
   }
-  @if $very-very-very-very-very-very-very-very-very-very-very-long-var ==
+  @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and
-    0 and
+    $very-very-very-very-very-very-very-very-very-very-very-long-var == 0
-    $very-very-very-very-very-very-very-very-very-very-very-long-var ==
-    0
   {
   }
-  @if $base-font-size !=
+  @if $something == $something-else and
-    16px or
+    $another-thing == $another-thing-with-long-name
-    $base-line-height !=
+  {
-    24px or
+  }
-    $base-unit !=
+  @if $base-font-size != 16px or
-    "em" or
+    $base-line-height != 24px or
-    $h1-font-size !=
+    $base-unit != "em" or
-    2 *
+    $h1-font-size != 2 *
     $base-font-size or
-    $h2-font-size !=
+    $h2-font-size != 1.5 *
-    1.5 *
     $base-font-size or
-    $h3-font-size !=
+    $h3-font-size != 1.17 *
-    1.17 *
     $base-font-size or
-    $h4-font-size !=
+    $h4-font-size != 1 *
-    1 *
     $base-font-size or
-    $h5-font-size !=
+    $h5-font-size != 0.83 *
-    0.83 *
     $base-font-size or
-    $h6-font-size !=
+    $h6-font-size != 0.67 *
-    0.67 *
     $base-font-size or
-    $indent-amount !=
+    $indent-amount != 40px
-    40px
   {
   }
   @if (str-slice($item, 0, 1) == ":") {

tests/format/scss/atrule/if-else.scss

@@ -138,6 +138,7 @@ p {
     @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
     @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
     @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
+    @if $something == $something-else and $another-thing == $another-thing-with-long-name {}
     @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
     @if (str-slice($item, 0, 1) == ":") {}
     @if (str-slice($item, 0, 3) == " : ") {}