Repository: prettier/prettier (JavaScript)
Date: 2021-09-07 10:02:30+00:00
Task type: Bug Fix

Issue:
SCSS @use strings not quoted consistently
**Prettier 2.3.1**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEABArgZzgAgOTyYx4DcAOlBtjmSITLeVBagJYC2ADhAE4z4A6APT1SLDtz40Qw+owoUB9HMAo4ckWAhhJ89VlADmYqOs3xYu2vqPyoAXxAAaEBE4xW0TMlABDHjwQAO4ACv4I3ii+ADZBvgCe3i4ARjy+YADWcDAAypzpBobIMDzocC5w7MlwACY1tQAyvkbovoZwAGK87L4wHkbIIL7oMBDOIAAWMOzRAOoTrIT5YHA5EYusAG6L8YNgmEkgBth8IWmGPcgAZjHYLgBWmAAeAEJpmdk5vuxwDQZw11u5RAjyeOUK0TgAEV0BB4IDoncQPkeCdBph9odODwDDBZqwajAJsgABwABhc2Ig2FmaU4g2xcBOmwBLgAjrD4Gc3JEhpgALRQOC1WrjHhwDmscVnNqXJA3RHA7DsVjFUpKiHQzkA+VAlwwXzJfGE4lIABM+rSrGihQAwhB2HKQEyAKzjLBwAAqhsiCqRmzKAEkoPVYDkwDj3ABBEM5GDxSEI7D2exAA)
<!-- prettier-ignore -->
```sh
--parser scss
```

**Input:**
<!-- prettier-ignore -->
```scss
@use 'test';
@use "test";

@import './test';
@import "./test";

.test {
  content: 'testing';
  content: "testing";
}
```

**Output:**
<!-- prettier-ignore -->
```scss
@use 'test';
@use "test";

@import "./test";
@import "./test";

.test {
  content: "testing";
  content: "testing";
}

```

**Expected behavior:**

The `@use` strings should have consistent quote styling (both should be converted to `"test"`), like `@import` and other string literals.

keywords: sass, scss, quotes


Issue discussion:
It looks like `@import` has some special handling that might also be needed for `@use`?

https://github.com/prettier/prettier/blob/1aa188ecd1adc9ebd18cd8766172206cb916486f/src/language-css/parser-postcss.js#L528-L533
@apexskier Maybe yes! If you want to contribute to Prettier, you can create the PR to fix it. If not, of course I'll fix it.
@sosukesuzuki I don't have explicit plans to work on this at the moment, so don't wait around for me, but if I find some time I'll try to look into it.
> @apexskier Maybe yes! If you want to contribute to Prettier, you can create the PR to fix it. If not, of course I'll fix it.

I want to contribute in this, but I am a beginner. Can you guide me how to fix this issue?
I mean where can I find the code for the fixing of this bug.

Solution patch:
diff --git a/changelog_unreleased/scss/11461.md b/changelog_unreleased/scss/11461.md
new file mode 100644
index 000000000000..720248387efb
--- /dev/null
+++ b/changelog_unreleased/scss/11461.md
@@ -0,0 +1,16 @@
+#### Consistently quote Sass modules strings (#11461 by @niksy)
+
+<!-- prettier-ignore -->
+```scss
+// Input
+@use "sass:math";
+@forward "list";
+
+// Prettier stable
+@use "sass:math";
+@forward "list";
+
+// Prettier main
+@use 'sass:math';
+@forward 'list';
+```
diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js
index 401f5320f7da..38e96a495df6 100644
--- a/src/language-css/parser-postcss.js
+++ b/src/language-css/parser-postcss.js
@@ -12,6 +12,7 @@ const {
   isSCSSNestedPropertyNode,
   isSCSSVariable,
   stringifyNode,
+  isModuleRuleName,
 } = require("./utils.js");
 const { locStart, locEnd } = require("./loc.js");
 const { calculateLoc, replaceQuotesInInlineComments } = require("./loc.js");
@@ -525,7 +526,7 @@ function parseNestedCSS(node, options) {
         return node;
       }
 
-      if (lowercasedName === "import") {
+      if (isModuleRuleName(lowercasedName)) {
         node.import = true;
         delete node.filename;
         node.params = parseValue(params, options);
diff --git a/src/language-css/utils.js b/src/language-css/utils.js
index 50977fa4ad76..63e24da2560f 100644
--- a/src/language-css/utils.js
+++ b/src/language-css/utils.js
@@ -28,6 +28,7 @@ const colorAdjusterFunctions = new Set([
   "hwb",
   "hwba",
 ]);
+const moduleRuleNames = new Set(["import", "use", "forward"]);
 
 function getAncestorCounter(path, typeOrTypes) {
   const types = Array.isArray(typeOrTypes) ? typeOrTypes : [typeOrTypes];
@@ -479,6 +480,10 @@ function isAtWordPlaceholderNode(node) {
   );
 }
 
+function isModuleRuleName(name) {
+  return moduleRuleNames.has(name);
+}
+
 module.exports = {
   getAncestorCounter,
   getAncestorNode,
@@ -533,4 +538,5 @@ module.exports = {
   lastLineHasInlineComment,
   stringifyNode,
   isAtWordPlaceholderNode,
+  isModuleRuleName,
 };


Test patch:
diff --git a/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..042fdbb3bf79
--- /dev/null
+++ b/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`quotes.scss - {"singleQuote":true} format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+@use "library";
+
+@use "library" with (
+  $black: #222,
+  $border-radius: 0.1rem
+  $font-family: "Helvetica, sans-serif"
+);
+
+@use "library" as *;
+
+@use "library" as f;
+
+@use "sass:map";
+
+@forward "library";
+
+@forward "library" show border, $border-color;
+
+@forward "library" hide gradient;
+
+@forward "library" as btn-*;
+
+=====================================output=====================================
+@use 'library';
+
+@use 'library' with
+  ($black: #222, $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif');
+
+@use 'library' as *;
+
+@use 'library' as f;
+
+@use 'sass:map';
+
+@forward 'library';
+
+@forward 'library' show border, $border-color;
+
+@forward 'library' hide gradient;
+
+@forward 'library' as btn- *;
+
+================================================================================
+`;
+
+exports[`quotes.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@use "library";
+
+@use "library" with (
+  $black: #222,
+  $border-radius: 0.1rem
+  $font-family: "Helvetica, sans-serif"
+);
+
+@use "library" as *;
+
+@use "library" as f;
+
+@use "sass:map";
+
+@forward "library";
+
+@forward "library" show border, $border-color;
+
+@forward "library" hide gradient;
+
+@forward "library" as btn-*;
+
+=====================================output=====================================
+@use "library";
+
+@use "library" with
+  ($black: #222, $border-radius: 0.1rem $font-family: "Helvetica, sans-serif");
+
+@use "library" as *;
+
+@use "library" as f;
+
+@use "sass:map";
+
+@forward "library";
+
+@forward "library" show border, $border-color;
+
+@forward "library" hide gradient;
+
+@forward "library" as btn- *;
+
+================================================================================
+`;
diff --git a/tests/format/scss/quotes/jsfmt.spec.js b/tests/format/scss/quotes/jsfmt.spec.js
new file mode 100644
index 000000000000..0c94ceec9417
--- /dev/null
+++ b/tests/format/scss/quotes/jsfmt.spec.js
@@ -0,0 +1,2 @@
+run_spec(__dirname, ["scss"]);
+run_spec(__dirname, ["scss"], { singleQuote: true });
diff --git a/tests/format/scss/quotes/quotes.scss b/tests/format/scss/quotes/quotes.scss
new file mode 100644
index 000000000000..332074a453a5
--- /dev/null
+++ b/tests/format/scss/quotes/quotes.scss
@@ -0,0 +1,21 @@
+@use "library";
+
+@use "library" with (
+  $black: #222,
+  $border-radius: 0.1rem
+  $font-family: "Helvetica, sans-serif"
+);
+
+@use "library" as *;
+
+@use "library" as f;
+
+@use "sass:map";
+
+@forward "library";
+
+@forward "library" show border, $border-color;
+
+@forward "library" hide gradient;
+
+@forward "library" as btn-*;