Parsing error using + combinator
equinusocio opened this issue · comments
Hi Jonathan, i have the following issue using the @nest
at-rule.
Using the >
combinator inside a @nest
selector it works fine. This snippet works as expected:
.Hint {
color: blue
@nest .Field:invalid > & {
color: red;
}
}
/*
RETURNS
.Hint {
color: blue
}
.Field:invalid > .Hint {
color: red;
}
*/
But this returns a syntax error:
.Hint {
color: blue
@nest .Field:invalid + & {
color: red;
}
}
/*
SHOULD RETURNS
.Hint {
color: blue
}
.Field:invalid + .Hint {
color: red;
}
*/
Module build failed: ParserError: Syntax Error at line: 1, column 16 at Generator.next ()
Now i know i could write the selector in another way to make it work, but i think it's just a sort of parsing bug because both are valid combinators, and i want to keep consistency using one syntax (using @nest).
To those who come across the error later; the issue was syntactical. While I’m not certain why earlier versions of PostCSS threw an error, the issue was the missing semicolon at the end of a declaration. Without it, CSS allows declarations to include newlines, and therefore the declaration kept going and going, consuming @nest .Field
, etc.
Before:
.Hint {
color: blue
@nest .Field:invalid > & {
Fixed:
.Hint {
color: blue;
@nest .Field:invalid > & {