Consistently quote Sass modules strings (#11461)

* Consistently quote Sass modules strings

Fixes #11053.

* Add module rule name check function

* Add more tests for `@use` and `@forward`

* Lint changelog

* Lint files

Co-authored-by: sosukesuzuki <[email protected]>

Author: niksy

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';
+```

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);

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,
 };

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- *;
+
+================================================================================
+`;

tests/format/scss/quotes/jsfmt.spec.js

@@ -0,0 +1,2 @@
+run_spec(__dirname, ["scss"]);
+run_spec(__dirname, ["scss"], { singleQuote: true });

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-*;