From c6e026ea28a4832ff51c7485091cf19135451650 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Vo=C5=99=C3=AD=C5=A1ek?= Date: Thu, 23 Mar 2023 02:27:14 +0100 Subject: [PATCH] Fix line break in CSS declaration with comma (#14208) Co-authored-by: fisker Cheung --- changelog_unreleased/css/14208.md | 23 +++++ src/language-css/printer-postcss.js | 47 +++++++--- .../atrule/__snapshots__/jsfmt.spec.js.snap | 18 ++-- .../comments/__snapshots__/jsfmt.spec.js.snap | 3 +- .../__snapshots__/jsfmt.spec.js.snap | 7 +- .../indent/__snapshots__/jsfmt.spec.js.snap | 3 +- .../comments/__snapshots__/jsfmt.spec.js.snap | 3 +- .../less/__snapshots__/jsfmt.spec.js.snap | 4 +- .../comments/__snapshots__/jsfmt.spec.js.snap | 15 +++- .../scss/__snapshots__/jsfmt.spec.js.snap | 88 ++++++++++++++----- .../__snapshots__/jsfmt.spec.js.snap | 4 +- .../__snapshots__/jsfmt.spec.js.snap | 4 +- 12 files changed, 170 insertions(+), 49 deletions(-) create mode 100644 changelog_unreleased/css/14208.md diff --git a/changelog_unreleased/css/14208.md b/changelog_unreleased/css/14208.md new file mode 100644 index 000000000..a2b97cf37 --- /dev/null +++ b/changelog_unreleased/css/14208.md @@ -0,0 +1,23 @@ +#### Fix line break in CSS declaration with comma (#14208 by @mvorisek) + + +```css +// Input +.myclass { + box-shadow: + inset 0 0 10px #555, + 0 0 20px black; +} + +// Prettier stable +.myclass { + box-shadow: inset 0 0 10px #555, 0 0 20px black; +} + +// Prettier main +.myclass { + box-shadow: + inset 0 0 10px #555, + 0 0 20px black; +} +``` diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index ca5719e93..e9c06684e 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -1,5 +1,7 @@ "use strict"; +/** @typedef {import("../document").Doc} Doc */ + const getLast = require("../utils/get-last.js"); const { printNumber, @@ -152,7 +154,16 @@ function genericPrint(path, options, print) { ? removeLines(print("value")) : print("value"); - if (!isColon && lastLineHasInlineComment(trimmedBetween)) { + if ( + !isColon && + lastLineHasInlineComment(trimmedBetween) && + !( + node.value.type === "value-root" && + node.value.group.type === "value-value" && + node.value.group.group.type === "value-paren_group" && + path.call(() => shouldBreakList(path), "value", "group", "group") + ) + ) { value = indent([hardline, dedent(value)]); } @@ -924,17 +935,17 @@ function genericPrint(path, options, print) { } if (!node.open) { - const printed = path.map(print, "groups"); - const res = []; - - for (let i = 0; i < printed.length; i++) { - if (i !== 0) { - res.push([",", line]); - } - res.push(printed[i]); - } - - return group(indent(fill(res))); + const forceHardLine = shouldBreakList(path); + const parts = join( + [",", forceHardLine ? hardline : line], + path.map(print, "groups") + ); + return indent( + forceHardLine + ? [hardline, parts] + : // TODO: Use `parts` when merge to `next` branch + group(fill(parts.parts)) + ); } const isSCSSMapItem = isSCSSMapItemNode(path); @@ -1169,6 +1180,18 @@ function printCssNumber(rawNumber) { ); } +function shouldBreakList(path) { + const node = path.getNode(); + const parentParentParentNode = path.getParentNode(2); + return ( + !node.open && + (parentParentParentNode.type === "css-decl" || + (parentParentParentNode.type === "css-atrule" && + parentParentParentNode.variable)) && + node.groups.some((node) => node.type === "value-comma_group") + ); +} + module.exports = { print: genericPrint, embed, diff --git a/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap index 5c6657479..0dbc09a7f 100644 --- a/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap @@ -1580,33 +1580,39 @@ format( =====================================output===================================== @font-face { font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + src: + url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } @font-face { font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + src: + url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } @font-face { font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + src: + url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } @font-face { font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + src: + url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } @font-face { font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + src: + url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } @font-face { font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + src: + url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } diff --git a/tests/format/css/comments/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/comments/__snapshots__/jsfmt.spec.js.snap index af5a18338..1132281e0 100644 --- a/tests/format/css/comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/css/comments/__snapshots__/jsfmt.spec.js.snap @@ -397,7 +397,8 @@ a { @font-face { font-family: "Prettier"; - src: /* comment 16 */ local(/* comment 17 */ "Prettier" /* comment 18 */), + src: /* comment 16 */ + local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */ /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */ } diff --git a/tests/format/css/fill-value/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/fill-value/__snapshots__/jsfmt.spec.js.snap index 3dab5c462..b1934e564 100644 --- a/tests/format/css/fill-value/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/css/fill-value/__snapshots__/jsfmt.spec.js.snap @@ -15,7 +15,12 @@ div { div { border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%); - $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, + $fontFamily: + "Lato", + -apple-system, + "Helvetica Neue", + Helvetica, + Arial, sans-serif; } diff --git a/tests/format/css/indent/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/indent/__snapshots__/jsfmt.spec.js.snap index b00a54f5c..385f35cb3 100644 --- a/tests/format/css/indent/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/css/indent/__snapshots__/jsfmt.spec.js.snap @@ -16,7 +16,8 @@ div { div { background: var(fig-light-02) url(/images/inset-shadow-east-ltr.png) 100% 0 repeat-y; - box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), + box-shadow: + 0 0 1px 2px rgba(88, 144, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); padding-bottom: calc( var(ads-help-tray-footer-with-support-link-height) + diff --git a/tests/format/less/comments/__snapshots__/jsfmt.spec.js.snap b/tests/format/less/comments/__snapshots__/jsfmt.spec.js.snap index d34539e2b..f7701ebff 100644 --- a/tests/format/less/comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/less/comments/__snapshots__/jsfmt.spec.js.snap @@ -455,7 +455,8 @@ printWidth: 80 #bbbbbb // then some B #cccccc; // and round it out with C -@test-comma-separated: #aaaaaa, +@test-comma-separated: + #aaaaaa, // Start with A #bbbbbb, // then some B diff --git a/tests/format/less/less/__snapshots__/jsfmt.spec.js.snap b/tests/format/less/less/__snapshots__/jsfmt.spec.js.snap index 1541bb049..0730bbe0e 100644 --- a/tests/format/less/less/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/less/less/__snapshots__/jsfmt.spec.js.snap @@ -3198,7 +3198,9 @@ div { } .myclass { - box-shadow: inset 0 0 10px #555, 0 0 20px black; + box-shadow: + inset 0 0 10px #555, + 0 0 20px black; } .mixin() { diff --git a/tests/format/scss/comments/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/comments/__snapshots__/jsfmt.spec.js.snap index 45cf082b4..2e96741bb 100644 --- a/tests/format/scss/comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/scss/comments/__snapshots__/jsfmt.spec.js.snap @@ -224,16 +224,22 @@ selector { // #8052 $font-family-rich: // custom - "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", + "Noto Sans TC", + "Noto Sans SC", + "Noto Sans JP", // Safari for OS X and iOS (San Francisco) -apple-system, BlinkMacSystemFont, // fallback Roboto, - "Helvetica Neue", Helvetica, Arial, sans-serif, + "Helvetica Neue", + Helvetica, + Arial, + sans-serif, // emoji "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol" !default; + "Segoe UI Emoji", + "Segoe UI Symbol" !default; // #7109 .test { @@ -394,7 +400,8 @@ $my-list2: c; =====================================output===================================== -$my-list: "foo", +$my-list: + "foo", // Foo "bar"; // Bar diff --git a/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap index e7fd701f3..cf71775b5 100644 --- a/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap @@ -1786,17 +1786,29 @@ $list-comma: "item-1", "item-2", "item-3"; $list-comma: "item-1", "item-2", "item-3"; $list-comma: "item-1", "item-2", "item-3"; $list-comma: "item-1", "item-2", "item-3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; $list: ( ("item-1.1", "item-1.2", "item-1.3"), @@ -1870,7 +1882,10 @@ $space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1") @error "Very long long long long long long long long long long long long long line Error (#{$message})."; @error "Very long long long long long long long long long long long long long line Error (#{$message})."; -$buttonConfig: "save" 50px, "cancel" 50px, "help" 100px; +$buttonConfig: + "save" 50px, + "cancel" 50px, + "help" 100px; $locale: "en_us"; html[lang="#{$locale}"] { @@ -2204,7 +2219,10 @@ $foundation-dir: "foundation"; } } -$icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602"; +$icons: + wifi "\\600", + wifi-hotspot "\\601", + weather "\\602"; @each $icon in $icons { .icon-#{nth($icon, 1)}, @@ -2251,7 +2269,12 @@ $icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602"; $last: nth($juggler, length($juggler)); $x: if($last%2==0, 1/2, 3/2); $new: pow($last, $x); -$sequence: 1, 1 1, 2 1, 1 2 1 1, 1 1 1 2 2 1; +$sequence: + 1, + 1 1, + 2 1, + 1 2 1 1, + 1 1 1 2 2 1; $new-entry: (); $new-entry: (); $new-entry: (); @@ -2467,7 +2490,8 @@ a { color: red; // Comment } -$my-list: "foo", +$my-list: + "foo", // Comment "bar"; // Comment @@ -3926,17 +3950,29 @@ $list-comma: "item-1", "item-2", "item-3"; $list-comma: "item-1", "item-2", "item-3"; $list-comma: "item-1", "item-2", "item-3"; $list-comma: "item-1", "item-2", "item-3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; -$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3", +$list: + "item-1.1" "item-1.2" "item-1.3", + "item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; $list: ( ("item-1.1", "item-1.2", "item-1.3"), @@ -4010,7 +4046,10 @@ $space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1") @error "Very long long long long long long long long long long long long long line Error (#{$message})."; @error "Very long long long long long long long long long long long long long line Error (#{$message})."; -$buttonConfig: "save" 50px, "cancel" 50px, "help" 100px; +$buttonConfig: + "save" 50px, + "cancel" 50px, + "help" 100px; $locale: "en_us"; html[lang="#{$locale}"] { @@ -4344,7 +4383,10 @@ $foundation-dir: "foundation"; } } -$icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602"; +$icons: + wifi "\\600", + wifi-hotspot "\\601", + weather "\\602"; @each $icon in $icons { .icon-#{nth($icon, 1)}, @@ -4391,7 +4433,12 @@ $icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602"; $last: nth($juggler, length($juggler)); $x: if($last%2==0, 1/2, 3/2); $new: pow($last, $x); -$sequence: 1, 1 1, 2 1, 1 2 1 1, 1 1 1 2 2 1; +$sequence: + 1, + 1 1, + 2 1, + 1 2 1 1, + 1 1 1 2 2 1; $new-entry: (); $new-entry: (); $new-entry: (); @@ -4607,7 +4654,8 @@ a { color: red; // Comment } -$my-list: "foo", +$my-list: + "foo", // Comment "bar"; // Comment diff --git a/tests/format/stylefmt-repo/font-face/__snapshots__/jsfmt.spec.js.snap b/tests/format/stylefmt-repo/font-face/__snapshots__/jsfmt.spec.js.snap index e55743ae2..72c76cb0e 100644 --- a/tests/format/stylefmt-repo/font-face/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/stylefmt-repo/font-face/__snapshots__/jsfmt.spec.js.snap @@ -12,7 +12,9 @@ printWidth: 80 @font-face { font-family: "HelveticaNeueW02-45Ligh"; src: url("/fonts/pictos-web.eot"); - src: local("☺"), url("/fonts/pictos-web.woff") format("woff"), + src: + local("☺"), + url("/fonts/pictos-web.woff") format("woff"), url("/fonts/pictos-web.ttf") format("truetype"), url("/fonts/pictos-web.svg#webfontIyfZbseF") format("svg"); font-weight: normal; diff --git a/tests/format/stylefmt-repo/font-shorthand/__snapshots__/jsfmt.spec.js.snap b/tests/format/stylefmt-repo/font-shorthand/__snapshots__/jsfmt.spec.js.snap index ddda6c0b0..7b60c6ed0 100644 --- a/tests/format/stylefmt-repo/font-shorthand/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/stylefmt-repo/font-shorthand/__snapshots__/jsfmt.spec.js.snap @@ -15,7 +15,9 @@ printWidth: 80 .class { font: normal normal 24px/1 "myfont"; font: normal normal normal 12px/20px myfont; - font: normal 300 0.875em/1.3 "myfont", sans-serif; + font: + normal 300 0.875em/1.3 "myfont", + sans-serif; } ================================================================================