[Bug]: & operator is not working in less module

[gz65555]

Version

System:
  OS: Linux 6.1 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
  Memory: 44.37 GB / 62.38 GB
  Container: Yes
  Shell: 5.8 - /usr/bin/zsh
Browsers:
  Chrome: 131.0.6778.204
npmPackages:
  @rsbuild/core: ^1.1.8 => 1.1.14 
  @rsbuild/plugin-less: ^1.1.0 => 1.1.0 
  @rsbuild/plugin-react: ^1.0.7 => 1.1.0

Details

This is the original code of less.

.test {
  background-color: rebeccapurple;
}
:global(.hello) {
  background-color: aqua;

  &-world {
    background-color: brown;
  }
}

When I used the & operator, the built output did not include the class modified by &. The output is:

.test-vRkBOC{background-color:#639}.hello{background-color:#0ff}

Reproduce link

https://codesandbox.io/p/github/gz65555/rsbuild-less-bug-feedback/main?import=true

Reproduce Steps

1. Run pnpm i & pnpm build
2. Check the output folder and open the css file

You can see there is no .hello-world class here

[gz65555]

I think it's a problem cause by lightingcss, which is used by rsbuild.

If I don't use the lightingcss-loader, the result is ok.

[chenjiahan]

@GiveMe-A-Name Can you take a look at this lightningcss related issue?

[GiveMe-A-Name]

The css is not validate css by transform by less-loader, So lightningcss can't transform the css code correctly, lightningcss playground

.test {
  background-color: rebeccapurple;
}
:global(.hello) {
  background-color: aqua;

  &-world {
    background-color: brown;
  }
}

After less-loader, the css will become:

.test {
background-color: rebeccapurple;
}
:global(.hello) {
background-color: aqua;
}
/* invalidate */
:global(.hello)-world {
background-color: brown;
}

[GiveMe-A-Name]

I think is not a bug in lightningcss, but recover error css can be lightningcss feature.

[gz65555]

Yes, it's not a valid css, but it's valid less style, which is parent selector.

[GiveMe-A-Name]

Yes, but Less only transform the less code by replacing &. Less don't care whether it is a valid css.