diff --git a/changelog_unreleased/css/18228.md b/changelog_unreleased/css/18228.md new file mode 100644 index 000000000..b73d4d6cf --- /dev/null +++ b/changelog_unreleased/css/18228.md @@ -0,0 +1,31 @@ +#### Fix extra indent for CSS comma-separated values after a block comment (#18228 by @seiyab) + + +```css +/* Input */ +.foo { + background-image: + linear-gradient(to top, blue, red 100%), + /* texture */ + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px), + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px); +} + +/* Prettier stable */ +.foo { + background-image: + linear-gradient(to top, blue, red 100%), + /* texture */ + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px), + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px); +} + +/* Prettier main */ +.foo { + background-image: + linear-gradient(to top, blue, red 100%), + /* texture */ + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px), + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px); +} +``` diff --git a/src/language-css/print/comma-separated-value-group.js b/src/language-css/print/comma-separated-value-group.js index 2b00adedc..f1cdeeb27 100644 --- a/src/language-css/print/comma-separated-value-group.js +++ b/src/language-css/print/comma-separated-value-group.js @@ -40,9 +40,16 @@ import { } from "../utils/index.js"; /** + * @import AstPath from "../../common/ast-path.js" * @import {Doc} from "../../document/index.js" */ +/** + * @param {AstPath} path + * @param {*} options + * @param {(...args: *[]) => Doc} print + * @returns {Doc} + */ function printCommaSeparatedValueGroup(path, options, print) { const { node } = path; const parentNode = path.parent; @@ -104,19 +111,6 @@ function printCommaSeparatedValueGroup(path, options, print) { continue; } - // Align key after comment in SCSS map - if ( - isColonNode(iNextNode) && - iNode.type === "value-word" && - parts.length > 2 && - node.groups - .slice(0, i) - .every((group) => group.type === "value-comment") && - !isInlineValueCommentNode(iPrevNode) - ) { - parts[parts.length - 2] = dedent(parts.at(-2)); - } - // Ignore SCSS @forward wildcard suffix if ( insideAtRuleNode(path, "forward") && @@ -512,6 +506,17 @@ function printCommaSeparatedValueGroup(path, options, print) { continue; } + // align value after block comment + if ( + !atRuleAncestorNode && + iNode.type === "value-comment" && + !iNode.inline && + node.groups.slice(0, i).every((group) => group.type === "value-comment") + ) { + parts.push(dedent(line), ""); + continue; + } + // Be default all values go through `line` parts.push(line, ""); } diff --git a/tests/format/css/comments/17479.css b/tests/format/css/comments/17479.css new file mode 100644 index 000000000..7abee94f7 --- /dev/null +++ b/tests/format/css/comments/17479.css @@ -0,0 +1,13 @@ +.foo { + background-image: + linear-gradient(to top, blue, red 100%), + /* texture */ + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px), + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px); + + box-shadow: 2px 2px 4px gray, + /* long long long long long long long long long long long long comment */ + /* long long long long long long long long long long long long comment */ + 1000px /* long long long long long long long long long long long long comment */ 1000px /* long long long long long long long long long comment */ 2px color(srgb 0.555555555 0.555555555 0.555555555), + 100px -1px 2px lightgray; +} diff --git a/tests/format/css/comments/__snapshots__/format.test.js.snap b/tests/format/css/comments/__snapshots__/format.test.js.snap index 18c821a4a..af399c3e6 100644 --- a/tests/format/css/comments/__snapshots__/format.test.js.snap +++ b/tests/format/css/comments/__snapshots__/format.test.js.snap @@ -36,6 +36,48 @@ h1 { ================================================================================ `; +exports[`17479.css format 1`] = ` +====================================options===================================== +parsers: ["css"] +printWidth: 80 + | printWidth +=====================================input====================================== +.foo { + background-image: + linear-gradient(to top, blue, red 100%), + /* texture */ + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px), + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px); + + box-shadow: 2px 2px 4px gray, + /* long long long long long long long long long long long long comment */ + /* long long long long long long long long long long long long comment */ + 1000px /* long long long long long long long long long long long long comment */ 1000px /* long long long long long long long long long comment */ 2px color(srgb 0.555555555 0.555555555 0.555555555), + 100px -1px 2px lightgray; +} + +=====================================output===================================== +.foo { + background-image: + linear-gradient(to top, blue, red 100%), + /* texture */ + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px), + repeating-linear-gradient(90deg, pink, yellow 20px, green 20px, pink 40px); + + box-shadow: + 2px 2px 4px gray, + /* long long long long long long long long long long long long comment */ + /* long long long long long long long long long long long long comment */ + 1000px + /* long long long long long long long long long long long long comment */ + 1000px /* long long long long long long long long long comment */ 2px + color(srgb 0.555555555 0.555555555 0.555555555), + 100px -1px 2px lightgray; +} + +================================================================================ +`; + exports[`CRLF.css format 1`] = ` ====================================options===================================== parsers: ["css"]