fix: better output scss maps (#4487)

src/language-css/clean.js

@@ -68,10 +68,6 @@ function clean(ast, newObj) {
     newObj.value = cleanCSSStrings(newObj.value);
   }
 
-  if (ast.type === "css-import" && newObj.importPath) {
-    newObj.importPath = cleanCSSStrings(newObj.importPath);
-  }
-
   if (ast.type === "selector-attribute") {
     newObj.attribute = newObj.attribute.trim();
 
@@ -110,12 +106,6 @@ function clean(ast, newObj) {
     );
   }
 
-  if (ast.type === "media-url") {
-    newObj.value = newObj.value
-      .replace(/^url\(\s+/gi, "url(")
-      .replace(/\s+\)$/gi, ")");
-  }
-
   if (ast.type === "selector-tag") {
     const lowercasedValue = ast.value.toLowerCase();
 

src/language-css/printer-postcss.js

@@ -14,6 +14,8 @@ const softline = docBuilders.softline;
 const group = docBuilders.group;
 const fill = docBuilders.fill;
 const indent = docBuilders.indent;
+const dedent = docBuilders.dedent;
+const ifBreak = docBuilders.ifBreak;
 
 const docUtils = doc.utils;
 const removeLines = docUtils.removeLines;
@@ -26,6 +28,8 @@ const maybeToLowerCase = utils.maybeToLowerCase;
 const insideValueFunctionNode = utils.insideValueFunctionNode;
 const insideICSSRuleNode = utils.insideICSSRuleNode;
 const insideAtRuleNode = utils.insideAtRuleNode;
+const insideURLFunctionInImportAtRuleNode =
+  utils.insideURLFunctionInImportAtRuleNode;
 const isKeyframeAtRuleKeywords = utils.isKeyframeAtRuleKeywords;
 const isHTMLTag = utils.isHTMLTag;
 const isWideKeywords = utils.isWideKeywords;
@@ -44,9 +48,21 @@ const isIfElseKeywordNode = utils.isIfElseKeywordNode;
 const hasLessExtendValueNode = utils.hasLessExtendValueNode;
 const hasComposesValueNode = utils.hasComposesValueNode;
 const hasParensAroundValueNode = utils.hasParensAroundValueNode;
-const isSCSSMapNode = utils.isSCSSMapNode;
+const isKeyValuePairNode = utils.isKeyValuePairNode;
 const isDetachedRulesetCallNode = utils.isDetachedRulesetCallNode;
 const isPostcssSimpleVarNode = utils.isPostcssSimpleVarNode;
+const isSCSSMapItemNode = utils.isSCSSMapItemNode;
+
+function shouldPrintComma(options) {
+  switch (options.trailingComma) {
+    case "all":
+    case "es5":
+      return true;
+    case "none":
+    default:
+      return false;
+  }
+}
 
 function genericPrint(path, options, print) {
   const node = path.getValue();
@@ -619,15 +635,10 @@ function genericPrint(path, options, print) {
       // and node has two groups
       // when type is value-comma_group
       // example @import url("verylongurl") projection,tv
-
-      if (
-        atRuleAncestorNode &&
-        atRuleAncestorNode.name === "import" &&
-        node.groups[0].value === "url" &&
-        node.groups.length === 2
-      ) {
+      if (insideURLFunctionInImportAtRuleNode(path)) {
         return group(fill(parts));
       }
+
       return group(indent(fill(parts)));
     }
     case "value-paren_group": {
@@ -663,7 +674,7 @@ function genericPrint(path, options, print) {
         return group(indent(fill(res)));
       }
 
-      const declNode = path.getParentNode(2);
+      const isSCSSMapItem = isSCSSMapItemNode(path);
 
       return group(
         concat([
@@ -672,22 +683,44 @@ function genericPrint(path, options, print) {
             concat([
               softline,
               join(
-                concat([
-                  ",",
-                  declNode && isSCSSMapNode(declNode) ? hardline : line
-                ]),
-                path.map(print, "groups")
+                concat([",", line]),
+                path.map(childPath => {
+                  const node = childPath.getValue();
+                  const printed = print(childPath);
+
+                  // Key/Value pair in open paren already indented
+                  if (
+                    isKeyValuePairNode(node) &&
+                    node.type === "value-comma_group" &&
+                    node.groups &&
+                    node.groups[2] &&
+                    node.groups[2].type === "value-paren_group"
+                  ) {
+                    printed.contents.contents.parts[1] = group(
+                      printed.contents.contents.parts[1]
+                    );
+
+                    return group(dedent(printed));
+                  }
+
+                  return printed;
+                }, "groups")
               )
             ])
           ),
-          isSCSS(options.parser, options.originalText) &&
-          node.groups.length > 1 &&
-          options.trailingComma !== "none"
-            ? ","
-            : "",
+          ifBreak(
+            isSCSS(options.parser, options.originalText) &&
+            isSCSSMapItem &&
+            shouldPrintComma(options)
+              ? ","
+              : ""
+          ),
           softline,
           node.close ? path.call(print, "close") : ""
-        ])
+        ]),
+        {
+          shouldBreak: isSCSSMapItem
+        }
       );
     }
     case "value-value": {

src/language-css/utils.js

@@ -98,6 +98,18 @@ function insideAtRuleNode(path, atRuleName) {
   );
 }
 
+function insideURLFunctionInImportAtRuleNode(path) {
+  const node = path.getValue();
+  const atRuleAncestorNode = getAncestorNode(path, "css-atrule");
+
+  return (
+    atRuleAncestorNode &&
+    atRuleAncestorNode.name === "import" &&
+    node.groups[0].value === "url" &&
+    node.groups.length === 2
+  );
+}
+
 function isURLFunctionNode(node) {
   return node.type === "value-func" && node.value.toLowerCase() === "url";
 }
@@ -176,10 +188,6 @@ function isSCSSControlDirectiveNode(node) {
   );
 }
 
-function isSCSSMapNode(node) {
-  return node.type === "css-decl" && node.prop && node.prop.startsWith("$");
-}
-
 function isSCSSNestedPropertyNode(node) {
   if (!node.selector) {
     return false;
@@ -196,6 +204,16 @@ function isDetachedRulesetCallNode(node) {
   return node.raws && node.raws.params && /^\(\s*\)$/.test(node.raws.params);
 }
 
+function isPostcssSimpleVarNode(currentNode, nextNode) {
+  return (
+    currentNode.value === "$$" &&
+    currentNode.type === "value-func" &&
+    nextNode &&
+    nextNode.type === "value-word" &&
+    !nextNode.raws.before
+  );
+}
+
 function hasLessExtendValueNode(node) {
   return (
     node.value &&
@@ -229,15 +247,62 @@ function hasParensAroundValueNode(node) {
   );
 }
 
-function isPostcssSimpleVarNode(currentNode, nextNode) {
+function isKeyValuePairNode(node) {
   return (
-    currentNode.value === "$$" &&
-    currentNode.type === "value-func" &&
-    nextNode &&
-    nextNode.type === "value-word" &&
-    !nextNode.raws.before
+    node.type === "value-comma_group" &&
+    node.groups &&
+    node.groups[1] &&
+    node.groups[1].type === "value-colon"
   );
 }
+
+function isKeyValuePairInParenGroupNode(node) {
+  return (
+    node.type === "value-paren_group" &&
+    node.groups &&
+    node.groups[0] &&
+    isKeyValuePairNode(node.groups[0])
+  );
+}
+
+function isSCSSMapItemNode(path) {
+  const node = path.getValue();
+
+  // Ignore empty item (i.e. `$key: ()`)
+  if (node.groups.length === 0) {
+    return false;
+  }
+
+  const parentParentNode = path.getParentNode(1);
+
+  // Check open parens contain key/value pair (i.e. `(key: value)` and `(key: (value, other-value)`)
+  if (
+    !isKeyValuePairInParenGroupNode(node) &&
+    !(parentParentNode && isKeyValuePairInParenGroupNode(parentParentNode))
+  ) {
+    return false;
+  }
+
+  const declNode = getAncestorNode(path, "css-decl");
+
+  // SCSS map declaration (i.e. `$map: (key: value, other-key: other-value)`)
+  if (declNode && declNode.prop && declNode.prop.startsWith("$")) {
+    return true;
+  }
+
+  // List as value of key inside SCSS map (i.e. `$map: (key: (value other-value other-other-value))`)
+  if (isKeyValuePairInParenGroupNode(parentParentNode)) {
+    return true;
+  }
+
+  // SCSS Map is argument of function (i.e. `func((key: value, other-key: other-value))`)
+  if (parentParentNode.type === "value-func") {
+    return true;
+  }
+
+  return false;
+}
+
 module.exports = {
   getAncestorCounter,
   getAncestorNode,
@@ -246,6 +311,7 @@ module.exports = {
   insideValueFunctionNode,
   insideICSSRuleNode,
   insideAtRuleNode,
+  insideURLFunctionInImportAtRuleNode,
   isKeyframeAtRuleKeywords,
   isHTMLTag,
   isWideKeywords,
@@ -264,8 +330,10 @@ module.exports = {
   hasLessExtendValueNode,
   hasComposesValueNode,
   hasParensAroundValueNode,
-  isSCSSMapNode,
   isSCSSNestedPropertyNode,
   isDetachedRulesetCallNode,
-  isPostcssSimpleVarNode
+  isPostcssSimpleVarNode,
+  isKeyValuePairNode,
+  isKeyValuePairInParenGroupNode,
+  isSCSSMapItemNode
 };

tests/css_atrule/__snapshots__/jsfmt.spec.js.snap

@@ -2400,6 +2400,41 @@ a {
 
         }
 }
+
+a {
+@include section-type-1(
+$header: (margin: 0 0 $margin-base, text-align: left),
+$decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
+$title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15))
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $brand-primary
+)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+)
+);
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
 @include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
@@ -2441,6 +2476,58 @@ a {
   }
 }
 
+a {
+  @include section-type-1(
+    $header: (
+      margin: 0 0 $margin-base,
+      text-align: left
+    ),
+    $decoration: (
+      type: base,
+      margin: 0 auto -1px 0,
+      primary-color: $brand-primary,
+      secondary-color: $gray-light
+    ),
+    $title: (
+      margin: 0 0 $margin-small,
+      color: false,
+      font-size: $font-size-h3,
+      font-weight: false,
+      line-height: $line-height-h3
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15)
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+      border-color: $brand-primary
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+      border-color:
+        $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+    )
+  );
+}
+
 `;
 
 exports[`keyframes.css 1`] = `

tests/css_atrule/include.css

@@ -82,3 +82,38 @@ a {
 
         }
 }
+
+a {
+@include section-type-1(
+$header: (margin: 0 0 $margin-base, text-align: left),
+$decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
+$title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15))
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $brand-primary
+)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+)
+);
+}

tests/css_scss/__snapshots__/jsfmt.spec.js.snap

@@ -885,12 +885,73 @@ light: #eaf0c6
 @return map-get(map-get($colors, $color), $tone);
 }
 
-
 @media only screen and (max-width: 767px) {
   @include widths(2 3 4, \\@small);
 }
 
 $widths-breakpoint-separator: \\@small;
+
+a {
+  transition-timing-function: func1(
+      func2(
+          func3(
+              "veryVeryVeryVeryVeryLongValue",
+              "veryVeryVeryVeryVeryLongValue",
+              "veryVeryVeryVeryVeryLongValue",
+              "veryVeryVeryVeryVeryLongValue",
+          ),
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue",
+      ),
+      "veryVeryVeryVeryVeryLongValue",
+      "veryVeryVeryVeryVeryLongValue",
+      func3(
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue"
+      )
+  );
+}
+
+$empty-map: ();
+$empty-nested-map: (
+nested-key: (empty-key: (color: red)),
+empty-key: (),
+empty-key: (),
+empty-key: ()
+);
+
+$o-grid-default-config: (
+columns: 12,
+gutter: 10px,
+min-width: 240px,
+max-width: 1330px,
+layouts: (
+S:  370px,
+M:  610px,
+L:  850px,
+XL: 1090px
+),
+fluid: true,
+debug: false,
+fixed-layout: M,
+enhanced-experience: true
+);
+
+$a: ();
+$b: unquote('');
+$c: null;
+$d: (null);
+
+$threads-properties: map-merge($threads-properties,  ($border-label: ()));
+$o-grid-default-config: (layouts: (S:  370px));
+
+$map: (
+key: (value),
+other-key: (key: other-other-value)
+);
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @media #{$g-breakpoint-tiny} {
 }
@@ -1007,36 +1068,111 @@ $map: (
     very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-verylong-other-value
 );
 $map: (
-  key: (#d82d2d, #666),
-  other-key: (#52bf4a, #fff),
-  other-other-key: (#c23435, #fff)
+  key: (
+    #d82d2d,
+    #666
+  ),
+  other-key: (
+    #52bf4a,
+    #fff
+  ),
+  other-other-key: (
+    #c23435,
+    #fff
+  )
 );
 $map: (
-  key: (#d82d2d, #666),
-  other-key: (#52bf4a, #fff),
-  other-other-key: (#c23435, #fff)
+  key: (
+    #d82d2d,
+    #666
+  ),
+  other-key: (
+    #52bf4a,
+    #fff
+  ),
+  other-other-key: (
+    #c23435,
+    #fff
+  )
 );
 $map: (
-  key: (#d82d2d, #666),
-  other-key: (#52bf4a, #fff),
-  other-other-key: (#c23435, #fff)
+  key: (
+    #d82d2d,
+    #666
+  ),
+  other-key: (
+    #52bf4a,
+    #fff
+  ),
+  other-other-key: (
+    #c23435,
+    #fff
+  )
 );
 $map: (
-  key: (#d82d2d, #666),
-  other-key: (#52bf4a, #fff),
-  other-other-key: (#c23435, #fff)
+  key: (
+    #d82d2d,
+    #666
+  ),
+  other-key: (
+    #52bf4a,
+    #fff
+  ),
+  other-other-key: (
+    #c23435,
+    #fff
+  )
 );
 $map: (
-  key: (#d82d2d, #666),
-  other-key: (#52bf4a, #fff),
-  other-other-key: (#c23435, #fff)
+  key: (
+    #d82d2d,
+    #666
+  ),
+  other-key: (
+    #52bf4a,
+    #fff
+  ),
+  other-other-key: (
+    #c23435,
+    #fff
+  )
+);
+$map: map-merge(
+  $map,
+  (
+    $key: $value
+  )
+);
+$map: map-merge(
+  $map,
+  (
+    $key: $value
+  )
+);
+$map: map-merge(
+  $map,
+  (
+    $key: $value
+  )
+);
+$map: map-merge(
+  $map,
+  (
+    $key: $value
+  )
+);
+$map: map-merge(
+  $map,
+  (
+    $key: $value
+  )
+);
+$map: map-merge(
+  $map,
+  (
+    $key: $value
+  )
 );
-$map: map-merge($map, ($key: $value));
-$map: map-merge($map, ($key: $value));
-$map: map-merge($map, ($key: $value));
-$map: map-merge($map, ($key: $value));
-$map: map-merge($map, ($key: $value));
-$map: map-merge($map, ($key: $value));
 
 $longVariable: (
   (mobile $mobile) (tablet $tablet) (desktop $desktop) (wide $wide)
@@ -1566,9 +1702,21 @@ $extmods: (
 }
 
 $colors: (
-  primary: (base: #00abc9, light: #daf1f6, dark: #12799a),
-  secondary: (base: #424d55, light: #ccc, lightest: #efefef, dark: #404247),
-  success: (base: #bbd33e, light: #eaf0c6)
+  primary: (
+    base: #00abc9,
+    light: #daf1f6,
+    dark: #12799a
+  ),
+  secondary: (
+    base: #424d55,
+    light: #ccc,
+    lightest: #efefef,
+    dark: #404247
+  ),
+  success: (
+    base: #bbd33e,
+    light: #eaf0c6
+  )
 );
 
 @function color($color, $tone: "base") {
@@ -1581,4 +1729,83 @@ $colors: (
 
 $widths-breakpoint-separator: \\@small;
 
+a {
+  transition-timing-function: func1(
+    func2(
+      func3(
+        "veryVeryVeryVeryVeryLongValue",
+        "veryVeryVeryVeryVeryLongValue",
+        "veryVeryVeryVeryVeryLongValue",
+        "veryVeryVeryVeryVeryLongValue"
+      ),
+      "veryVeryVeryVeryVeryLongValue",
+      "veryVeryVeryVeryVeryLongValue",
+      "veryVeryVeryVeryVeryLongValue"
+    ),
+    "veryVeryVeryVeryVeryLongValue",
+    "veryVeryVeryVeryVeryLongValue",
+    func3(
+      "veryVeryVeryVeryVeryLongValue",
+      "veryVeryVeryVeryVeryLongValue",
+      "veryVeryVeryVeryVeryLongValue",
+      "veryVeryVeryVeryVeryLongValue"
+    )
+  );
+}
+
+$empty-map: ();
+$empty-nested-map: (
+  nested-key: (
+    empty-key: (
+      color: red
+    )
+  ),
+  empty-key: (),
+  empty-key: (),
+  empty-key: ()
+);
+
+$o-grid-default-config: (
+  columns: 12,
+  gutter: 10px,
+  min-width: 240px,
+  max-width: 1330px,
+  layouts: (
+    S: 370px,
+    M: 610px,
+    L: 850px,
+    XL: 1090px
+  ),
+  fluid: true,
+  debug: false,
+  fixed-layout: M,
+  enhanced-experience: true
+);
+
+$a: ();
+$b: unquote("");
+$c: null;
+$d: (null);
+
+$threads-properties: map-merge(
+  $threads-properties,
+  (
+    $border-label: ()
+  )
+);
+$o-grid-default-config: (
+  layouts: (
+    S: 370px
+  )
+);
+
+$map: (
+  key: (
+    value
+  ),
+  other-key: (
+    key: other-other-value
+  )
+);
+
 `;

tests/css_scss/scss.css

@@ -875,9 +875,70 @@ light: #eaf0c6
 @return map-get(map-get($colors, $color), $tone);
 }
 
-
 @media only screen and (max-width: 767px) {
   @include widths(2 3 4, \@small);
 }
 
 $widths-breakpoint-separator: \@small;
+
+a {
+  transition-timing-function: func1(
+      func2(
+          func3(
+              "veryVeryVeryVeryVeryLongValue",
+              "veryVeryVeryVeryVeryLongValue",
+              "veryVeryVeryVeryVeryLongValue",
+              "veryVeryVeryVeryVeryLongValue",
+          ),
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue",
+      ),
+      "veryVeryVeryVeryVeryLongValue",
+      "veryVeryVeryVeryVeryLongValue",
+      func3(
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue",
+          "veryVeryVeryVeryVeryLongValue"
+      )
+  );
+}
+
+$empty-map: ();
+$empty-nested-map: (
+nested-key: (empty-key: (color: red)),
+empty-key: (),
+empty-key: (),
+empty-key: ()
+);
+
+$o-grid-default-config: (
+columns: 12,
+gutter: 10px,
+min-width: 240px,
+max-width: 1330px,
+layouts: (
+S:  370px,
+M:  610px,
+L:  850px,
+XL: 1090px
+),
+fluid: true,
+debug: false,
+fixed-layout: M,
+enhanced-experience: true
+);
+
+$a: ();
+$b: unquote('');
+$c: null;
+$d: (null);
+
+$threads-properties: map-merge($threads-properties,  ($border-label: ()));
+$o-grid-default-config: (layouts: (S:  370px));
+
+$map: (
+key: (value),
+other-key: (key: other-other-value)
+);

tests/css_trailing_comma/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,141 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`at-rules.css 1`] = `
+a {
+@include section-type-1(
+$header:
+(
+margin: 0 0 $margin-base,
+text-align: left,
+),
+$decoration:
+(
+type: base,
+margin: 0 auto -1px 0,
+primary-color: $brand-primary,
+secondary-color: $gray-light,
+),
+$title:
+(
+margin: 0 0 $margin-small,
+color: false,
+font-size: $font-size-h3,
+font-weight: false,
+line-height: $line-height-h3,
+)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+)
+);
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+a {
+  @include section-type-1(
+    $header: (
+      margin: 0 0 $margin-base,
+      text-align: left
+    ),
+    $decoration: (
+      type: base,
+      margin: 0 auto -1px 0,
+      primary-color: $brand-primary,
+      secondary-color: $gray-light
+    ),
+    $title: (
+      margin: 0 0 $margin-small,
+      color: false,
+      font-size: $font-size-h3,
+      font-weight: false,
+      line-height: $line-height-h3
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15)
+    )
+  );
+}
+
+`;
+
+exports[`at-rules.css 2`] = `
+a {
+@include section-type-1(
+$header:
+(
+margin: 0 0 $margin-base,
+text-align: left,
+),
+$decoration:
+(
+type: base,
+margin: 0 auto -1px 0,
+primary-color: $brand-primary,
+secondary-color: $gray-light,
+),
+$title:
+(
+margin: 0 0 $margin-small,
+color: false,
+font-size: $font-size-h3,
+font-weight: false,
+line-height: $line-height-h3,
+)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+)
+);
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+a {
+  @include section-type-1(
+    $header: (
+      margin: 0 0 $margin-base,
+      text-align: left,
+    ),
+    $decoration: (
+      type: base,
+      margin: 0 auto -1px 0,
+      primary-color: $brand-primary,
+      secondary-color: $gray-light,
+    ),
+    $title: (
+      margin: 0 0 $margin-small,
+      color: false,
+      font-size: $font-size-h3,
+      font-weight: false,
+      line-height: $line-height-h3,
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+    )
+  );
+}
+
+`;
+
 exports[`declaration.css 1`] = `
 a {
     margin: $bar,;
@@ -74,42 +210,48 @@ $breakpoint-map: (
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 $colors: hotpink deepskyblue firebrick;
 $list: (a);
-$list: (
-  "Helvetica",
-  "Arial",
-  sans-serif
-);
-$colors: (
-  "red",
-  "blue"
-);
+$list: ("Helvetica", "Arial", sans-serif);
+$colors: ("red", "blue");
 $config: (
-  themes:
-    (
-      mist: (header: #dcfac0, content: #00968b, footer: #85c79c),
-      $spring: (header: #f4fac7, content: #c2454e, footer: #ffb158)
+  themes: (
+    mist: (
+      header: #dcfac0,
+      content: #00968b,
+      footer: #85c79c
+    ),
+    $spring: (
+      header: #f4fac7,
+      content: #c2454e,
+      footer: #ffb158
     )
+  )
 );
 
 $breakpoint-map: (
-  small:
-    (min-width: null, max-width: 479px, base-font: 16px, vertical-rhythm: 1.3),
-  medium:
-    (
-      min-width: 480px,
-      max-width: 959px,
-      base-font: 18px,
-      vertical-rhythm: 1.414
-    ),
-  large:
-    (min-width: 960px, max-width: 1099px, base-font: 18px, vertical-rhythm: 1.5),
-  xlarge:
-    (
-      min-width: 1100px,
-      max-width: null,
-      base-font: 21px,
-      vertical-rhythm: 1.618
-    )
+  small: (
+    min-width: null,
+    max-width: 479px,
+    base-font: 16px,
+    vertical-rhythm: 1.3
+  ),
+  medium: (
+    min-width: 480px,
+    max-width: 959px,
+    base-font: 18px,
+    vertical-rhythm: 1.414
+  ),
+  large: (
+    min-width: 960px,
+    max-width: 1099px,
+    base-font: 18px,
+    vertical-rhythm: 1.5
+  ),
+  xlarge: (
+    min-width: 1100px,
+    max-width: null,
+    base-font: 21px,
+    vertical-rhythm: 1.618
+  )
 );
 
 `;
@@ -166,47 +308,48 @@ $breakpoint-map: (
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 $colors: hotpink deepskyblue firebrick;
 $list: (a);
-$list: (
-  "Helvetica",
-  "Arial",
-  sans-serif,
-);
-$colors: (
-  "red",
-  "blue",
-);
+$list: ("Helvetica", "Arial", sans-serif);
+$colors: ("red", "blue");
 $config: (
-  themes:
-    (
-      mist: (header: #dcfac0, content: #00968b, footer: #85c79c,),
-      $spring: (header: #f4fac7, content: #c2454e, footer: #ffb158,),
-    )
+  themes: (
+    mist: (
+      header: #dcfac0,
+      content: #00968b,
+      footer: #85c79c,
+    ),
+    $spring: (
+      header: #f4fac7,
+      content: #c2454e,
+      footer: #ffb158,
+    ),
+  ),
 );
 
 $breakpoint-map: (
-  small:
-    (min-width: null, max-width: 479px, base-font: 16px, vertical-rhythm: 1.3,),
-  medium:
-    (
-      min-width: 480px,
-      max-width: 959px,
-      base-font: 18px,
-      vertical-rhythm: 1.414,
-    ),
-  large:
-    (
-      min-width: 960px,
-      max-width: 1099px,
-      base-font: 18px,
-      vertical-rhythm: 1.5,
-    ),
-  xlarge:
-    (
-      min-width: 1100px,
-      max-width: null,
-      base-font: 21px,
-      vertical-rhythm: 1.618,
-    ),
+  small: (
+    min-width: null,
+    max-width: 479px,
+    base-font: 16px,
+    vertical-rhythm: 1.3,
+  ),
+  medium: (
+    min-width: 480px,
+    max-width: 959px,
+    base-font: 18px,
+    vertical-rhythm: 1.414,
+  ),
+  large: (
+    min-width: 960px,
+    max-width: 1099px,
+    base-font: 18px,
+    vertical-rhythm: 1.5,
+  ),
+  xlarge: (
+    min-width: 1100px,
+    max-width: null,
+    base-font: 21px,
+    vertical-rhythm: 1.618,
+  ),
 );
 
 `;
@@ -230,9 +373,15 @@ $map: (
   large: 1200px
 );
 $map: (
-  "medium": (min-width: 800px),
-  "large": (min-width: 1000px),
-  "huge": (min-width: 1200px)
+  "medium": (
+    min-width: 800px
+  ),
+  "large": (
+    min-width: 1000px
+  ),
+  "huge": (
+    min-width: 1200px
+  )
 );
 $map: (
   small: 767px,
@@ -261,9 +410,15 @@ $map: (
   large: 1200px,
 );
 $map: (
-  "medium": (min-width: 800px),
-  "large": (min-width: 1000px),
-  "huge": (min-width: 1200px),
+  "medium": (
+    min-width: 800px,
+  ),
+  "large": (
+    min-width: 1000px,
+  ),
+  "huge": (
+    min-width: 1200px,
+  ),
 );
 $map: (
   small: 767px,

tests/css_trailing_comma/at-rules.css

@@ -0,0 +1,33 @@
+a {
+@include section-type-1(
+$header:
+(
+margin: 0 0 $margin-base,
+text-align: left,
+),
+$decoration:
+(
+type: base,
+margin: 0 auto -1px 0,
+primary-color: $brand-primary,
+secondary-color: $gray-light,
+),
+$title:
+(
+margin: 0 0 $margin-small,
+color: false,
+font-size: $font-size-h3,
+font-weight: false,
+line-height: $line-height-h3,
+)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+)
+);
+}