Nesting with ampersand

[JamyGolden]

Hello @ai :wave: I've been having issues nesting with a selector including ampersand, for example:

.a {
    color: red;

    .b + & {
        color: blue;
    }
}

I would expect this to convert to: .b + .a. I understand that while the postcss selector is nested, the output selector doesn't begin with a .a. I feel like this used to work this way? Or at least Sass worked/worked this way.

Is this functionality intentional or should it work as I mentioned?

[ai]

Yes, it should be .b .a. What do you have?

(Double check that you are using postcss-nested and not postcss-nesting)

[JamyGolden]

Thanks for the quick response. I am using postcss-nested. I see your tests do include this case so it's not related to postcss-nested and instead probably somehow related to my nextjs setup somehow. I'll continue investigating there. Thanks again! :smile:

[JamyGolden]

Turns out it was because I was using .selector { :global { .a { .b + & {} } } } so & isn't what I was expecting it to be (which was .a, instead it was .selector :global .a so it doesn't work with the sibling selector that way.