calc() fix - fixes #974

Author: matthew-dean

lib/less/contexts.js

@@ -73,7 +73,11 @@ contexts.Eval.prototype.outOfParenthesis = function () {
     this.parensStack.pop();
 };
 
+contexts.Eval.prototype.mathOn = true;
 contexts.Eval.prototype.isMathOn = function () {
+    if (!this.mathOn) {
+        return false;
+    }
     return this.strictMath ? (this.parensStack && this.parensStack.length) : true;
 };
 

lib/less/parser/parser.js

@@ -421,7 +421,11 @@ var Parser = function Parser(context, imports, fileInfo) {
                     }
 
                     parserInput.forget();
-                    return new(tree.Call)(name, args, index, fileInfo);
+                    var call = new(tree.Call)(name, args, index, fileInfo);
+                    if (name === 'calc') {
+                        call.mathOff = true;
+                    }
+                    return call;
                 },
 
                 //
@@ -596,7 +600,7 @@ var Parser = function Parser(context, imports, fileInfo) {
                     }
                 },
 
-                // A property entity useing the protective {} e.g. @{prop}
+                // A property entity useing the protective {} e.g. ${prop}
                 propertyCurly: function () {
                     var curly, index = parserInput.i;
 

lib/less/tree/call.js

@@ -29,8 +29,15 @@ Call.prototype.accept = function (visitor) {
 // The function should receive the value, not the variable.
 //
 Call.prototype.eval = function (context) {
-    var args = this.args.map(function (a) { return a.eval(context); }),
-        result, funcCaller = new FunctionCaller(this.name, context, this.getIndex(), this.fileInfo());
+    /* Used for calc() */
+    if (this.mathOff) {
+        context.mathOn = false;
+    }
+    var args = this.args.map(function (a) { return a.eval(context); });
+    if (this.mathOff) {
+        context.mathOn = true;
+    }
+    var result, funcCaller = new FunctionCaller(this.name, context, this.getIndex(), this.fileInfo());
 
     if (funcCaller.isValid()) {
         try {

lib/less/tree/directive.js

@@ -1,5 +1,4 @@
 var Node = require("./node"),
-    JsEvalNode = require("./js-eval-node"),
     Variable = require("./variable"),
     Property = require("./property");
 

lib/less/tree/quoted.js

@@ -0,0 +1,3 @@
+.no-math {
+  width: calc(50% + (25vh - 20px));
+}

lib/less/tree/rule.js

@@ -8,7 +8,7 @@
 .first,
 .planning {
   margin: 10px;
-  total-width: (1 * 6em * 12) + (2em * 12);
+  total-width: 96em;
 }
 .some-inline-comments {
   a: yes /* comment */;

test/css/calc.css

@@ -8,13 +8,17 @@ console.log("\n" + stylize("Less", 'underline') + "\n");
 lessTester.prepBomTest();
 var testMap = [
     [{
-        strictMath: true, 
+        strictMath: false, 
         relativeUrls: true, 
         silent: true, 
         javascriptEnabled: true,
         // Set explicitly for legacy tests for >3.0
         ieCompat: true
     }],
+    [{
+        strictMath: true,
+        ieCompat: true
+    }, "strict-math/"],
     [{strictMath: true, strictUnits: true, javascriptEnabled: true}, "errors/",
         lessTester.testErrors, null],
     [{strictMath: true, strictUnits: true, javascriptEnabled: false}, "no-js-errors/",
@@ -56,7 +60,7 @@ testMap.forEach(function(args) {
     lessTester.runTestSet.apply(lessTester, args)
 });
 lessTester.testSyncronous({syncImport: true}, "import");
-lessTester.testSyncronous({syncImport: true}, "css");
+lessTester.testSyncronous({syncImport: true}, "strict-math/css");
 lessTester.testNoOptions();
 lessTester.testJSImport();
 lessTester.finished();

test/css/comments2.css

@@ -0,0 +1,4 @@
+.no-math {
+  @var: 50vh/2;
+  width: calc(50% + (@var - 20px));
+}

test/css/css.css renamed to test/css/strict-math/css.css

@@ -23,7 +23,7 @@
 @ratio_large: 16;
 @ratio_small: 9;
 
-@media all and (device-aspect-ratio: @ratio_large / @ratio_small) {
+@media all and (device-aspect-ratio: ~"@{ratio_large} / @{ratio_small}") {
    body { max-width: 800px; }
 }
 
@@ -177,7 +177,7 @@ body {
   }
 }
 
-@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
+@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: ~"2/1"), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
   .b {
     background: red;
   }