diff --git a/changelog_unreleased/css/13402.md b/changelog_unreleased/css/13402.md new file mode 100644 index 000000000..c50ac315c --- /dev/null +++ b/changelog_unreleased/css/13402.md @@ -0,0 +1,19 @@ +#### Keep trailing-comma for `var` function (#13402 by @sosukesuzuki) + + +```css +/* Input */ +.foo { + --bar: var(--baz,); +} + +/* Prettier stable */ +.foo { + --bar: var(--baz); +} + +/* Prettier main */ +.foo { + --bar: var(--baz,); +} +``` diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index e3838f57d..2a54eb406 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -73,6 +73,7 @@ import { isAtWordPlaceholderNode, isConfigurationNode, isParenGroupNode, + isVarFunctionNode, } from "./utils/index.js"; import { locStart, locEnd } from "./loc.js"; import printUnit from "./utils/print-unit.js"; @@ -894,6 +895,7 @@ function genericPrint(path, options, print) { const isLastItemComment = lastItem && lastItem.type === "value-comment"; const isKey = isKeyInValuePairNode(node, parentNode); const isConfiguration = isConfigurationNode(node, parentNode); + const isVarFunction = isVarFunctionNode(parentNode); const shouldBreak = isConfiguration || (isSCSSMapItem && !isKey); const shouldDedent = isConfiguration || isKey; @@ -908,7 +910,17 @@ function genericPrint(path, options, print) { path.map((childPath, index) => { const child = childPath.getValue(); const isLast = index === node.groups.length - 1; - const printed = [print(), isLast ? "" : ","]; + const hasComma = () => + Boolean( + child.source && + options.originalText + .slice(locStart(child), locStart(node.close)) + .trimEnd() + .endsWith(",") + ); + const shouldPrintComma = + !isLast || (isVarFunction && hasComma()); + const printed = [print(), shouldPrintComma ? "," : ""]; // Key/Value pair in open paren already indented if ( diff --git a/src/language-css/utils/index.js b/src/language-css/utils/index.js index 22a2ccc41..1a8763844 100644 --- a/src/language-css/utils/index.js +++ b/src/language-css/utils/index.js @@ -120,6 +120,10 @@ function isURLFunctionNode(node) { return node.type === "value-func" && node.value.toLowerCase() === "url"; } +function isVarFunctionNode(node) { + return node.type === "value-func" && node.value.toLowerCase() === "var"; +} + function isLastNode(path, node) { const nodes = path.getParentNode()?.nodes; return nodes && nodes.indexOf(node) === nodes.length - 1; @@ -444,4 +448,5 @@ export { isAtWordPlaceholderNode, isConfigurationNode, isParenGroupNode, + isVarFunctionNode, }; diff --git a/tests/format/css/trailing-comma/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/trailing-comma/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 000000000..867f8c995 --- /dev/null +++ b/tests/format/css/trailing-comma/__snapshots__/jsfmt.spec.js.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`var-func.css format 1`] = ` +====================================options===================================== +parsers: ["css"] +printWidth: 80 + | printWidth +=====================================input====================================== +.foo { + --bar: var(--baz,); + --bar: var(--baz ,); + --bar: var(--baz , ); + --bar: var(--baz,); + --bar: var( --baz1, --baz2 , ); +} + +=====================================output===================================== +.foo { + --bar: var(--baz,); + --bar: var(--baz,); + --bar: var(--baz,); + --bar: var(--baz,); + --bar: var(--baz1, --baz2,); +} + +================================================================================ +`; diff --git a/tests/format/css/trailing-comma/jsfmt.spec.js b/tests/format/css/trailing-comma/jsfmt.spec.js new file mode 100644 index 000000000..f232bbc6c --- /dev/null +++ b/tests/format/css/trailing-comma/jsfmt.spec.js @@ -0,0 +1 @@ +run_spec(import.meta, ["css"]); diff --git a/tests/format/css/trailing-comma/var-func.css b/tests/format/css/trailing-comma/var-func.css new file mode 100644 index 000000000..e3e6f6b51 --- /dev/null +++ b/tests/format/css/trailing-comma/var-func.css @@ -0,0 +1,7 @@ +.foo { + --bar: var(--baz,); + --bar: var(--baz ,); + --bar: var(--baz , ); + --bar: var(--baz,); + --bar: var( --baz1, --baz2 , ); +}