Nested pseudo-selector with parent symbol

[woody-li]

To reproduce:

https://lesscss.org/less-preview/#eyJjb2RlIjoiLng6aXMoLnguYSkge1xuICBjb2xvcjogI2YwMDtcbn1cbi54Om5vdCgmLmIsICYuYykge1xuICBjb2xvcjogIzBmMDtcbn1cblxuLng6aXMoLngtYSkge1xuICBjb2xvcjogI2YwMDtcbn1cbi54Om5vdCgmLWIsICYtYykge1xuICBjb2xvcjogIzBmMDtcbn0iLCJhY3RpdmVWZXJzaW9uIjoiNC40LjAiLCJtYXRoIjoicGFyZW5zLWRpdmlzaW9uIiwic3RyaWN0VW5pdHMiOmZhbHNlfQ==

.x:is(.x.a) {
  color: #f00;
}
.x:not(&.b, &.c) {
  color: #0f0;
}

.x:is(.x-a) {
  color: #f00;
}
.x:not(&-b, &-c) {
  color: #0f0;
}

Current behavior:

When the nested pseudo with single selector, it works well. But when multiple, it doesn't parse the parent symbol(&). Tested with :not(), :is(), :where(), and got the same result.

.x:is(.x.a) {
  color: #f00;
}
.x:not(&.b, &.c) {
  color: #0f0;
}
.x:is(.x-a) {
  color: #f00;
}
.x:not(&-b, &-c) {
  color: #0f0;
}

Expected behavior:

.x:is(.x.a) {
  color: #f00;
}
.x:not(.x.b, .x.c) {
  color: #0f0;
}
.x:is(.x-a) {
  color: #f00;
}
.x:not(.x-b, .x-c) {
  color: #0f0;
}

Environment information:

• less version: 4.4.0

[woody-li]

It seems like related to #4314 ? I'm not sure @puckowski

[puckowski]

Thank you for the bug report. I will try to solve this issue this weekend.

[puckowski]

I spent some time on this but did not come up with a fully working solution. I'll try to take another stab at it soon.

[puckowski]

I think I figured out a solution in https://github.com/less/less.js/pull/4369

But there is one failing existing test.

This Less:

.selector:not(&:hover) {
  test: global scope;
}

according to the current tests should become:

.selector:not(:hover) {
  test: global scope;
}

but my solution expands it to:

.selector:not(.selector:hover) {
  test: global scope;
}

Will discuss and see if I need to update the test or my solution.