From 8e05b371abe74a5e4e2c84121dd2fef01f564aec Mon Sep 17 00:00:00 2001
From: Aland <158173939+aland-omed@users.noreply.github.com>
Date: Wed, 22 Jul 2026 04:46:33 +0300
Subject: [PATCH] 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            | 19 ++++++++
 .../print/comma-separated-value-group.js      |  4 ++
 .../atrule/__snapshots__/format.test.js.snap  | 47 ++++++++-----------
 tests/format/scss/atrule/if-else.scss         |  1 +
 4 files changed, 43 insertions(+), 28 deletions(-)
 create mode 100644 changelog_unreleased/scss/19687.md

diff --git a/changelog_unreleased/scss/19687.md b/changelog_unreleased/scss/19687.md
new file mode 100644
index 000000000..2973651bf
--- /dev/null
+++ b/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
+{}
+```
diff --git a/src/language-css/print/comma-separated-value-group.js b/src/language-css/print/comma-separated-value-group.js
index 0b60240aa..9b16445f7 100644
--- a/src/language-css/print/comma-separated-value-group.js
+++ b/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))
diff --git a/tests/format/scss/atrule/__snapshots__/format.test.js.snap b/tests/format/scss/atrule/__snapshots__/format.test.js.snap
index 0fbf4d3f9..a7a6917ed 100644
--- a/tests/format/scss/atrule/__snapshots__/format.test.js.snap
+++ b/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 ==
-    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 $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 $base-font-size !=
-    16px or
-    $base-line-height !=
-    24px or
-    $base-unit !=
-    "em" or
-    $h1-font-size !=
-    2 *
+  @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 *
+    $h2-font-size != 1.5 *
     $base-font-size or
-    $h3-font-size !=
-    1.17 *
+    $h3-font-size != 1.17 *
     $base-font-size or
-    $h4-font-size !=
-    1 *
+    $h4-font-size != 1 *
     $base-font-size or
-    $h5-font-size !=
-    0.83 *
+    $h5-font-size != 0.83 *
     $base-font-size or
-    $h6-font-size !=
-    0.67 *
+    $h6-font-size != 0.67 *
     $base-font-size or
-    $indent-amount !=
-    40px
+    $indent-amount != 40px
   {
   }
   @if (str-slice($item, 0, 1) == ":") {
diff --git a/tests/format/scss/atrule/if-else.scss b/tests/format/scss/atrule/if-else.scss
index df7c6e6a3..b0fbce402 100644
--- a/tests/format/scss/atrule/if-else.scss
+++ b/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) == " : ") {}