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