From 1dfe28f857d5aefa61178cf11aa06ff184d07839 Mon Sep 17 00:00:00 2001
From: SUZUKI Sosuke <aosukeke@gmail.com>
Date: Wed, 14 Aug 2024 09:52:53 +0900
Subject: [PATCH] Remove extra indentation in pseudo class function (#16572)

---
 changelog_unreleased/css/16572.md             | 30 +++++++
 src/language-css/printer-postcss.js           |  8 +-
 .../__snapshots__/format.test.js.snap         | 85 +++++++++++++++++++
 tests/format/css/pseudo-call/indent.css       | 23 +++++
 4 files changed, 144 insertions(+), 2 deletions(-)
 create mode 100644 changelog_unreleased/css/16572.md
 create mode 100644 tests/format/css/pseudo-call/indent.css

diff --git a/changelog_unreleased/css/16572.md b/changelog_unreleased/css/16572.md
new file mode 100644
index 000000000..bacb785f4
--- /dev/null
+++ b/changelog_unreleased/css/16572.md
@@ -0,0 +1,30 @@
+#### Remove extra indentation in pseudo-class function (#16572 by @sosukesuzuki)
+
+This change fixes a bug where extra indentation was added when line breaks were included in the argument list of pseudo-class functions like [`:where()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:where), [`:is()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:is), and [`:not`](https://developer.mozilla.org/en-US/docs/Web/CSS/:not).
+
+<!-- prettier-ignore -->
+```css
+/* Input */
+:where(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+/* Prettier stable */
+:where(
+    input:not([type="button"], [type="reset"], [type="submit"]),
+    textarea,
+    select
+  ) {
+  /* CSS here */
+}
+
+/* Prettier main */
+:where(
+  input:not([type="button"], [type="reset"], [type="submit"]),
+  textarea,
+  select
+) {
+  /* CSS here */
+}
+
+```
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index f6bd28136..21642e09d 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -357,8 +357,12 @@ function genericPrint(path, options, print) {
         ),
       ]);
 
-    case "selector-selector":
-      return group(indent(path.map(print, "nodes")));
+    case "selector-selector": {
+      const shouldIndent = node.nodes.length > 1;
+      return group(
+        (shouldIndent ? indent : (x) => x)(path.map(print, "nodes")),
+      );
+    }
 
     case "selector-comment":
       return node.value;
diff --git a/tests/format/css/pseudo-call/__snapshots__/format.test.js.snap b/tests/format/css/pseudo-call/__snapshots__/format.test.js.snap
index 5a3dbabd4..752fc4a74 100644
--- a/tests/format/css/pseudo-call/__snapshots__/format.test.js.snap
+++ b/tests/format/css/pseudo-call/__snapshots__/format.test.js.snap
@@ -1,5 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`indent.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+:where(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+.foooooooooooooooooooo :where(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+:is(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+.foooooooooooooooooooo :is(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+:not(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+.foooooooooooooooooooo :not(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+=====================================output=====================================
+:where(
+  input:not([type="button"], [type="reset"], [type="submit"]),
+  textarea,
+  select
+) {
+  /* CSS here */
+}
+
+.foooooooooooooooooooo
+  :where(
+    input:not([type="button"], [type="reset"], [type="submit"]),
+    textarea,
+    select
+  ) {
+  /* CSS here */
+}
+
+:is(
+  input:not([type="button"], [type="reset"], [type="submit"]),
+  textarea,
+  select
+) {
+  /* CSS here */
+}
+
+.foooooooooooooooooooo
+  :is(
+    input:not([type="button"], [type="reset"], [type="submit"]),
+    textarea,
+    select
+  ) {
+  /* CSS here */
+}
+
+:not(
+  input:not([type="button"], [type="reset"], [type="submit"]),
+  textarea,
+  select
+) {
+  /* CSS here */
+}
+
+.foooooooooooooooooooo
+  :not(
+    input:not([type="button"], [type="reset"], [type="submit"]),
+    textarea,
+    select
+  ) {
+  /* CSS here */
+}
+
+================================================================================
+`;
+
 exports[`is.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
diff --git a/tests/format/css/pseudo-call/indent.css b/tests/format/css/pseudo-call/indent.css
new file mode 100644
index 000000000..8812d57a8
--- /dev/null
+++ b/tests/format/css/pseudo-call/indent.css
@@ -0,0 +1,23 @@
+:where(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+.foooooooooooooooooooo :where(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+:is(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+.foooooooooooooooooooo :is(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+:not(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}
+
+.foooooooooooooooooooo :not(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
+    /* CSS here */
+}