Remove extra indentation in pseudo class function (#16572)

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 */
+}
+
+```

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;

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"]

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 */
+}