Skip to content

Nested pseudo-selector with parent symbol #4358

@woody-li

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions