From 89fb33af3a64a18077cff945a7d6b9bbd6e26d54 Mon Sep 17 00:00:00 2001 From: fisker Cheung Date: Tue, 29 Mar 2022 20:44:28 +0800 Subject: [PATCH] Fix less/scss format error (#12536) --- changelog_unreleased/less/12536.md | 29 ++++++++++++++ src/language-css/printer-postcss.js | 17 +++++---- tests/format/less/parens/2.less | 12 ++++++ .../parens/__snapshots__/jsfmt.spec.js.snap | 34 +++++++++++++++++ tests/format/scss/parens/2.scss | 15 ++++++++ .../parens/__snapshots__/jsfmt.spec.js.snap | 38 +++++++++++++++++++ 6 files changed, 137 insertions(+), 8 deletions(-) create mode 100644 changelog_unreleased/less/12536.md create mode 100644 tests/format/less/parens/2.less create mode 100644 tests/format/scss/parens/2.scss diff --git a/changelog_unreleased/less/12536.md b/changelog_unreleased/less/12536.md new file mode 100644 index 000000000000..e73796d3afb0 --- /dev/null +++ b/changelog_unreleased/less/12536.md @@ -0,0 +1,29 @@ +#### Fix LESS/SCSS format error (#12536 by @fisker) + + +```less +// Input +.background-gradient(@cut) { + background: linear-gradient( + to right, + @white 0%, + @white (@cut - 0.01%), + @portal-background @cut, + @portal-background 100% + ); +} + +// Prettier stable +TypeError: Cannot read properties of undefined (reading 'endOffset') + +// Prettier main +.background-gradient(@cut) { + background: linear-gradient( + to right, + @white 0%, + @white (@cut - 0.01%), + @portal-background @cut, + @portal-background 100% + ); +} +``` diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 3f69fd812713..d4de2f1911ca 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -924,15 +924,16 @@ function genericPrint(path, options, print) { if ( !isLast && child.type === "value-comma_group" && - child.groups && - child.groups[0].type !== "value-paren_group" && - isNextLineEmpty( - options.originalText, - getLast(child.groups), - locEnd - ) + isNonEmptyArray(child.groups) ) { - printed.push(hardline); + const last = getLast(child.groups); + if ( + // `value-paren_group` missing location info + last.source && + isNextLineEmpty(options.originalText, last, locEnd) + ) { + printed.push(hardline); + } } return printed; diff --git a/tests/format/less/parens/2.less b/tests/format/less/parens/2.less new file mode 100644 index 000000000000..4f008166a701 --- /dev/null +++ b/tests/format/less/parens/2.less @@ -0,0 +1,12 @@ +.background-gradient(@cut) { + background: linear-gradient( + to right, + + + /* Should preserve empty lines */ + @white 0%, + @white (@cut - 0.01%), + @portal-background @cut, + @portal-background 100% + ); +} diff --git a/tests/format/less/parens/__snapshots__/jsfmt.spec.js.snap b/tests/format/less/parens/__snapshots__/jsfmt.spec.js.snap index a0a9d2b86b29..46f778ccb1d4 100644 --- a/tests/format/less/parens/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/less/parens/__snapshots__/jsfmt.spec.js.snap @@ -1,5 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`2.less format 1`] = ` +====================================options===================================== +parsers: ["less"] +printWidth: 80 + | printWidth +=====================================input====================================== +.background-gradient(@cut) { + background: linear-gradient( + to right, + + + /* Should preserve empty lines */ + @white 0%, + @white (@cut - 0.01%), + @portal-background @cut, + @portal-background 100% + ); +} + +=====================================output===================================== +.background-gradient(@cut) { + background: linear-gradient( + to right, + + /* Should preserve empty lines */ @white 0%, + @white (@cut - 0.01%), + @portal-background @cut, + @portal-background 100% + ); +} + +================================================================================ +`; + exports[`parens.less format 1`] = ` ====================================options===================================== parsers: ["less"] diff --git a/tests/format/scss/parens/2.scss b/tests/format/scss/parens/2.scss new file mode 100644 index 000000000000..78ab1c32e5af --- /dev/null +++ b/tests/format/scss/parens/2.scss @@ -0,0 +1,15 @@ +$icons: ( + cal-day-group: + ( + left: 253, + top: 73, + ), + + + /* Should preserve empty lines */ + cal-week-group: + ( + left: 1, + top: 169, + ) +); diff --git a/tests/format/scss/parens/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/parens/__snapshots__/jsfmt.spec.js.snap index 04daff2324bf..5a8c9e105192 100644 --- a/tests/format/scss/parens/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/scss/parens/__snapshots__/jsfmt.spec.js.snap @@ -1,5 +1,43 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`2.scss format 1`] = ` +====================================options===================================== +parsers: ["scss"] +printWidth: 80 + | printWidth +=====================================input====================================== +$icons: ( + cal-day-group: + ( + left: 253, + top: 73, + ), + + + /* Should preserve empty lines */ + cal-week-group: + ( + left: 1, + top: 169, + ) +); + +=====================================output===================================== +$icons: ( + cal-day-group: ( + left: 253, + top: 73, + ), + /* Should preserve empty lines */ cal-week-group: + ( + left: 1, + top: 169, + ), +); + +================================================================================ +`; + exports[`parens.scss format 1`] = ` ====================================options===================================== parsers: ["scss"]