postcss-calc 7.0.1 → 7.0.5

package/dist/lib/reducer.js

@@ -5,19 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _convert = _interopRequireDefault(require("./convert"));
+var _convertUnit = _interopRequireDefault(require("./convertUnit"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function reduce(node, precision) {
-  if (node.type === "MathExpression") return reduceMathExpression(node, precision);
-  return node;
-}
-
-function isEqual(left, right) {
-  return left.type === right.type && left.value === right.value;
-}
-
 function isValueType(type) {
   switch (type) {
     case 'LengthValue':
@@ -34,217 +25,291 @@ function isValueType(type) {
     case 'VminValue':
     case 'VmaxValue':
     case 'PercentageValue':
-    case 'Value':
+    case 'Number':
       return true;
   }
 
   return false;
 }
 
-function convertMathExpression(node, precision) {
-  var nodes = (0, _convert.default)(node.left, node.right, precision);
-  var left = reduce(nodes.left, precision);
-  var right = reduce(nodes.right, precision);
+function flip(operator) {
+  return operator === '+' ? '-' : '+';
+}
+
+function isAddSubOperator(operator) {
+  return operator === '+' || operator === '-';
+}
 
-  if (left.type === "MathExpression" && right.type === "MathExpression") {
-    if (left.operator === '/' && right.operator === '*' || left.operator === '-' && right.operator === '+' || left.operator === '*' && right.operator === '/' || left.operator === '+' && right.operator === '-') {
-      if (isEqual(left.right, right.right)) nodes = (0, _convert.default)(left.left, right.left, precision);else if (isEqual(left.right, right.left)) nodes = (0, _convert.default)(left.left, right.right, precision);
-      left = reduce(nodes.left, precision);
-      right = reduce(nodes.right, precision);
-    }
+function collectAddSubItems(preOperator, node, collected, precision) {
+  if (!isAddSubOperator(preOperator)) {
+    throw new Error(`invalid operator ${preOperator}`);
   }
 
-  node.left = left;
-  node.right = right;
-  return node;
-}
+  var type = node.type;
 
-function flip(operator) {
-  return operator === '+' ? '-' : '+';
-}
+  if (isValueType(type)) {
+    var itemIndex = collected.findIndex(function (x) {
+      return x.node.type === type;
+    });
+
+    if (itemIndex >= 0) {
+      if (node.value === 0) {
+        return;
+      }
+
+      var _covertNodesUnits = covertNodesUnits(collected[itemIndex].node, node, precision),
+          reducedNode = _covertNodesUnits.left,
+          current = _covertNodesUnits.right;
 
-function flipValue(node) {
-  if (isValueType(node.type)) node.value = -node.value;else if (node.type == 'MathExpression') {
-    node.left = flipValue(node.left);
-    node.right = flipValue(node.right);
+      if (collected[itemIndex].preOperator === '-') {
+        collected[itemIndex].preOperator = '+';
+        reducedNode.value *= -1;
+      }
+
+      if (preOperator === "+") {
+        reducedNode.value += current.value;
+      } else {
+        reducedNode.value -= current.value;
+      } // make sure reducedNode.value >= 0
+
+
+      if (reducedNode.value >= 0) {
+        collected[itemIndex] = {
+          node: reducedNode,
+          preOperator: '+'
+        };
+      } else {
+        reducedNode.value *= -1;
+        collected[itemIndex] = {
+          node: reducedNode,
+          preOperator: '-'
+        };
+      }
+    } else {
+      // make sure node.value >= 0
+      if (node.value >= 0) {
+        collected.push({
+          node,
+          preOperator
+        });
+      } else {
+        node.value *= -1;
+        collected.push({
+          node,
+          preOperator: flip(preOperator)
+        });
+      }
+    }
+  } else if (type === "MathExpression") {
+    if (isAddSubOperator(node.operator)) {
+      collectAddSubItems(preOperator, node.left, collected, precision);
+      var collectRightOperator = preOperator === '-' ? flip(node.operator) : node.operator;
+      collectAddSubItems(collectRightOperator, node.right, collected, precision);
+    } else {
+      // * or /
+      var _reducedNode = reduce(node, precision); // prevent infinite recursive call
+
+
+      if (_reducedNode.type !== "MathExpression" || isAddSubOperator(_reducedNode.operator)) {
+        collectAddSubItems(preOperator, _reducedNode, collected, precision);
+      } else {
+        collected.push({
+          node: _reducedNode,
+          preOperator
+        });
+      }
+    }
+  } else {
+    collected.push({
+      node,
+      preOperator
+    });
   }
-  return node;
 }
 
 function reduceAddSubExpression(node, precision) {
-  var _node = node,
-      left = _node.left,
-      right = _node.right,
-      op = _node.operator;
-  if (left.type === 'Function' || right.type === 'Function') return node; // something + 0 => something
-  // something - 0 => something
-
-  if (right.value === 0) return left; // 0 + something => something
-
-  if (left.value === 0 && op === "+") return right; // 0 - something => -something
-
-  if (left.value === 0 && op === "-") return flipValue(right); // value + value
-  // value - value
-
-  if (left.type === right.type && isValueType(left.type)) {
-    node = Object.assign({}, left);
-    if (op === "+") node.value = left.value + right.value;else node.value = left.value - right.value;
-  } // value <op> (expr)
-
-
-  if (isValueType(left.type) && (right.operator === '+' || right.operator === '-') && right.type === 'MathExpression') {
-    // value + (value + something) => (value + value) + something
-    // value + (value - something) => (value + value) - something
-    // value - (value + something) => (value - value) - something
-    // value - (value - something) => (value - value) + something
-    if (left.type === right.left.type) {
-      node = Object.assign({}, node);
-      node.left = reduce({
-        type: 'MathExpression',
-        operator: op,
-        left: left,
-        right: right.left
-      }, precision);
-      node.right = right.right;
-      node.operator = op === '-' ? flip(right.operator) : right.operator;
-      return reduce(node, precision);
-    } // value + (something + value) => (value + value) + something
-    // value + (something - value) => (value - value) + something
-    // value - (something + value) => (value - value) - something
-    // value - (something - value) => (value + value) - something
-    else if (left.type === right.right.type) {
-        node = Object.assign({}, node);
-        node.left = reduce({
-          type: 'MathExpression',
-          operator: op === '-' ? flip(right.operator) : right.operator,
-          left: left,
-          right: right.right
-        }, precision);
-        node.right = right.left;
-        return reduce(node, precision);
-      } // value - (something + something) => value - something - something
-      else if (op === '-' && right.operator === '+') {
-          node = Object.assign({}, node);
-          node.right.operator = '-';
-          return reduce(node, precision);
-        }
-  } // (expr) <op> value
-
-
-  if (left.type === 'MathExpression' && (left.operator === '+' || left.operator === '-') && isValueType(right.type)) {
-    // (value + something) + value => (value + value) + something
-    // (value - something) + value => (value + value) - something
-    // (value + something) - value => (value - value) + something
-    // (value - something) - value => (value - value) - something
-    if (right.type === left.left.type) {
-      node = Object.assign({}, left);
-      node.left = reduce({
-        type: 'MathExpression',
-        operator: op,
-        left: left.left,
-        right: right
-      }, precision);
-      return reduce(node, precision);
-    } // (something + value) + value => something + (value + value)
-    // (something - value1) + value2 => something - (value2 - value1)
-    // (something + value) - value => something + (value - value)
-    // (something - value) - value => something - (value + value)
-    else if (right.type === left.right.type) {
-        node = Object.assign({}, left);
-
-        if (left.operator === '-') {
-          node.right = reduce({
-            type: 'MathExpression',
-            operator: flip(op),
-            left: left.right,
-            right: right
-          }, precision);
-
-          if (node.right.value && node.right.value < 0) {
-            node.right.value = Math.abs(node.right.value);
-            node.operator = '+';
-          } else {
-            node.operator = left.operator;
-          }
-        } else {
-          node.right = reduce({
-            type: 'MathExpression',
-            operator: op,
-            left: left.right,
-            right: right
-          }, precision);
-        }
-
-        if (node.right.value < 0) {
-          node.right.value *= -1;
-          node.operator = node.operator === '-' ? '+' : '-';
-        }
-
-        return reduce(node, precision);
-      }
+  var collected = [];
+  collectAddSubItems('+', node, collected, precision);
+  var withoutZeroItem = collected.filter(function (item) {
+    return !(isValueType(item.node.type) && item.node.value === 0);
+  });
+  var firstNonZeroItem = withoutZeroItem[0]; // could be undefined
+  // prevent producing "calc(-var(--a))" or "calc()"
+  // which is invalid css
+
+  if (!firstNonZeroItem || firstNonZeroItem.preOperator === '-' && !isValueType(firstNonZeroItem.node.type)) {
+    var firstZeroItem = collected.find(function (item) {
+      return isValueType(item.node.type) && item.node.value === 0;
+    });
+    withoutZeroItem.unshift(firstZeroItem);
+  } // make sure the preOperator of the first item is +
+
+
+  if (withoutZeroItem[0].preOperator === '-' && isValueType(withoutZeroItem[0].node.type)) {
+    withoutZeroItem[0].node.value *= -1;
+    withoutZeroItem[0].preOperator = '+';
   }
 
-  if (left.type === 'MathExpression' && right.type === 'MathExpression' && op === '-' && right.operator === '-') {
-    node.right.operator = flip(node.right.operator);
+  var root = withoutZeroItem[0].node;
+
+  for (var i = 1; i < withoutZeroItem.length; i++) {
+    root = {
+      type: 'MathExpression',
+      operator: withoutZeroItem[i].preOperator,
+      left: root,
+      right: withoutZeroItem[i].node
+    };
   }
 
-  return node;
+  return root;
 }
 
 function reduceDivisionExpression(node) {
-  if (!isValueType(node.right.type)) return node;
-  if (node.right.type !== 'Value') throw new Error(`Cannot divide by "${node.right.unit}", number expected`);
-  if (node.right.value === 0) throw new Error('Cannot divide by zero'); // something / value
+  if (!isValueType(node.right.type)) {
+    return node;
+  }
 
-  if (isValueType(node.left.type)) {
-    node.left.value /= node.right.value;
-    return node.left;
+  if (node.right.type !== 'Number') {
+    throw new Error(`Cannot divide by "${node.right.unit}", number expected`);
   }
 
-  return node;
+  return applyNumberDivision(node.left, node.right.value);
+} // apply (expr) / number
+
+
+function applyNumberDivision(node, divisor) {
+  if (divisor === 0) {
+    throw new Error('Cannot divide by zero');
+  }
+
+  if (isValueType(node.type)) {
+    node.value /= divisor;
+    return node;
+  }
+
+  if (node.type === "MathExpression" && isAddSubOperator(node.operator)) {
+    // turn (a + b) / num into a/num + b/num
+    // is good for further reduction
+    // checkout the test case
+    // "should reduce division before reducing additions"
+    return {
+      type: "MathExpression",
+      operator: node.operator,
+      left: applyNumberDivision(node.left, divisor),
+      right: applyNumberDivision(node.right, divisor)
+    };
+  } // it is impossible to reduce it into a single value
+  // .e.g the node contains css variable
+  // so we just preserve the division and let browser do it
+
+
+  return {
+    type: "MathExpression",
+    operator: '/',
+    left: node,
+    right: {
+      type: "Number",
+      value: divisor
+    }
+  };
 }
 
 function reduceMultiplicationExpression(node) {
-  // (expr) * value
-  if (node.left.type === 'MathExpression' && node.right.type === 'Value') {
-    if (isValueType(node.left.left.type) && isValueType(node.left.right.type)) {
-      node.left.left.value *= node.right.value;
-      node.left.right.value *= node.right.value;
-      return node.left;
-    }
-  } // something * value
-  else if (isValueType(node.left.type) && node.right.type === 'Value') {
-      node.left.value *= node.right.value;
-      return node.left;
-    } // value * (expr)
-    else if (node.left.type === 'Value' && node.right.type === 'MathExpression') {
-        if (isValueType(node.right.left.type) && isValueType(node.right.right.type)) {
-          node.right.left.value *= node.left.value;
-          node.right.right.value *= node.left.value;
-          return node.right;
-        }
-      } // value * something
-      else if (node.left.type === 'Value' && isValueType(node.right.type)) {
-          node.right.value *= node.left.value;
-          return node.right;
-        }
+  // (expr) * number
+  if (node.right.type === 'Number') {
+    return applyNumberMultiplication(node.left, node.right.value);
+  } // number * (expr)
+
+
+  if (node.left.type === 'Number') {
+    return applyNumberMultiplication(node.right, node.left.value);
+  }
 
   return node;
+} // apply (expr) / number
+
+
+function applyNumberMultiplication(node, multiplier) {
+  if (isValueType(node.type)) {
+    node.value *= multiplier;
+    return node;
+  }
+
+  if (node.type === "MathExpression" && isAddSubOperator(node.operator)) {
+    // turn (a + b) * num into a*num + b*num
+    // is good for further reduction
+    // checkout the test case
+    // "should reduce multiplication before reducing additions"
+    return {
+      type: "MathExpression",
+      operator: node.operator,
+      left: applyNumberMultiplication(node.left, multiplier),
+      right: applyNumberMultiplication(node.right, multiplier)
+    };
+  } // it is impossible to reduce it into a single value
+  // .e.g the node contains css variable
+  // so we just preserve the division and let browser do it
+
+
+  return {
+    type: "MathExpression",
+    operator: '*',
+    left: node,
+    right: {
+      type: "Number",
+      value: multiplier
+    }
+  };
 }
 
-function reduceMathExpression(node, precision) {
-  node = convertMathExpression(node, precision);
+function covertNodesUnits(left, right, precision) {
+  switch (left.type) {
+    case 'LengthValue':
+    case 'AngleValue':
+    case 'TimeValue':
+    case 'FrequencyValue':
+    case 'ResolutionValue':
+      if (right.type === left.type && right.unit && left.unit) {
+        var converted = (0, _convertUnit.default)(right.value, right.unit, left.unit, precision);
+        right = {
+          type: left.type,
+          value: converted,
+          unit: left.unit
+        };
+      }
+
+      return {
+        left,
+        right
+      };
 
-  switch (node.operator) {
-    case "+":
-    case "-":
+    default:
+      return {
+        left,
+        right
+      };
+  }
+}
+
+function reduce(node, precision) {
+  if (node.type === "MathExpression") {
+    if (isAddSubOperator(node.operator)) {
+      // reduceAddSubExpression will call reduce recursively
       return reduceAddSubExpression(node, precision);
+    }
+
+    node.left = reduce(node.left, precision);
+    node.right = reduce(node.right, precision);
 
-    case "/":
-      return reduceDivisionExpression(node, precision);
+    switch (node.operator) {
+      case "/":
+        return reduceDivisionExpression(node, precision);
+
+      case "*":
+        return reduceMultiplicationExpression(node, precision);
+    }
 
-    case "*":
-      return reduceMultiplicationExpression(node);
+    return node;
   }
 
   return node;

package/dist/lib/stringifier.js

@@ -28,13 +28,25 @@ function stringify(node, prec) {
             right = node.right,
             op = node.operator;
         var str = "";
-        if (left.type === 'MathExpression' && order[op] < order[left.operator]) str += `(${stringify(left, prec)})`;else str += stringify(left, prec);
+
+        if (left.type === 'MathExpression' && order[op] < order[left.operator]) {
+          str += `(${stringify(left, prec)})`;
+        } else {
+          str += stringify(left, prec);
+        }
+
         str += order[op] ? ` ${node.operator} ` : node.operator;
-        if (right.type === 'MathExpression' && order[op] < order[right.operator]) str += `(${stringify(right, prec)})`;else str += stringify(right, prec);
+
+        if (right.type === 'MathExpression' && order[op] < order[right.operator]) {
+          str += `(${stringify(right, prec)})`;
+        } else {
+          str += stringify(right, prec);
+        }
+
         return str;
       }
 
-    case "Value":
+    case 'Number':
       return round(node.value, prec);
 
     case 'Function':
@@ -47,8 +59,9 @@ function stringify(node, prec) {
 
 function _default(calc, node, originalValue, options, result, item) {
   var str = stringify(node, options.precision);
+  var shouldPrintCalc = node.type === "MathExpression" || node.type === "Function";
 
-  if (node.type === "MathExpression") {
+  if (shouldPrintCalc) {
     // if calc expression couldn't be resolved to a single value, re-wrap it as
     // a calc()
     str = `${calc}(${str})`; // if the warnWhenCannotResolve option is on, inform the user that the calc

package/dist/lib/transform.js

@@ -23,7 +23,10 @@ var MATCH_CALC = /((?:-(moz|webkit)-)?calc)/i;
 function transformValue(value, options, result, item) {
   return (0, _postcssValueParser.default)(value).walk(function (node) {
     // skip anything which isn't a calc() function
-    if (node.type !== 'function' || !MATCH_CALC.test(node.value)) return node; // stringify calc expression and produce an AST
+    if (node.type !== 'function' || !MATCH_CALC.test(node.value)) {
+      return node;
+    } // stringify calc expression and produce an AST
+
 
     var contents = _postcssValueParser.default.stringify(node.nodes);
 
@@ -31,11 +34,12 @@ function transformValue(value, options, result, item) {
     // or a simplified calc expression
 
 
-    var reducedAst = (0, _reducer.default)(ast, options.precision, item); // stringify AST and write it back
+    var reducedAst = (0, _reducer.default)(ast, options.precision); // stringify AST and write it back
 
     node.type = 'word';
     node.value = (0, _stringifier.default)(node.value, reducedAst, value, options, result, item);
-  }, true).toString();
+    return false;
+  }).toString();
 }
 
 function transformSelector(value, options, result, item) {
@@ -49,7 +53,10 @@ function transformSelector(value, options, result, item) {
       // e.g. the "calc(3*3)" part of "div:nth-child(2n + calc(3*3))"
 
 
-      if (node.type === 'tag') node.value = transformValue(node.value, options, result, item);
+      if (node.type === 'tag') {
+        node.value = transformValue(node.value, options, result, item);
+      }
+
       return;
     });
   }).processSync(value);
@@ -65,7 +72,9 @@ var _default = function _default(node, property, options, result) {
     var clone = node.clone();
     clone[property] = value;
     node.parent.insertBefore(node, clone);
-  } else node[property] = value;
+  } else {
+    node[property] = value;
+  }
 };
 
 exports.default = _default;