From 9e6bd15ade7f0b185bd9a2db676221d6dfd0dedb Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Wed, 7 Feb 2018 13:20:13 +0300 Subject: [PATCH] fix(css): comments in selectors (#3909) --- src/language-css/parser-postcss.js | 8 +- src/language-css/printer-postcss.js | 8 +- .../css_case/__snapshots__/jsfmt.spec.js.snap | 8 +- .../__snapshots__/jsfmt.spec.js.snap | 31 ---- tests/css_comment_in_if/jsfmt.spec.js | 1 - .../__snapshots__/jsfmt.spec.js.snap | 166 +++++++++++++++++- .../if-eslit-at-rule-decloration.scss} | 10 +- tests/css_comments/selector.css | 10 -- tests/css_comments/selectors.css | 26 +++ tests/css_comments/selectors.scss | 45 ++++- 10 files changed, 249 insertions(+), 64 deletions(-) delete mode 100644 tests/css_comment_in_if/__snapshots__/jsfmt.spec.js.snap delete mode 100644 tests/css_comment_in_if/jsfmt.spec.js rename tests/{css_comment_in_if/comment-in-if.css => css_comments/if-eslit-at-rule-decloration.scss} (53%) delete mode 100644 tests/css_comments/selector.css create mode 100644 tests/css_comments/selectors.css diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index 16bbbff72..97e7cf737 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -11,7 +11,7 @@ function parseSelector(selector) { if (selector.match(/\/\/|\/\*/)) { return { type: "selector-comment", - value: selector + value: selector.replace(/^ +/, "").replace(/ +$/, "") }; } const selectorParser = require("postcss-selector-parser"); @@ -218,10 +218,14 @@ function parseNestedCSS(node) { } if (typeof node.selector === "string" && node.selector.trim().length > 0) { - const selector = node.raws.selector + let selector = node.raws.selector ? node.raws.selector.raw : node.selector; + if (node.raws.between && node.raws.between.trim()) { + selector += node.raws.between; + } + if (selector.startsWith("@") && selector.endsWith(":")) { return node; } diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 572565058..dbf4ea57f 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -65,9 +65,11 @@ function genericPrint(path, options, print) { // with a colon, so keep the original case then. const isDetachedRulesetDeclaration = node.selector && - typeof node.selector === "string" && - node.selector.startsWith("@") && - node.selector.endsWith(":"); + node.selector.type !== "selector-root-invalid" && + ((typeof node.selector === "string" && + /^@.+:.*$/.test(node.selector)) || + (node.selector.value && /^@.+:.*$/.test(node.selector.value))); + return concat([ path.call(print, "selector"), node.important ? " !important" : "", diff --git a/tests/css_case/__snapshots__/jsfmt.spec.js.snap b/tests/css_case/__snapshots__/jsfmt.spec.js.snap index 8f168fef8..5d4c77991 100644 --- a/tests/css_case/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css_case/__snapshots__/jsfmt.spec.js.snap @@ -176,7 +176,7 @@ svg[viewBox] linearGradient, @media (--KeepCustomMedia) { } -@KeepDetachedRuleset: { +@KeepDetachedRuleset: /*:*/ { background: RED; }; @@ -187,7 +187,7 @@ svg[viewBox] linearGradient, @KeepTopLevelVar: val; $KeepScssVar: val; -.Keep(@Keep: 12e3px) when (@Keep=Case) { +.Keep(@Keep: 12e03PX) when (@Keep=Case) /*:*/ { @KeepVar: KeepName; /*:*/ @{KeepInterpolationVar}: val; $KeepScssVar: val; @@ -221,9 +221,9 @@ $KeepScssVar: val; .Keep (@Keep) when (lightness(@Keep) >= Keep12PX) and (@Keep > @Keep12E5) { } -.Keep(@Keep: 12px; @Keep: @Keep12PX; ...) { +.Keep(@Keep: 12PX; @Keep: @Keep12PX; ...) /*:*/ { } -.Keep(@Keep: "12PX"; @Keep: "12PX"; ...) { +.Keep(@Keep: '12PX'; @Keep: "12PX"; ...) /*:*/ { } @media (min-width: 700px) { diff --git a/tests/css_comment_in_if/__snapshots__/jsfmt.spec.js.snap b/tests/css_comment_in_if/__snapshots__/jsfmt.spec.js.snap deleted file mode 100644 index 31386288d..000000000 --- a/tests/css_comment_in_if/__snapshots__/jsfmt.spec.js.snap +++ /dev/null @@ -1,31 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`comment-in-if.css 1`] = ` -@function _normalize-include($section) { -// Check if $section is in the $include list. - @if index($_normalize-include, $section) { - @return true; - } -// If $include is set to (all), make sure $section is not in $exclude. - @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) { - @return true; - } - @return false; -} -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -@function _normalize-include($section) { - // Check if $section is in the $include list. - @if index($_normalize-include, $section) { - @return true; - } - // If $include is set to (all), make sure $section is not in $exclude. - @else if not - index($_normalize-exclude, $section) and - index($_normalize-include, all) - { - @return true; - } - @return false; -} - -`; diff --git a/tests/css_comment_in_if/jsfmt.spec.js b/tests/css_comment_in_if/jsfmt.spec.js deleted file mode 100644 index 7d3726c81..000000000 --- a/tests/css_comment_in_if/jsfmt.spec.js +++ /dev/null @@ -1 +0,0 @@ -run_spec(__dirname, ["css"]); diff --git a/tests/css_comments/__snapshots__/jsfmt.spec.js.snap b/tests/css_comments/__snapshots__/jsfmt.spec.js.snap index 32565f0c3..d883f5b81 100644 --- a/tests/css_comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/css_comments/__snapshots__/jsfmt.spec.js.snap @@ -82,6 +82,36 @@ a { `; +exports[`if-eslit-at-rule-decloration.scss 1`] = ` +@function _normalize-include($section) { +// Check if $section is in the $include list. + @if index($_normalize-include, $section) { + @return true; + } +// If $include is set to (all), make sure $section is not in $exclude. + @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) { + @return true; + } + @return false; +} +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +@function _normalize-include($section) { + // Check if $section is in the $include list. + @if index($_normalize-include, $section) { + @return true; + } + // If $include is set to (all), make sure $section is not in $exclude. + @else if not + index($_normalize-exclude, $section) and + index($_normalize-include, all) + { + @return true; + } + @return false; +} + +`; + exports[`places.css 1`] = ` div { // a @@ -127,44 +157,166 @@ foo { `; -exports[`selector.css 1`] = ` -.powerPathNavigator .helm button.pressedButton, /* pressed buttons */ +exports[`selectors.css 1`] = ` +.powerPathNavigator .helm button.pressedButton, /* comment 1 */ .powerPathNavigator .helm button:active:not(.disabledButton), .powerPathNavigator table.powerPathInfo th:active, .powerPathNavigator table.powerPathInfo th:active + th:last-child { } -/* pressed buttons */ +/* comment 2 */ .powerPathNavigator .helm button.pressedButton, .powerPathNavigator .helm button:active:not(.disabledButton) { } + +.foo, +/* comment 3 */ +.bar { + display: block; +} + +/* comment 4 */ +/* comment 5 */ .field /* comment 6 */ +/* comment 7 */ +/* comment 8 */ { /* comment 9 */ + /* comment 10 */ + background: green; + /* comment 11 */ +/* comment 12 */ } /* comment 13 */ +/* comment 14 */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -.powerPathNavigator .helm button.pressedButton, /* pressed buttons */ +.powerPathNavigator .helm button.pressedButton, /* comment 1 */ .powerPathNavigator .helm button:active:not(.disabledButton), .powerPathNavigator table.powerPathInfo th:active, .powerPathNavigator table.powerPathInfo th:active + th:last-child { } -/* pressed buttons */ +/* comment 2 */ .powerPathNavigator .helm button.pressedButton, .powerPathNavigator .helm button:active:not(.disabledButton) { } +.foo, +/* comment 3 */ +.bar { + display: block; +} + +/* comment 4 */ +/* comment 5 */ +.field /* comment 6 */ +/* comment 7 */ +/* comment 8 */ { + /* comment 9 */ + /* comment 10 */ + background: green; + /* comment 11 */ + /* comment 12 */ +} /* comment 13 */ +/* comment 14 */ + `; exports[`selectors.scss 1`] = ` +.powerPathNavigator .helm button.pressedButton, // comment 1 +.powerPathNavigator .helm button:active:not(.disabledButton), +.powerPathNavigator table.powerPathInfo th:active, +.powerPathNavigator table.powerPathInfo th:active + th:last-child { +} + +// comment 2 +.powerPathNavigator .helm button.pressedButton, +.powerPathNavigator .helm button:active:not(.disabledButton) { +} + .foo, -// Comment. +// comment 3 .bar { display: block; } + +.field + { + &[data-field-id="1"], // comment 4 + &[data-field-id="2"], // comment 5 + &[data-field-id="3"], // comment 6 + { + background: green; + } +} + +// comment 7 +.field +// comment 8 +{ // comment 9 + // comment 10 + &[data-field-id="1"], // comment 11 + // comment 12 + &[data-field-id="2"] // comment 13 + // comment 14 + , // comment 15 + // comment 16 + &[data-field-id="3"], // comment 17 + // comment 18 + { // comment 19 + // comment 20 + background: green; + // comment 21 + } // comment 22 + // comment 23 +} +// comment 24 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +.powerPathNavigator .helm button.pressedButton, // comment 1 +.powerPathNavigator .helm button:active:not(.disabledButton), +.powerPathNavigator table.powerPathInfo th:active, +.powerPathNavigator table.powerPathInfo th:active + th:last-child { +} + +// comment 2 +.powerPathNavigator .helm button.pressedButton, +.powerPathNavigator .helm button:active:not(.disabledButton) { +} + .foo, -// Comment. +// comment 3 .bar { display: block; } +.field { + &[data-field-id="1"], // comment 4 + &[data-field-id="2"], // comment 5 + &[data-field-id="3"], // comment 6 + { + background: green; + } +} + +// comment 7 +.field +// comment 8 + { + // comment 9 + // comment 10 + &[data-field-id="1"], // comment 11 + // comment 12 + &[data-field-id="2"] // comment 13 + // comment 14 + , // comment 15 + // comment 16 + &[data-field-id="3"], // comment 17 + // comment 18 + { + // comment 19 + // comment 20 + background: green; + // comment 21 + } // comment 22 + // comment 23 +} +// comment 24 + `; exports[`trailing_star_slash.css 1`] = ` diff --git a/tests/css_comment_in_if/comment-in-if.css b/tests/css_comments/if-eslit-at-rule-decloration.scss similarity index 53% rename from tests/css_comment_in_if/comment-in-if.css rename to tests/css_comments/if-eslit-at-rule-decloration.scss index ccb4a9c65..3542ceca1 100644 --- a/tests/css_comment_in_if/comment-in-if.css +++ b/tests/css_comments/if-eslit-at-rule-decloration.scss @@ -1,11 +1,11 @@ @function _normalize-include($section) { // Check if $section is in the $include list. - @if index($_normalize-include, $section) { + @if index($_normalize-include, $section) { @return true; - } + } // If $include is set to (all), make sure $section is not in $exclude. - @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) { + @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) { @return true; - } - @return false; + } + @return false; } diff --git a/tests/css_comments/selector.css b/tests/css_comments/selector.css deleted file mode 100644 index 53bdc145c..000000000 --- a/tests/css_comments/selector.css +++ /dev/null @@ -1,10 +0,0 @@ -.powerPathNavigator .helm button.pressedButton, /* pressed buttons */ -.powerPathNavigator .helm button:active:not(.disabledButton), -.powerPathNavigator table.powerPathInfo th:active, -.powerPathNavigator table.powerPathInfo th:active + th:last-child { -} - -/* pressed buttons */ -.powerPathNavigator .helm button.pressedButton, -.powerPathNavigator .helm button:active:not(.disabledButton) { -} diff --git a/tests/css_comments/selectors.css b/tests/css_comments/selectors.css new file mode 100644 index 000000000..11adb3999 --- /dev/null +++ b/tests/css_comments/selectors.css @@ -0,0 +1,26 @@ +.powerPathNavigator .helm button.pressedButton, /* comment 1 */ +.powerPathNavigator .helm button:active:not(.disabledButton), +.powerPathNavigator table.powerPathInfo th:active, +.powerPathNavigator table.powerPathInfo th:active + th:last-child { +} + +/* comment 2 */ +.powerPathNavigator .helm button.pressedButton, +.powerPathNavigator .helm button:active:not(.disabledButton) { +} + +.foo, +/* comment 3 */ +.bar { + display: block; +} + +/* comment 4 */ +/* comment 5 */ .field /* comment 6 */ +/* comment 7 */ +/* comment 8 */ { /* comment 9 */ + /* comment 10 */ + background: green; + /* comment 11 */ +/* comment 12 */ } /* comment 13 */ +/* comment 14 */ diff --git a/tests/css_comments/selectors.scss b/tests/css_comments/selectors.scss index 9ec074c92..cee41f882 100644 --- a/tests/css_comments/selectors.scss +++ b/tests/css_comments/selectors.scss @@ -1,5 +1,48 @@ +.powerPathNavigator .helm button.pressedButton, // comment 1 +.powerPathNavigator .helm button:active:not(.disabledButton), +.powerPathNavigator table.powerPathInfo th:active, +.powerPathNavigator table.powerPathInfo th:active + th:last-child { +} + +// comment 2 +.powerPathNavigator .helm button.pressedButton, +.powerPathNavigator .helm button:active:not(.disabledButton) { +} + .foo, -// Comment. +// comment 3 .bar { display: block; } + +.field + { + &[data-field-id="1"], // comment 4 + &[data-field-id="2"], // comment 5 + &[data-field-id="3"], // comment 6 + { + background: green; + } +} + +// comment 7 +.field +// comment 8 +{ // comment 9 + // comment 10 + &[data-field-id="1"], // comment 11 + // comment 12 + &[data-field-id="2"] // comment 13 + // comment 14 + , // comment 15 + // comment 16 + &[data-field-id="3"], // comment 17 + // comment 18 + { // comment 19 + // comment 20 + background: green; + // comment 21 + } // comment 22 + // comment 23 +} +// comment 24