Variable interpolation with math operator like + is not compiling properly

[liuliangsir]

To reproduce:

@a: 1px;
@b: 2px;
@c: @a + @b;

@radio-cls: radio;
@radio-cls-checked: @{radio-cls}_checked;

.@{radio-cls-checked} {
  border-color: #fff;
}

Also here is a online playground for reproducing the issue above.

Current behavior:

._checked {
  border-color: #fff;
}

Expected behavior:

.radio_checked {
  border-color: #fff;
}

Environment information:

• less version: 4.2.0
• nodejs version: N/A
• operating system: N/A

Workaround

• solution1
• solution2

[liuliangsir]

@iChenLei cc

[matthew-dean]

@liuliangsir That's a fascinating and bizarre bug. The first statements should have no effect on the statement following but somehow they do. 🤔

[puckowski]

I have a fix for this issue that passes all tests. I will try to submit a PR sometime this weekend.

[puckowski]

Should be resolved via #4292
Less version 4.2.2