SCSS: Fix maps with keys that are lists or maps (#10005)

src/language-css/printer-postcss.js

@@ -57,6 +57,7 @@ const {
   hasParensAroundNode,
   hasEmptyRawBefore,
   isKeyValuePairNode,
+  isKeyInValuePairNode,
   isDetachedRulesetCallNode,
   isTemplatePlaceholderNode,
   isTemplatePropNode,
@@ -856,8 +857,9 @@ function genericPrint(path, options, print) {
 
       const lastItem = node.groups[node.groups.length - 1];
       const isLastItemComment = lastItem && lastItem.type === "value-comment";
+      const isKey = isKeyInValuePairNode(node, parentNode);
 
-      return group(
+      const printed = group(
         [
           node.open ? path.call(print, "open") : "",
           indent([
@@ -873,6 +875,7 @@ function genericPrint(path, options, print) {
                   isKeyValuePairNode(node) &&
                   node.type === "value-comma_group" &&
                   node.groups &&
+                  node.groups[0].type !== "value-paren_group" &&
                   node.groups[2] &&
                   node.groups[2].type === "value-paren_group"
                 ) {
@@ -898,9 +901,11 @@ function genericPrint(path, options, print) {
           node.close ? path.call(print, "close") : "",
         ],
         {
-          shouldBreak: isSCSSMapItem,
+          shouldBreak: isSCSSMapItem && !isKey,
         }
       );
+
+      return isKey ? dedent(printed) : printed;
     }
     case "value-func": {
       return [
@@ -934,7 +939,9 @@ function genericPrint(path, options, print) {
       return [
         node.value,
         // Don't add spaces on escaped colon `:`, e.g: grid-template-rows: [row-1-00\:00] auto;
-        (prevNode && prevNode.value[prevNode.value.length - 1] === "\\") ||
+        (prevNode &&
+          typeof prevNode.value === "string" &&
+          prevNode.value[prevNode.value.length - 1] === "\\") ||
         // Don't add spaces on `:` in `url` function (i.e. `url(fbglyph: cross-outline, fig-white)`)
         insideValueFunctionNode(path, "url")
           ? ""

src/language-css/utils.js

@@ -401,7 +401,22 @@ function isWordNode(node) {
 }
 
 function isColonNode(node) {
-  return node.type === "value-colon";
+  return node && node.type === "value-colon";
+}
+
+function isKeyInValuePairNode(node, parentNode) {
+  if (!isKeyValuePairNode(parentNode)) {
+    return false;
+  }
+
+  const { groups } = parentNode;
+  const index = groups.indexOf(node);
+
+  if (index === -1) {
+    return false;
+  }
+
+  return isColonNode(groups[index + 1]);
 }
 
 function isMediaAndSupportsKeywords(node) {
@@ -503,6 +518,7 @@ module.exports = {
   isPostcssSimpleVarNode,
   isKeyValuePairNode,
   isKeyValuePairInParenGroupNode,
+  isKeyInValuePairNode,
   isSCSSMapItemNode,
   isInlineValueCommentNode,
   isHashNode,