diff --git a/changelog_unreleased/scss/12213.md b/changelog_unreleased/scss/12213.md new file mode 100644 index 000000000..01f7c29c2 --- /dev/null +++ b/changelog_unreleased/scss/12213.md @@ -0,0 +1,16 @@ +#### Fixes printing parameters of a mixin named `selector()` (#12213 by @duailibe) + + +```css +/* Input */ +@mixin selector($param: 'value') { +} + +/* Prettier stable */ +@mixin selector($param: 'value) { +} + +/* Prettier main */ +@mixin selector($param: 'value') { +} +``` diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 3db35ab3f..1ede6c67a 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -493,8 +493,8 @@ function genericPrint(path, options, print) { grandParent.type === "value-func" && grandParent.value === "selector" ) { - const start = locStart(parentNode.open) + 1; - const end = locEnd(parentNode.close) - 1; + const start = locEnd(parentNode.open) + 1; + const end = locStart(parentNode.close); const selector = options.originalText.slice(start, end).trim(); return lastLineHasInlineComment(selector) diff --git a/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap index 6ea8d15ea..5c6657479 100644 --- a/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap @@ -3482,6 +3482,8 @@ $background @mixin button-variant($foo: " ... ") {} @mixin sexy-border($color, $width, $foo: (color: red)) {} +@mixin selector($param: "value") {} + =====================================output===================================== @mixin clearfix { } @@ -3551,6 +3553,9 @@ $background @mixin sexy-border($color, $width, $foo: (color: red)) { } +@mixin selector($param: "value") { +} + ================================================================================ `; diff --git a/tests/format/css/atrule/mixin.css b/tests/format/css/atrule/mixin.css index 24c175e0b..0e7c610ea 100644 --- a/tests/format/css/atrule/mixin.css +++ b/tests/format/css/atrule/mixin.css @@ -105,3 +105,5 @@ $background @mixin button-variant($foo: " ... ") {} @mixin button-variant($foo: " ... ") {} @mixin sexy-border($color, $width, $foo: (color: red)) {} + +@mixin selector($param: "value") {}