'& + &' cannot work in current version (4.2.1)

[sam]

when I upgraded postcss-cssnext (which contains postcss-nesting) to version 3.0.2 for my project, I found this issue.

when use postcss-cssnext 2.9.0 , all work well.

[Misha Khazov]

I have the same issue. How have you solved it?

[Jacob Pratt]

@jonathantneal Running into a similar issue as well using cssnext, but I can repro on the live example, which I presume is the current version.

Minimal code to reproduce:

div {
  color: #000;
  
  @nest & > & {
   	color: #fff;
  }
}

Expected:

div {
  color: #000;
}
div ~ div {
  color: #fff;
}

Actual is unchanged from the input.

[Jonathan Neal]

The reason that doesn’t work is because the nesting selector does not represent the parent selector string. It represents the elements it matches.

the nesting selector represents the elements matched by the parent rule
— https://tabatkins.github.io/specs/css-nesting/#nest-selector

That means & ~ & is the same as saying “match this particular element when it is a sibling after itself.”