incorrect nesting of classes meant for one element (e.g. .a.b.)

[nomve]

Hi,

Affected versions: 5.0.2 / 5.0.3

Example

.a {
  .b {
    .c& {}
  }
}

Expected

.c.a .b {}

Actual

.a .c.b {}

the postcss config was reduced to just this below, and it still reproduces

plugins: [
  require('postcss-nested')()
]

I downgraded to 5.0.1 and this clears the issue. According to package-lock, no other dependencies were updated.

[ai]

This fix could require a big refactoring. PR is welcome since I burned out from the previous 5.0.1 — 5.0.2 refactoring.

[nomve]

Hi,

I am fine with using 5.0.1. It was mostly just FYI (and if anybody else gets this issue). take care, and don't work too hard.

[thinkverse]

Pretty new to PostCSS, does .selector& mean to hoist up and combine with root selector? 🤔 To me, that seems like a very weird use-case, especially when nested deeply.

[siilike]

Also not working any more:

.a {
  .b {
    body & { 
      ...
    }
  }
}

where the expected selector would be:

body .a .b

but actually is:

.a body .b

[thinkverse]

Sounds like the replace doesn't bubble up to the ancestor and goes for the direct parent. Found a plugin called postcss-nested-ancestors that might be useful in the meantime. 🙂

[ai]

Can you try PostCSS 8.3.3? We fixed a very strange bug, which could be connected with this one.

[unbugx]

@ai I use PostCSS 8.4.5 but problem with postcss-nested still persists. So I have to use postcss-nested version 5.0.1. Maybe there is a conflict with other plugins

[maranomynet]

BTW, It seems this was fixed in v5.0.4

[ai]

Great!