fix(issue:4258) variable interpolation after math

[puckowski]

What:

Fixes variable interpolation issue after previous variable addition.

Why:

Current Less.js takes:

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

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

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

and produces:

._checked {
  border-color: #fff;
}

With fix the CSS is:

.radio_checked {
  border-color: #fff;
}

Checklist:

• Documentation
• Added/updated unit tests
• Code complete

Tests passing locally. Updated tests for variables.

[puckowski]

I submitted a few PRs. I expect rebase(s) will be needed in order to merge all of them, so let me know when a rebase is needed.

[puckowski]

Rebased after merge conflict. Changes approved by one reviewer. Some CI looks flaky. Squashing and merging to avoid future merge conflicts.

[matthew-dean]

I didn't look at this issue carefully enough. @{radio-cls}_checked has not been valid Less syntax. Interpolation, historically, has only been allowed in quotes and identifiers. I think the reason it didn't throw an error is because of the fallback to a "permissive value" which then allows the interpolation but doesn't evaluate it. So, IMO, the fix for this bug is partially treating something that isn't a bug and adds another bug (unsupported feature) on top of it.

The clue that the fix is not valid is item.startsWith('@{') -- it doesn't logically follow that interpretation of a token would change based on its position IN the value, although I do know how we got here (because of the permissive fallback for variable values, which was probably not a good idea.