Vars storing calculations don't crunch the calculation if the var is used in calc()

[calvinjuarez]

This is likely one of the first workarounds people will try when their calc starts working the way it's designed to (ignoring the content of calc()).

Critically, the calculated value of calc(100% - 10px + 30px) (as shown in the v3.5.0-beta output) is NOT the same as the expected and intuitive calculated value of calc(100% - 40px).

test.less

@foo: 10px;

.test {
	@_calculated: (@foo + 30px);
	width: calc(100% - @_calculated);
}

Less 2 Output & Expected

npm i -g less@2 && lessc --strict-math=on test.less ./test.css

.test {
  width: calc(100% - 40px);
}

(see #3221 (comment))

Less 3 Output

npm i -g less@3.5.0-beta && lessc --strict-math=on test.less ./test.css

.test {
  width: calc(100% - 10px + 30px);
}

[matthew-dean]

@calvinjuarez Okay yeah definitely a bug. I guess for whatever reason I didn't actually add this to tests and thought it was covered. Incidentally, I think this is probably a bug related to the issue I was having trying to get strictMath: 'division' working. That is, it seems like parens are resolved too soon, before it can do the check to see if math should be performed. (See: https://github.com/less/less.js/blob/master/lib/less/contexts.js#L93 and code around it.)

Or maybe that's unrelated since the vars may not be in parens? 🤔

[matthew-dean]

Fixed!