Properly format Sass module configuration values

changelog_unreleased/scss/11516.md

@@ -0,0 +1,22 @@
+#### Properly format Sass module configuration values (#11516 by @niksy)
+
+<!-- prettier-ignore -->
+```scss
+// Input
+@use "library" with ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif", $counters: (1, 2, 3));
+
+// Prettier stable
+@use "library" with ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif", $counters: (1, 2, 3));
+
+// Prettier main
+@use "library" with (
+  $black: #222,
+  $border-radius: 0.1rem,
+  $font-family: "Helvetica, sans-serif",
+  $list: (
+    1,
+    2,
+    3,
+  )
+);
+```

src/language-css/printer-postcss.js

@@ -72,6 +72,7 @@ const {
   isColorAdjusterFuncNode,
   lastLineHasInlineComment,
   isAtWordPlaceholderNode,
+  isSCSSModuleConfigurationProvided,
   isConfigurationNode,
   isParenGroupNode,
 } = require("./utils/index.js");
@@ -849,6 +850,10 @@ function genericPrint(path, options, print) {
         return group(fill(parts));
       }
 
+      if (isSCSSModuleConfigurationProvided(path)) {
+        return group(indent(fill(parts)));
+      }
+
       return group(indent(fill(parts)));
     }
     case "value-paren_group": {

src/language-css/utils/index.js

@@ -118,6 +118,21 @@ function insideURLFunctionInImportAtRuleNode(path) {
   );
 }
 
+function isSCSSModuleConfigurationProvided(path) {
+  const node = path.getValue();
+  const atRuleAncestorNode = getAncestorNode(path, "css-atrule");
+  const { length } = node.groups;
+
+  return (
+    atRuleAncestorNode &&
+    (atRuleAncestorNode.name === "use" ||
+      atRuleAncestorNode.name === "forward") &&
+    node.groups[length - 1].type === "value-paren_group" &&
+    node.groups[length - 2].type === "value-word" &&
+    node.groups[length - 2].value === "with"
+  );
+}
+
 function isURLFunctionNode(node) {
   return node.type === "value-func" && node.value.toLowerCase() === "url";
 }
@@ -441,4 +456,5 @@ module.exports = {
   isAtWordPlaceholderNode,
   isConfigurationNode,
   isParenGroupNode,
+  isSCSSModuleConfigurationProvided,
 };

tests/format/scss/print-width/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`print-width.scss - {"printWidth":40} format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 40
+                                        | printWidth
+=====================================input======================================
+@use "library" with ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif", $list: (1, 2, 3));
+
+@forward "library" with ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif", $list: (1, 2, 3));
+
+=====================================output=====================================
+@use "library" with (
+  $black: #222,
+  $border-radius: 0.1rem,
+  $font-family: "Helvetica, sans-serif",
+  $list: (
+    1,
+    2,
+    3,
+  )
+);
+
+@forward "library" with (
+  $black: #222,
+  $border-radius: 0.1rem,
+  $font-family: "Helvetica, sans-serif",
+  $list: (
+    1,
+    2,
+    3,
+  )
+);
+
+================================================================================
+`;
+
+exports[`print-width.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@use "library" with ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif", $list: (1, 2, 3));
+
+@forward "library" with ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif", $list: (1, 2, 3));
+
+=====================================output=====================================
+@use "library" with (
+  $black: #222,
+  $border-radius: 0.1rem,
+  $font-family: "Helvetica, sans-serif",
+  $list: (
+    1,
+    2,
+    3,
+  )
+);
+
+@forward "library" with (
+  $black: #222,
+  $border-radius: 0.1rem,
+  $font-family: "Helvetica, sans-serif",
+  $list: (
+    1,
+    2,
+    3,
+  )
+);
+
+================================================================================
+`;

tests/format/scss/print-width/jsfmt.spec.js

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

tests/format/scss/print-width/print-width.scss

@@ -0,0 +1,3 @@
+@use "library" with ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif", $list: (1, 2, 3));
+
+@forward "library" with ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif", $list: (1, 2, 3));