fix(css): comments in selectors (#3909)

This commit is contained in:
Evilebot Tnawi authored and GitHub committed 2018-02-07 13:20:13 +03:00
1 parent 6b5765da36
commit 9e6bd15ade
10 files changed
+249 -64

No files matched your search

+6 -2
View File
@@ -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;
}
+5 -3
View File
@@ -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" : "",
@@ -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) {
@@ -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;
}
`;
-1
View File
@@ -1 +0,0 @@
run_spec(__dirname, ["css"]);
@@ -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`] = `
@@ -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;
}
-10
View File
@@ -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) {
}
+26
View File
@@ -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 */
+44 -1
View File
@@ -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