Bug when using the plus symbol on calc calls inside from expressions for colors

[filipesabella]

To reproduce:

div {
  background: rgb(from blue calc(r + 100) g b);
}

Current behavior:

Less throws a Could not parse call arguments or missing ')' error.

Expected behavior:

Should generate:

div {
  background: rgb(from blue calc(r + 100) g b);
}

Environment information:

Running on the official playground is enough to reproduce it:
https://lesscss.org/less-preview

Subtraction works just fine:

div {
  background: rgb(from blue calc(r - 100) g b);
}

I also found another bug that might be related. Notice the inversion from r - 100 to 100 - r:

div {
  background: rgb(from blue calc(100 - r) g b);
}

Drops the math operator:

div {
  background: rgb(from blue calc(100  r) g b);
}

[dosubot]

Hey @filipesabella! 👋 I'm here to help you with any bugs, questions, or contributions you have in mind. Let's squash those bugs together!

The issue you're encountering seems to be related to how Less handles parsing of calc expressions within from color functions. Specifically, it appears that Less is having trouble parsing the + operator within calc() when used in this context, resulting in a parsing error.

Currently, Less does not evaluate math expressions directly within calc() for CSS compatibility, but it does allow for the inclusion of variables and nested math operations within its expression ^[1]. However, it seems that the + operator is causing a parsing issue in this specific scenario.

As a workaround, you might consider restructuring your code to avoid using the + operator directly within calc() in from expressions, or explore alternative ways to achieve the desired effect without triggering the parsing error.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}