testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resolve extra indent for CSS comma separated value after block comment (#18228)

Browse Source
This commit is contained in:
Seiya authored and GitHub committed 2025-11-17 23:01:08 +08:00
1 parent bb6c853f39
commit 5e82e9a823
4 files changed
+104 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/css/18228.md
+31
View File
@@ -0,0 +1,31 @@
#### Fix extra indent for CSS comma-separated values after a block comment (#18228 by @seiyab)
<!-- prettier-ignore -->
```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);
}
```
src/language-css/print/comma-separated-value-group.js
+18 -13
View File
@@ -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, "");
}
tests/format/css/comments/17479.css
+13
View File
@@ -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;
}
tests/format/css/comments/__snapshots__/format.test.js.snap
+42
View File
@@ -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"]