Use reduce-function-call

Also
- support more complex formulas
- better error message

Author: MoOx

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 1.1.0 - 2014-08-06
+
+* support more complex formulas
+* use `reduce-function-call`
+* better error message
+
+
 # 1.0.0 - 2014-08-04
 
 First release

index.js

@@ -1,70 +1,23 @@
-/*
+/**
  * Module dependencies
  */
 var balanced = require("balanced-match")
+var reduceFunctionCall = require("reduce-function-call")
 
 /**
- * Constantes
- */
-var CALC_FUNC_IDENTIFIER =  "calc"
-var EXPRESSION_OPT_VENDOR_PREFIX = "(\\-[a-z]+\\-)?"
-var EXPRESSION_METHOD_REGEXP = EXPRESSION_OPT_VENDOR_PREFIX + CALC_FUNC_IDENTIFIER
-var EXPRESSION_REGEXP = "\\b" + EXPRESSION_METHOD_REGEXP + "\\("
-
-module.exports = resolveValue
-
-/**
- * Walkthrough all expressions, evaluate them and insert them into the declaration
+ * Expose reduceCssCalc plugin
  *
- * @param {Array} expressions
- * @param {Object} declaration
+ * @type {Function}
  */
-
-function resolveValue(value) {
-  getExpressions(value).forEach(function(expression) {
-    var result = evaluateExpression(expression.body)
-
-    value = value.replace(
-      expression.fn + "(" + expression.body + ")",
-      result.resolved ?
-        result.value :
-        expression.fn + "(" + result.value + ")"
-    )
-  })
-
-  return value
-}
+module.exports = reduceCssCalc
 
 /**
- * Parses expressions in a value
+ * Reduce CSS calc() in a string, whenever it's possible
  *
- * @param {String} value
- * @returns {Array}
- * @api private
+ * @param {String} value css input
  */
-
-function getExpressions(value) {
-  var expressions = []
-  var fnRE = new RegExp(EXPRESSION_METHOD_REGEXP)
-  do {
-    var searchMatch = fnRE.exec(value)
-    var fn = searchMatch[0]
-    var calcStartIndex = searchMatch.index
-    var calcRef = balanced("(", ")", value.substring(calcStartIndex))
-
-    if (!calcRef) {
-      throw new SyntaxError("calc(): missing closing ')' in the value '" + value + "'")
-    }
-    if (calcRef.body === "") {
-      throw new Error("calc(): calc() must contain a non-whitespace string")
-    }
-
-    expressions.push({fn: fn, body: calcRef.body})
-    value = calcRef.post
-  }
-  while (fnRE.test(value))
-
-  return expressions
+function reduceCssCalc(value) {
+  return reduceFunctionCall(value, /((?:\-[a-z]+\-)?calc)\(/, evaluateExpression)
 }
 
 /**
@@ -75,24 +28,34 @@ function getExpressions(value) {
  * @api private
  */
 
-function evaluateExpression (expression) {
-  // Remove method names for possible nested expressions:
-  expression = expression.replace(new RegExp(EXPRESSION_REGEXP, "g"), "(")
+function evaluateExpression (expression, functionIdentifier, call) {
+  if (expression === "") {
+    throw new Error(functionIdentifier + "(): '" + call + "' must contain a non-whitespace string")
+  }
 
   var balancedExpr = balanced("(", ")", expression)
-  if (balancedExpr) {
+  while (balancedExpr) {
     if (balancedExpr.body === "") {
-      throw new Error("calc(): () must contain a non-whitespace string")
+      throw new Error(functionIdentifier + "(): '" + expression + "' must contain a non-whitespace string")
     }
 
-    expression = balancedExpr.pre + evaluateExpression(balancedExpr.body).value + balancedExpr.post
+    var evaluated = evaluateExpression(balancedExpr.body, functionIdentifier, call)
+
+    // if result didn't change since the last try, we consider it won't change anymore
+    if (evaluated === balancedExpr.body) {
+      balancedExpr = false
+    }
+    else {
+      expression = balancedExpr.pre + evaluated + balancedExpr.post
+      balancedExpr = balanced("(", ")", expression)
+    }
   }
 
   var units = getUnitsInExpression(expression)
 
   // If multiple units let the expression be (i.e. browser calc())
   if (units.length > 1) {
-    return {resolved: false, value: expression}
+    return functionIdentifier + "(" + expression + ")"
   }
 
   var unit = units[0] || ""
@@ -112,7 +75,7 @@ function evaluateExpression (expression) {
     result = eval(toEvaluate)
   }
   catch (e) {
-    return {resolved: false, value: expression}
+    return functionIdentifier + "(" + expression + ")"
   }
 
   // Transform back to a percentage result:
@@ -125,7 +88,7 @@ function evaluateExpression (expression) {
     result += unit
   }
 
-  return {resolved: true, value: result}
+  return result
 }
 
 /**

package.json

@@ -20,7 +20,8 @@
     "index.js"
   ],
   "dependencies": {
-    "balanced-match": "~0.1.0"
+    "balanced-match": "~0.1.0",
+    "reduce-function-call": "^1.0.0"
   },
   "devDependencies": {
     "jscs": "^1.5.9",

test/index.js

@@ -51,7 +51,12 @@ test("ignore value around css calc() functions ", function(t) {
 test("reduce complexe css calc()", function(t) {
   t.equal(reduceCssCalc("calc(calc(100 + 10) + 1)"), "111", "integer")
   t.equal(reduceCssCalc("calc(calc(calc(1rem * 0.75) * 1.5) - 1rem)"), "0.125rem", "with a single unit")
-  t.equal(reduceCssCalc("calc(calc(calc(1rem * 0.75) * 1.5) - 1px)"), "calc(1.125rem - 1px)", "multiple units")
+  t.equal(reduceCssCalc("calc(calc(calc(1rem * 0.75) * 1.5) - 1px)"), "calc(1.125rem - 1px)", "multiple units with explicit calc")
+  t.equal(reduceCssCalc("calc(((1rem * 0.75) * 1.5) - 1px)"), "calc(1.125rem - 1px)", "multiple units with implicit calc")
+  t.equal(reduceCssCalc("calc(-1px + (1.5 * (1rem * 0.75)))"), "calc(-1px + 1.125rem)", "multiple units with implicit calc, reverse order")
+  t.equal(reduceCssCalc("calc(2rem * (2 * (2 + 3)) + 4 + (5/2))"), "26.5rem", "complex math formula works correctly")
+
+  t.equal(reduceCssCalc("calc((4 * 2) + 4.2 + 1 + (2rem * .4) + (2px * .4))"), "calc(8 + 4.2 + 1 + 0.8rem + 0.8px)", "handle long formula")
   t.end()
 })
 
@@ -63,3 +68,8 @@ test("reduce prefixed css calc()", function(t) {
   t.equal(reduceCssCalc("-moz-calc(50% - 2em)"), "-moz-calc(50% - 2em)","-moz, multiple unit")
   t.end()
 })
+
+test("ignore unrecognized values", function(t) {
+  t.equal(reduceCssCalc("calc((4px * 2) + 4.2 + a1 + (2rem * .4))"), "calc(8px + 4.2 + a1 + 0.8rem)", "ignore when eval fail")
+  t.end()
+})