From 6e7530cd6bf97cfbad802073b677a808e0e6d7a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= <niksy5@gmail.com>
Date: Mon, 13 Sep 2021 09:47:23 +0200
Subject: [PATCH] Properly format Sass module configuration values

---
 changelog_unreleased/scss/11516.md            | 22 ++++++
 src/language-css/printer-postcss.js           |  5 ++
 src/language-css/utils/index.js               | 16 ++++
 .../__snapshots__/jsfmt.spec.js.snap          | 73 +++++++++++++++++++
 tests/format/scss/print-width/jsfmt.spec.js   |  2 +
 .../format/scss/print-width/print-width.scss  |  3 +
 6 files changed, 121 insertions(+)
 create mode 100644 changelog_unreleased/scss/11516.md
 create mode 100644 tests/format/scss/print-width/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/format/scss/print-width/jsfmt.spec.js
 create mode 100644 tests/format/scss/print-width/print-width.scss

diff --git a/changelog_unreleased/scss/11516.md b/changelog_unreleased/scss/11516.md
new file mode 100644
index 000000000000..998673ef4e20
--- /dev/null
+++ b/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,
+  )
+);
+```
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index 825961ff2a23..e99dbb035cf7 100644
--- a/src/language-css/printer-postcss.js
+++ b/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": {
diff --git a/src/language-css/utils/index.js b/src/language-css/utils/index.js
index 0c7fa99b7892..8b5bfc83bdc2 100644
--- a/src/language-css/utils/index.js
+++ b/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,
 };
diff --git a/tests/format/scss/print-width/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/print-width/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..7b80f804148a
--- /dev/null
+++ b/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,
+  )
+);
+
+================================================================================
+`;
diff --git a/tests/format/scss/print-width/jsfmt.spec.js b/tests/format/scss/print-width/jsfmt.spec.js
new file mode 100644
index 000000000000..e963431368b5
--- /dev/null
+++ b/tests/format/scss/print-width/jsfmt.spec.js
@@ -0,0 +1,2 @@
+run_spec(__dirname, ["scss"]);
+run_spec(__dirname, ["scss"], { printWidth: 40 });
diff --git a/tests/format/scss/print-width/print-width.scss b/tests/format/scss/print-width/print-width.scss
new file mode 100644
index 000000000000..ea837894fd29
--- /dev/null
+++ b/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));