calc() with escaped strings removes parenthesis

[oBusk]

In 3.0 calculations in calc() are now only done on runtime, as stated in changelog.md. Previously, since content of calc() was being calculated, things that wanted to be kept had to be espaced as such:

// input
.a {
  @v: 10px;
  height: calc(~'100%' - ((@v  * 3) + (@v * 2)));
}

// output
.a {
  height: calc(100% - 50px);
}

After upgrading to 3.0 the result is

// input
.a {
  @v: 10px;
  height: calc(~'100%' - ((@v  * 3) + (@v * 2)));
}

// Expected output
.a {
  height: calc(100% - ((10px * 3) + (10px * 2)));
}

// Actual output 
.a {
  height: calc(100% - (10px * 3) + (10px * 2));
}

Workaround

This can currently be fixed by not escaping;

// input
.a {
  @v: 10px;
  height: calc(100% - ((@v  * 3) + (@v * 2)));
}

// output
.a {
  height: calc(100% - ((10px * 3) + (10px * 2)));
}

[matthew-dean]

Sorry, what is the problem with the output? The removal of the parentheses?

[oBusk]

Exactly. The parentheses is removed, causing the calculation to be wrong.

Calc will be evaluated as (A - B) + C instead of A - (B + C)

[matthew-dean]

@oBusk Okay, got it. Not sure why Less is doing that, other than there's probably logic in there for simplifying expressions that normally works when the calculations are allowed to be evaluated, but doesn't work in this case because the expressions aren't getting evaluated.

Valid bug.

[matthew-dean]

Elevating to medium just because low is like an edge case that may never happen, and this seems like it may reasonably happen more often.

[matthew-dean]

Fixed! - PR needs review - #3223