Improve with (...) formatting (#11637)

* Null checking

* Improve configuration formatting

* Add tests

* Add changelog

* Format

changelog_unreleased/scss/11637.md

@@ -0,0 +1,21 @@
+#### Improve `with (...)` formatting (#11637 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```scss
+// Input
+@use 'library' with (
+  $black: #222,
+  $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif'
+);
+
+// Prettier stable
+@use 'library' with
+  ($black: #222, $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif');
+
+// Prettier main
+@use 'library' with (
+  $black: #222,
+  $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif'
+);
+
+```

src/language-css/printer-postcss.js

@@ -74,6 +74,7 @@ const {
   isColorAdjusterFuncNode,
   lastLineHasInlineComment,
   isAtWordPlaceholderNode,
+  isConfigurationNode,
 } = require("./utils.js");
 const { locStart, locEnd } = require("./loc.js");
 
@@ -807,6 +808,19 @@ function genericPrint(path, options, print) {
           continue;
         }
 
+        if (
+          iNode.value === "with" &&
+          iNextNode &&
+          iNextNode.type === "value-paren_group" &&
+          iNextNode.open &&
+          iNextNode.open.value === "(" &&
+          iNextNode.close &&
+          iNextNode.close.value === ")"
+        ) {
+          parts.push(" ");
+          continue;
+        }
+
         // Be default all values go through `line`
         parts.push(line);
       }
@@ -872,6 +886,10 @@ function genericPrint(path, options, print) {
       const lastItem = getLast(node.groups);
       const isLastItemComment = lastItem && lastItem.type === "value-comment";
       const isKey = isKeyInValuePairNode(node, parentNode);
+      const isConfiguration = isConfigurationNode(node, parentNode);
+
+      const shouldBreak = isConfiguration || (isSCSSMapItem && !isKey);
+      const shouldDedent = isConfiguration || isKey;
 
       const printed = group(
         [
@@ -915,11 +933,11 @@ function genericPrint(path, options, print) {
           node.close ? print("close") : "",
         ],
         {
-          shouldBreak: isSCSSMapItem && !isKey,
+          shouldBreak,
         }
       );
 
-      return isKey ? dedent(printed) : printed;
+      return shouldDedent ? dedent(printed) : printed;
     }
     case "value-func": {
       return [

src/language-css/utils.js

@@ -484,6 +484,30 @@ function isModuleRuleName(name) {
   return moduleRuleNames.has(name);
 }
 
+function isConfigurationNode(node, parentNode) {
+  if (
+    !node.open ||
+    node.open.value !== "(" ||
+    !node.close ||
+    node.close.value !== ")" ||
+    node.groups.some((group) => group.type !== "value-comma_group")
+  ) {
+    return false;
+  }
+  if (parentNode.type === "value-comma_group") {
+    const prevIdx = parentNode.groups.indexOf(node) - 1;
+    const maybeWithNode = parentNode.groups[prevIdx];
+    if (
+      maybeWithNode &&
+      maybeWithNode.type === "value-word" &&
+      maybeWithNode.value === "with"
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
 module.exports = {
   getAncestorCounter,
   getAncestorNode,
@@ -539,4 +563,5 @@ module.exports = {
   stringifyNode,
   isAtWordPlaceholderNode,
   isModuleRuleName,
+  isConfigurationNode,
 };

tests/format/scss/configuration/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`use.scss - {"trailingComma":"none"} format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+@use "@fylgja/base" with (
+  $family-main: (
+  Rubik,
+    Roboto,
+    system-ui,
+    sans-serif,
+  ),
+  $font-weight: 350,
+  $h1-font-weight: 500,
+  $h2-font-weight: 500,
+  $h3-font-weight: 500
+);
+
+@use 'library' with (
+  $black: #222,
+  $border-radius: 0.1rem
+);
+
+=====================================output=====================================
+@use "@fylgja/base" with (
+  $family-main: (
+    Rubik,
+    Roboto,
+    system-ui,
+    sans-serif
+  ),
+  $font-weight: 350,
+  $h1-font-weight: 500,
+  $h2-font-weight: 500,
+  $h3-font-weight: 500
+);
+
+@use "library" with (
+  $black: #222,
+  $border-radius: 0.1rem
+);
+
+================================================================================
+`;
+
+exports[`use.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@use "@fylgja/base" with (
+  $family-main: (
+  Rubik,
+    Roboto,
+    system-ui,
+    sans-serif,
+  ),
+  $font-weight: 350,
+  $h1-font-weight: 500,
+  $h2-font-weight: 500,
+  $h3-font-weight: 500
+);
+
+@use 'library' with (
+  $black: #222,
+  $border-radius: 0.1rem
+);
+
+=====================================output=====================================
+@use "@fylgja/base" with (
+  $family-main: (
+    Rubik,
+    Roboto,
+    system-ui,
+    sans-serif,
+  ),
+  $font-weight: 350,
+  $h1-font-weight: 500,
+  $h2-font-weight: 500,
+  $h3-font-weight: 500
+);
+
+@use "library" with (
+  $black: #222,
+  $border-radius: 0.1rem
+);
+
+================================================================================
+`;

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

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

tests/format/scss/configuration/use.scss

@@ -0,0 +1,17 @@
+@use "@fylgja/base" with (
+  $family-main: (
+  Rubik,
+    Roboto,
+    system-ui,
+    sans-serif,
+  ),
+  $font-weight: 350,
+  $h1-font-weight: 500,
+  $h2-font-weight: 500,
+  $h3-font-weight: 500
+);
+
+@use 'library' with (
+  $black: #222,
+  $border-radius: 0.1rem
+);

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

@@ -34,8 +34,10 @@ singleQuote: true
 =====================================output=====================================
 @use 'library';
 
-@use 'library' with
-  ($black: #222, $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif');
+@use 'library' with (
+  $black: #222,
+  $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif'
+);
 
 @use 'library' as *;
 
@@ -89,8 +91,10 @@ printWidth: 80
 =====================================output=====================================
 @use "library";
 
-@use "library" with
-  ($black: #222, $border-radius: 0.1rem $font-family: "Helvetica, sans-serif");
+@use "library" with (
+  $black: #222,
+  $border-radius: 0.1rem $font-family: "Helvetica, sans-serif"
+);
 
 @use "library" as *;