diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 72190761b..8b6c5fd15 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -285,18 +285,24 @@ function genericPrint(path, options, print) { const atRuleAncestorNode = getAncestorNode(path, "css-atrule"); const insideInExtend = atRuleAncestorNode && atRuleAncestorNode.name === "extend"; - const insideInCustomSelector = + const insideInCustomSelectorAtRule = atRuleAncestorNode && atRuleAncestorNode.name === "custom-selector"; + const insideInNestAtRule = + atRuleAncestorNode && atRuleAncestorNode.name === "nest"; return group( concat([ - insideInCustomSelector + insideInCustomSelectorAtRule ? concat([atRuleAncestorNode.customSelector, line]) : "", join( concat([ ",", - insideInExtend || insideInCustomSelector ? line : hardline + insideInExtend || + insideInCustomSelectorAtRule || + insideInNestAtRule + ? line + : hardline ]), path.map(print, "nodes") ) diff --git a/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap b/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap index 2a376b4ac..cd6544af6 100644 --- a/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap @@ -326,6 +326,15 @@ a { } } } +a { + order: 1; + @nest very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector & { + order: 2; + } + @nest very-very-very-very-very-very-very-very-very-long-selector + very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector very-very-very-very-very-very-very-very-very-long-selector & { + order: 2; + } +} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ a { order: 1; @@ -395,11 +404,9 @@ b { a, b { order: 1; - @nest & c, - & d { + @nest & c, & d { order: 2; - @nest & e, - & f { + @nest & e, & f { order: 3; } order: 4; @@ -468,8 +475,7 @@ f { a, b { order: 1; - @nest c, - d { + @nest c, d { order: 2; } } @@ -529,5 +535,20 @@ a { } } } +a { + order: 1; + @nest very-very-very-very-very-very-very-very-very-long-selector &, + very-very-very-very-very-very-very-very-very-long-selector & { + order: 2; + } + @nest very-very-very-very-very-very-very-very-very-long-selector + + very-very-very-very-very-very-very-very-very-long-selector + &, + very-very-very-very-very-very-very-very-very-long-selector + very-very-very-very-very-very-very-very-very-long-selector + & { + order: 2; + } +} `; diff --git a/tests/css_postcss_plugins/postcss-nesting.css b/tests/css_postcss_plugins/postcss-nesting.css index f2c278d42..34a44b76b 100644 --- a/tests/css_postcss_plugins/postcss-nesting.css +++ b/tests/css_postcss_plugins/postcss-nesting.css @@ -190,3 +190,12 @@ a { } } } +a { + order: 1; + @nest very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector & { + order: 2; + } + @nest very-very-very-very-very-very-very-very-very-long-selector + very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector very-very-very-very-very-very-very-very-very-long-selector & { + order: 2; + } +}