From 543aa9abf194b73f95a7d90117ed1ce5dfefe874 Mon Sep 17 00:00:00 2001
From: Lucas Duailibe <lucasds@gmail.com>
Date: Thu, 3 Feb 2022 12:54:10 -0300
Subject: [PATCH] Fix printing of SCSS selector() function (#12213)

---
 changelog_unreleased/scss/12213.md               | 16 ++++++++++++++++
 src/language-css/printer-postcss.js              |  4 ++--
 .../css/atrule/__snapshots__/jsfmt.spec.js.snap  |  5 +++++
 tests/format/css/atrule/mixin.css                |  2 ++
 4 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 changelog_unreleased/scss/12213.md

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)
+
+<!-- prettier-ignore -->
+```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") {}