Repository: prettier/prettier (JavaScript)

Issue:
scss mixin breaks on format if name is "selector"
<!--

BEFORE SUBMITTING AN ISSUE:

1.  Search for your issue on GitHub: https://github.com/prettier/prettier/issues
    A large number of opened issues are duplicates of existing issues.
    If someone has already opened an issue for what you are experiencing,
    you do not need to open a new issue — please add a 👍 reaction to the
    existing issue instead.

2.  We get a lot of requests for adding options, but Prettier is
    built on the principle of being opinionated about code formatting.
    This means we have a very high bar for adding new options.
    Find out more: https://prettier.io/docs/en/option-philosophy.html

Tip! Don't write this stuff manually.

1. Go to https://prettier.io/playground
2. Paste your code and set options
3. Press the "Report issue" button in the lower right

-->

If a SCSS mixin is named "selector" (maybe other keywords also) and has a default value for a parameter, each format removes the last character of the default value.

**Prettier 2.2.1**

```sh
# Options:
--single-quote
--trailing-comma all
--no-semi
--print-width 120
```

**Input:**

```scss
@mixin selector($param: 'value') {
}
```

**Output:**

```scss
@mixin selector($param: 'value) {
}
```

**Expected behavior:**
Don't remove the last character of the default value...



Hints:
Just FYI: There seems to be a workaround: Add a space between closing quote and closing parenthesis.

I started analyzing the bug with the following test:

```scss
@mixin selector($param: 'value') {
}
@mixin selector($param: 'value' ) {
}
@mixin selector($param: "value") {
}
@mixin selector( $param: "value" ) {
}
@mixin selector2($param: 'value') {
}
@mixin elector($param: 'value') {
}
```

Which resulted in the following transformations:

```scss
@mixin selector($param: 'value) {
}
@mixin selector($param: 'value') {
}
@mixin selector($param: "value) {
}
@mixin selector($param: "value") {
}
@mixin selector2($param: "value") {
}
@mixin elector($param: "value") {
}
```

Since I'm not used to this project, I couldn't find the proper location to fix the issue within reasonable time. So someone else has to fix this (or point me to the right direction).
Maybe here https://github.com/prettier/prettier/blob/7d84c0a5a419d7fa3e65407b03e0ea55f45c1182/src/language-css/printer-postcss.js#L491

Patch:
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
--- 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)


Test patch:
diff --git a/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap
--- 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
--- 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") {}