csstools / postcss-nesting

Nest style rules inside each other

Home Page:https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 > & {