From 5b41166f7590fc800ccad6b853f6414795919146 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

---
 src/language-css/printer-postcss.js           |  5 ++
 src/language-css/utils.js                     | 16 ++++
 .../__snapshots__/jsfmt.spec.js.snap          | 79 +++++++++++++++++++
 tests/format/scss/print-width/jsfmt.spec.js   |  2 +
 .../format/scss/print-width/print-width.scss  |  3 +
 5 files changed, 105 insertions(+)
 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/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index c7ebe7e561f4..25bc8475738f 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -74,6 +74,7 @@ const {
   isColorAdjusterFuncNode,
   lastLineHasInlineComment,
   isAtWordPlaceholderNode,
+  isSCSSModuleConfigurationProvided,
 } = require("./utils.js");
 const { locStart, locEnd } = require("./loc.js");
 
@@ -818,6 +819,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.js b/src/language-css/utils.js
index 63e24da2560f..7b9fc3f764fd 100644
--- a/src/language-css/utils.js
+++ b/src/language-css/utils.js
@@ -173,6 +173,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";
 }
@@ -539,4 +554,5 @@ module.exports = {
   stringifyNode,
   isAtWordPlaceholderNode,
   isModuleRuleName,
+  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..e252af6d2685
--- /dev/null
+++ b/tests/format/scss/print-width/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,79 @@
+// 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));