From 361cc21d142bd201fbceaa2b3b2b86299346c280 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Fri, 6 Jan 2023 17:13:41 +0900 Subject: [PATCH] Fix removing commas from function arguments in maps (#14089) Co-authored-by: fisker Cheung --- changelog_unreleased/scss/14089.md | 22 ++++++++ src/language-css/parser-postcss.js | 17 ------- src/language-css/printer-postcss.js | 29 ++++++----- .../__snapshots__/jsfmt.spec.js.snap | 51 +++++++++++++++++++ .../function-argument-2.scss | 18 +++++++ 5 files changed, 106 insertions(+), 31 deletions(-) create mode 100644 changelog_unreleased/scss/14089.md create mode 100644 tests/format/scss/map/function-argument/function-argument-2.scss diff --git a/changelog_unreleased/scss/14089.md b/changelog_unreleased/scss/14089.md new file mode 100644 index 000000000000..45e6ce2841b1 --- /dev/null +++ b/changelog_unreleased/scss/14089.md @@ -0,0 +1,22 @@ +#### Fix removing commas from function arguments in maps (#14089 by @sosukesuzuki) + + +```scss +/* Input */ +$foo: map-fn( + ( + "#{prop}": inner-fn($first, $second), + ) +); + +/* Prettier stable */ +$foo: map-fn(("#{prop}": inner-fn($first $second))); + +/* Prettier main */ +$foo: map-fn( + ( + "#{prop}": inner-fn($first, $second), + ) +); + +``` diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index 13b42c4670f2..652f968f9a43 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -122,23 +122,6 @@ function parseValueNode(valueNode, options) { parenGroupStack.pop(); parenGroup = getLast(parenGroupStack); } else if (node.type === "comma") { - if (commaGroup.groups.length > 1) { - for (const group of commaGroup.groups) { - // if css interpolation - if ( - group.value && - typeof group.value === "string" && - group.value.includes("#{") - ) { - commaGroup.groups = [ - stringifyNode({ - groups: commaGroup.groups, - }).trim(), - ]; - break; - } - } - } parenGroup.groups.push(commaGroup); commaGroup = { groups: [], diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index c847279b3910..44d11d50228f 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -547,6 +547,7 @@ function genericPrint(path, options, print) { let insideSCSSInterpolationInString = false; let didBreak = false; + for (let i = 0; i < node.groups.length; ++i) { parts.push(printed[i]); @@ -594,20 +595,20 @@ function genericPrint(path, options, print) { } // Ignore spaces before/after string interpolation (i.e. `"#{my-fn("_")}"`) - const isStartSCSSInterpolationInString = - iNode.type === "value-string" && iNode.value.startsWith("#{"); - const isEndingSCSSInterpolationInString = - insideSCSSInterpolationInString && - iNextNode.type === "value-string" && - iNextNode.value.endsWith("}"); - - if ( - isStartSCSSInterpolationInString || - isEndingSCSSInterpolationInString - ) { - insideSCSSInterpolationInString = !insideSCSSInterpolationInString; - - continue; + if (iNode.type === "value-string" && iNode.quoted) { + const positionOfOpeningInterpolation = iNode.value.lastIndexOf("#{"); + const positionOfClosingInterpolation = iNode.value.lastIndexOf("}"); + if ( + positionOfOpeningInterpolation !== -1 && + positionOfClosingInterpolation !== -1 + ) { + insideSCSSInterpolationInString = + positionOfOpeningInterpolation > positionOfClosingInterpolation; + } else if (positionOfOpeningInterpolation !== -1) { + insideSCSSInterpolationInString = true; + } else if (positionOfClosingInterpolation !== -1) { + insideSCSSInterpolationInString = false; + } } if (insideSCSSInterpolationInString) { diff --git a/tests/format/scss/map/function-argument/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/map/function-argument/__snapshots__/jsfmt.spec.js.snap index 0ea75e6bb2b6..e74fed620aa7 100644 --- a/tests/format/scss/map/function-argument/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/scss/map/function-argument/__snapshots__/jsfmt.spec.js.snap @@ -1,5 +1,56 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`function-argument-2.scss format 1`] = ` +====================================options===================================== +parsers: ["scss"] +printWidth: 80 + | printWidth +=====================================input====================================== +$display-breakpoints: map-deep-merge( + ( + "sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})", + "sm-only": "inside a long long long long long long long long long long long long long long string #{call("")}", + "sm-only": "inside a long long long long long long long long long long long long long long string #{$foo} and #{call("")}", + "sm-only": "inside a long long long long long long long long long long long long long long string #{call($a)}", + ), + $display-breakpoints +); + +@each $name, $hue in $hues { + $map: map.merge( + $map, + ( + '#{$prefix}-#{$name}': blend.set($base, $hue: $hue), + ) + ); +} + +=====================================output===================================== +$display-breakpoints: map-deep-merge( + ( + "sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})", + "sm-only": + "inside a long long long long long long long long long long long long long long string #{call("")}", + "sm-only": + "inside a long long long long long long long long long long long long long long string #{$foo} and #{call("")}", + "sm-only": + "inside a long long long long long long long long long long long long long long string #{call($a)}", + ), + $display-breakpoints +); + +@each $name, $hue in $hues { + $map: map.merge( + $map, + ( + "#{$prefix}-#{$name}": blend.set($base, $hue: $hue), + ) + ); +} + +================================================================================ +`; + exports[`functional-argument.scss format 1`] = ` ====================================options===================================== parsers: ["scss"] diff --git a/tests/format/scss/map/function-argument/function-argument-2.scss b/tests/format/scss/map/function-argument/function-argument-2.scss new file mode 100644 index 000000000000..4af8674e8ca9 --- /dev/null +++ b/tests/format/scss/map/function-argument/function-argument-2.scss @@ -0,0 +1,18 @@ +$display-breakpoints: map-deep-merge( + ( + "sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})", + "sm-only": "inside a long long long long long long long long long long long long long long string #{call("")}", + "sm-only": "inside a long long long long long long long long long long long long long long string #{$foo} and #{call("")}", + "sm-only": "inside a long long long long long long long long long long long long long long string #{call($a)}", + ), + $display-breakpoints +); + +@each $name, $hue in $hues { + $map: map.merge( + $map, + ( + '#{$prefix}-#{$name}': blend.set($base, $hue: $hue), + ) + ); +}