diff --git a/src/language-css/clean.js b/src/language-css/clean.js index 6972280a1..5da853cae 100644 --- a/src/language-css/clean.js +++ b/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(); diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 23a23170e..03530c4e2 100644 --- a/src/language-css/printer-postcss.js +++ b/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": { diff --git a/src/language-css/utils.js b/src/language-css/utils.js index 798879d4f..29304c19f 100644 --- a/src/language-css/utils.js +++ b/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 }; diff --git a/tests/css_atrule/__snapshots__/jsfmt.spec.js.snap b/tests/css_atrule/__snapshots__/jsfmt.spec.js.snap index f5ff885c8..acbf34c0f 100644 --- a/tests/css_atrule/__snapshots__/jsfmt.spec.js.snap +++ b/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`] = ` diff --git a/tests/css_atrule/include.css b/tests/css_atrule/include.css index 0097c1dec..458d637b5 100644 --- a/tests/css_atrule/include.css +++ b/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 +) +); +} diff --git a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap b/tests/css_scss/__snapshots__/jsfmt.spec.js.snap index 1fae0540e..2cb90407b 100644 --- a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap +++ b/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 + ) +); + `; diff --git a/tests/css_scss/scss.css b/tests/css_scss/scss.css index 582cda1c6..ec48c0c2e 100644 --- a/tests/css_scss/scss.css +++ b/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) +); diff --git a/tests/css_trailing_comma/__snapshots__/jsfmt.spec.js.snap b/tests/css_trailing_comma/__snapshots__/jsfmt.spec.js.snap index a530487d1..380684b1b 100644 --- a/tests/css_trailing_comma/__snapshots__/jsfmt.spec.js.snap +++ b/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, diff --git a/tests/css_trailing_comma/at-rules.css b/tests/css_trailing_comma/at-rules.css new file mode 100644 index 000000000..f360ca54f --- /dev/null +++ b/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), +) +); +}