postcss-calc 7.0.2 → 8.0.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# 8.0.0
+
+- Breaking: Updated PostCSS from v7.x to v8.x ([#125](https://github.com/postcss/postcss-calc/pull/125))
+
+# 7.0.5
+
+- Fixed: reduction
+
+# 7.0.4
+
+- Fixed: strips away important factors from multiplications in calc() ([#107](https://github.com/postcss/postcss-calc/issues/107))
+
+# 7.0.3
+
+- Fixed: substracted css-variable from zero ([#111](https://github.com/postcss/postcss-calc/issues/111))
+
 # 7.0.2
 
 - Fixed: incorrect reduction of subtraction from zero ([#88](https://github.com/postcss/postcss-calc/issues/88))
@@ -57,7 +73,7 @@
 # 5.2.1 - 2016-04-10
 
 - Fixed: support for multiline value
-  ([#27](https://github.com/postcss/postcss-calc/pull/27))

+  ([#27](https://github.com/postcss/postcss-calc/pull/27))

 
 # 5.2.0 - 2016-01-08
 

package/dist/index.js

@@ -5,38 +5,47 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _postcss = require("postcss");
-
 var _transform = _interopRequireDefault(require("./lib/transform"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = (0, _postcss.plugin)('postcss-calc', function (opts) {
-  var options = Object.assign({
+function pluginCreator(opts) {
+  const options = Object.assign({
     precision: 5,
     preserve: false,
     warnWhenCannotResolve: false,
     mediaQueries: false,
     selectors: false
   }, opts);
-  return function (css, result) {
-    css.walk(function (node) {
-      var type = node.type;
-
-      if (type === 'decl') {
-        (0, _transform.default)(node, "value", options, result);
-      }
-
-      if (type === 'atrule' && options.mediaQueries) {
-        (0, _transform.default)(node, "params", options, result);
-      }
-
-      if (type === 'rule' && options.selectors) {
-        (0, _transform.default)(node, "selector", options, result);
-      }
-    });
+  return {
+    postcssPlugin: 'postcss-calc',
+
+    OnceExit(css, {
+      result
+    }) {
+      css.walk(node => {
+        const {
+          type
+        } = node;
+
+        if (type === 'decl') {
+          (0, _transform.default)(node, "value", options, result);
+        }
+
+        if (type === 'atrule' && options.mediaQueries) {
+          (0, _transform.default)(node, "params", options, result);
+        }
+
+        if (type === 'rule' && options.selectors) {
+          (0, _transform.default)(node, "selector", options, result);
+        }
+      });
+    }
+
   };
-});
+}
 
+pluginCreator.postcss = true;
+var _default = pluginCreator;
 exports.default = _default;
 module.exports = exports.default;

package/dist/lib/convertUnit.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var conversions = {
+const conversions = {
   // Absolute length units
   'px': {
     'px': 1,
@@ -131,8 +131,8 @@ var conversions = {
 };
 
 function convertUnit(value, sourceUnit, targetUnit, precision) {
-  var sourceUnitNormalized = sourceUnit.toLowerCase();
-  var targetUnitNormalized = targetUnit.toLowerCase();
+  const sourceUnitNormalized = sourceUnit.toLowerCase();
+  const targetUnitNormalized = targetUnit.toLowerCase();
 
   if (!conversions[targetUnitNormalized]) {
     throw new Error("Cannot convert to " + targetUnit);
@@ -142,7 +142,7 @@ function convertUnit(value, sourceUnit, targetUnit, precision) {
     throw new Error("Cannot convert from " + sourceUnit + " to " + targetUnit);
   }
 
-  var converted = conversions[targetUnitNormalized][sourceUnitNormalized] * value;
+  const converted = conversions[targetUnitNormalized][sourceUnitNormalized] * value;
 
   if (precision !== false) {
     precision = Math.pow(10, parseInt(precision) || 5);

package/dist/lib/reducer.js

@@ -9,10 +9,6 @@ var _convertUnit = _interopRequireDefault(require("./convertUnit"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function isEqual(left, right) {
-  return left.type === right.type && left.value === right.value;
-}
-
 function isValueType(type) {
   switch (type) {
     case 'LengthValue':
@@ -40,178 +36,126 @@ function flip(operator) {
   return operator === '+' ? '-' : '+';
 }
 
-function flipValue(node) {
-  if (isValueType(node.type)) {
-    node.value = -node.value;
-  } else if (node.type === 'MathExpression') {
-    if (node.operator === '*' || node.operator === '/') {
-      node.left = flipValue(node.left);
-    } else {
-      node.left = flipValue(node.left);
-      node.right = flipValue(node.right);
-    }
-  }
-
-  return node;
+function isAddSubOperator(operator) {
+  return operator === '+' || operator === '-';
 }
 
-function reduceAddSubExpression(node, precision) {
-  // something + 0 => something
-  // something - 0 => something
-  if (isValueType(node.right.type) && node.right.value === 0) {
-    return node.left;
-  } // 0 + something => something
+function collectAddSubItems(preOperator, node, collected, precision) {
+  if (!isAddSubOperator(preOperator)) {
+    throw new Error(`invalid operator ${preOperator}`);
+  }
 
+  const type = node.type;
 
-  if (isValueType(node.left.type) && node.left.value === 0 && node.operator === "+") {
-    return node.right;
-  } // 0 - something => -something
+  if (isValueType(type)) {
+    const itemIndex = collected.findIndex(x => x.node.type === type);
 
+    if (itemIndex >= 0) {
+      if (node.value === 0) {
+        return;
+      }
 
-  if (isValueType(node.left.type) && node.left.value === 0 && node.operator === "-" && node.right.type !== "Function") {
-    return flipValue(node.right);
-  } // value + value
-  // value - value
+      const {
+        left: reducedNode,
+        right: current
+      } = covertNodesUnits(collected[itemIndex].node, node, precision);
 
+      if (collected[itemIndex].preOperator === '-') {
+        collected[itemIndex].preOperator = '+';
+        reducedNode.value *= -1;
+      }
 
-  if (isValueType(node.left.type) && node.left.type === node.right.type) {
-    var operator = node.operator;
+      if (preOperator === "+") {
+        reducedNode.value += current.value;
+      } else {
+        reducedNode.value -= current.value;
+      } // make sure reducedNode.value >= 0
 
-    var _covertNodesUnits = covertNodesUnits(node.left, node.right, precision),
-        left = _covertNodesUnits.left,
-        right = _covertNodesUnits.right;
 
-    if (operator === "+") {
-      left.value += right.value;
+      if (reducedNode.value >= 0) {
+        collected[itemIndex] = {
+          node: reducedNode,
+          preOperator: '+'
+        };
+      } else {
+        reducedNode.value *= -1;
+        collected[itemIndex] = {
+          node: reducedNode,
+          preOperator: '-'
+        };
+      }
     } else {
-      left.value -= right.value;
-    }
-
-    return left;
-  } // value <op> (expr)
-
-
-  if (node.right.type === 'MathExpression' && (node.right.operator === '+' || node.right.operator === '-')) {
-    // something - (something + something) => something - something - something
-    // something - (something - something) => something - something + something
-    if ((node.right.operator === '+' || node.right.operator === '-') && node.operator === '-') {
-      node.right.operator = flip(node.right.operator);
-    }
-
-    if (isValueType(node.left.type)) {
-      // value + (value + something) => value + something
-      // value + (value - something) => value - something
-      // value - (value + something) => value - something
-      // value - (value - something) => value + something
-      if (node.left.type === node.right.left.type) {
-        var _left = node.left,
-            _operator = node.operator,
-            _right = node.right;
-        node.left = reduce({
-          type: 'MathExpression',
-          operator: _operator,
-          left: _left,
-          right: _right.left
+      // make sure node.value >= 0
+      if (node.value >= 0) {
+        collected.push({
+          node,
+          preOperator
         });
-        node.operator = _right.operator;
-        node.right = _right.right;
-        return reduce(node, precision);
-      } // something + (something + value) => dimension + something
-      // something + (something - value) => dimension + something
-      // something - (something + value) => dimension - something
-      // something - (something - value) => dimension - something
-
-
-      if (node.left.type === node.right.right.type) {
-        var _left2 = node.left,
-            _right2 = node.right;
-        node.left = reduce({
-          type: 'MathExpression',
-          operator: _right2.operator,
-          left: _left2,
-          right: _right2.right
+      } else {
+        node.value *= -1;
+        collected.push({
+          node,
+          preOperator: flip(preOperator)
         });
-        node.right = _right2.left;
-        return reduce(node, precision);
       }
     }
-  } // (expr) <op> value
-
-
-  if (node.left.type === 'MathExpression' && (node.left.operator === '+' || node.left.operator === '-') && isValueType(node.right.type)) {
-    // (value + something) + value => value + something
-    // (value - something) + value => value - something
-    // (value + something) - value => value + something
-    // (value - something) - value => value - something
-    if (node.right.type === node.left.left.type) {
-      var _left3 = node.left,
-          _operator2 = node.operator,
-          _right3 = node.right;
-      _left3.left = reduce({
-        type: 'MathExpression',
-        operator: _operator2,
-        left: _left3.left,
-        right: _right3
-      }, precision);
-      return reduce(_left3, precision);
-    } // (something + dimension) + dimension => something + dimension
-    // (something - dimension) + dimension => something - dimension
-    // (something + dimension) - dimension => something + dimension
-    // (something - dimension) - dimension => something - dimension
-
-
-    if (node.right.type === node.left.right.type) {
-      var _left4 = node.left,
-          _operator3 = node.operator,
-          _right4 = node.right;
-
-      if (_left4.operator === '-') {
-        _left4.operator = _operator3 === '-' ? '-' : '+';
-        _left4.right = reduce({
-          type: 'MathExpression',
-          operator: _operator3 === '-' ? '+' : '-',
-          left: _right4,
-          right: _left4.right
-        }, precision);
-      } else {
-        _left4.right = reduce({
-          type: 'MathExpression',
-          operator: _operator3,
-          left: _left4.right,
-          right: _right4
-        }, precision);
-      }
+  } else if (type === "MathExpression") {
+    if (isAddSubOperator(node.operator)) {
+      collectAddSubItems(preOperator, node.left, collected, precision);
+      const collectRightOperator = preOperator === '-' ? flip(node.operator) : node.operator;
+      collectAddSubItems(collectRightOperator, node.right, collected, precision);
+    } else {
+      // * or /
+      const reducedNode = reduce(node, precision); // prevent infinite recursive call
 
-      if (_left4.right.value < 0) {
-        _left4.right.value *= -1;
-        _left4.operator = _left4.operator === '-' ? '+' : '-';
+      if (reducedNode.type !== "MathExpression" || isAddSubOperator(reducedNode.operator)) {
+        collectAddSubItems(preOperator, reducedNode, collected, precision);
+      } else {
+        collected.push({
+          node: reducedNode,
+          preOperator
+        });
       }
-
-      _left4.parenthesized = node.parenthesized;
-      return reduce(_left4, precision);
     }
-  } // (expr) + (expr) => number
-  // (expr) - (expr) => number
-
+  } else {
+    collected.push({
+      node,
+      preOperator
+    });
+  }
+}
 
-  if (node.right.type === 'MathExpression' && node.left.type === 'MathExpression') {
-    if (isEqual(node.left.right, node.right.right)) {
-      var newNodes = covertNodesUnits(node.left.left, node.right.left, precision);
-      node.left = newNodes.left;
-      node.right = newNodes.right;
-      return reduce(node);
-    }
+function reduceAddSubExpression(node, precision) {
+  const collected = [];
+  collectAddSubItems('+', node, collected, precision);
+  const withoutZeroItem = collected.filter(item => !(isValueType(item.node.type) && item.node.value === 0));
+  const 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)) {
+    const firstZeroItem = collected.find(item => 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 (isEqual(node.left.right, node.right.left)) {
-      var _newNodes = covertNodesUnits(node.left.left, node.right.right, precision);
+  let root = withoutZeroItem[0].node;
 
-      node.left = _newNodes.left;
-      node.right = _newNodes.right;
-      return reduce(node);
-    }
+  for (let 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) {
@@ -223,51 +167,93 @@ function reduceDivisionExpression(node) {
     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
+  return applyNumberDivision(node.left, node.right.value);
+} // apply (expr) / number
 
 
-  if (isValueType(node.left.type)) {
-    node.left.value /= node.right.value;
-    return node.left;
+function applyNumberDivision(node, divisor) {
+  if (divisor === 0) {
+    throw new Error('Cannot divide by zero');
   }
 
-  return node;
+  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) * number
-  if (node.left.type === 'MathExpression' && node.right.type === 'Number') {
-    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 * number
-
-
-  if (isValueType(node.left.type) && node.right.type === 'Number') {
-    node.left.value *= node.right.value;
-    return node.left;
+  if (node.right.type === 'Number') {
+    return applyNumberMultiplication(node.left, node.right.value);
   } // number * (expr)
 
 
-  if (node.left.type === 'Number' && 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;
-    }
-  } // number * something
+  if (node.left.type === 'Number') {
+    return applyNumberMultiplication(node.right, node.left.value);
+  }
+
+  return node;
+} // apply (expr) / number
 
 
-  if (node.left.type === 'Number' && isValueType(node.right.type)) {
-    node.right.value *= node.left.value;
-    return node.right;
+function applyNumberMultiplication(node, multiplier) {
+  if (isValueType(node.type)) {
+    node.value *= multiplier;
+    return node;
   }
 
-  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 covertNodesUnits(left, right, precision) {
@@ -278,7 +264,7 @@ function covertNodesUnits(left, right, precision) {
     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);
+        const converted = (0, _convertUnit.default)(right.value, right.unit, left.unit, precision);
         right = {
           type: left.type,
           value: converted,
@@ -301,14 +287,15 @@ function covertNodesUnits(left, right, precision) {
 
 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);
 
     switch (node.operator) {
-      case "+":
-      case "-":
-        return reduceAddSubExpression(node, precision);
-
       case "/":
         return reduceDivisionExpression(node, precision);
 

package/dist/lib/stringifier.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = _default;
-var order = {
+const order = {
   "*": 0,
   "/": 0,
   "+": 1,
@@ -13,7 +13,7 @@ var order = {
 
 function round(value, prec) {
   if (prec !== false) {
-    var precision = Math.pow(10, prec);
+    const precision = Math.pow(10, prec);
     return Math.round(value * precision) / precision;
   }
 
@@ -24,10 +24,12 @@ function stringify(node, prec) {
   switch (node.type) {
     case "MathExpression":
       {
-        var left = node.left,
-            right = node.right,
-            op = node.operator;
-        var str = "";
+        const {
+          left,
+          right,
+          operator: op
+        } = node;
+        let str = "";
 
         if (left.type === 'MathExpression' && order[op] < order[left.operator]) {
           str += `(${stringify(left, prec)})`;
@@ -58,8 +60,8 @@ 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";
+  let str = stringify(node, options.precision);
+  const shouldPrintCalc = node.type === "MathExpression" || node.type === "Function";
 
   if (shouldPrintCalc) {
     // if calc expression couldn't be resolved to a single value, re-wrap it as

package/dist/lib/transform.js

@@ -18,23 +18,23 @@ var _stringifier = _interopRequireDefault(require("./stringifier"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line import/no-unresolved
-var MATCH_CALC = /((?:-(moz|webkit)-)?calc)/i;
+const MATCH_CALC = /((?:-(moz|webkit)-)?calc)/i;
 
 function transformValue(value, options, result, item) {
-  return (0, _postcssValueParser.default)(value).walk(function (node) {
+  return (0, _postcssValueParser.default)(value).walk(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
 
 
-    var contents = _postcssValueParser.default.stringify(node.nodes);
+    const contents = _postcssValueParser.default.stringify(node.nodes);
 
-    var ast = _parser.parser.parse(contents); // reduce AST to its simplest form, that is, either to a single value
+    const ast = _parser.parser.parse(contents); // reduce AST to its simplest form, that is, either to a single value
     // or a simplified calc expression
 
 
-    var reducedAst = (0, _reducer.default)(ast, options.precision); // stringify AST and write it back
+    const 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);
@@ -43,8 +43,8 @@ function transformValue(value, options, result, item) {
 }
 
 function transformSelector(value, options, result, item) {
-  return (0, _postcssSelectorParser.default)(function (selectors) {
-    selectors.walk(function (node) {
+  return (0, _postcssSelectorParser.default)(selectors => {
+    selectors.walk(node => {
       // attribute value
       // e.g. the "calc(3*3)" part of "div[data-size="calc(3*3)"]"
       if (node.type === 'attribute' && node.value) {
@@ -62,14 +62,14 @@ function transformSelector(value, options, result, item) {
   }).processSync(value);
 }
 
-var _default = function _default(node, property, options, result) {
-  var value = property === "selector" ? transformSelector(node[property], options, result, node) : transformValue(node[property], options, result, node); // if the preserve option is enabled and the value has changed, write the
+var _default = (node, property, options, result) => {
+  const value = property === "selector" ? transformSelector(node[property], options, result, node) : transformValue(node[property], options, result, node); // if the preserve option is enabled and the value has changed, write the
   // transformed value into a cloned node which is inserted before the current
   // node, preserving the original value. Otherwise, overwrite the original
   // value.
 
   if (options.preserve && node[property] !== value) {
-    var clone = node.clone();
+    const clone = node.clone();
     clone[property] = value;
     node.parent.insertBefore(node, clone);
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-calc",
-  "version": "7.0.2",
+  "version": "8.0.0",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
     "css",
@@ -36,22 +36,25 @@
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/register": "^7.0.0",
-    "ava": "^1.4.1",
+    "ava": "^3.15.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-add-module-exports": "^1.0.0",
-    "cross-env": "^5.2.0",
-    "del-cli": "^1.1.0",
+    "cross-env": "^7.0.0",
+    "del-cli": "^3.0.0",
     "eslint": "^5.7.0",
     "eslint-config-i-am-meticulous": "^11.0.0",
     "eslint-plugin-babel": "^5.2.1",
     "eslint-plugin-import": "^2.14.0",
-    "jison-gho": "^0.6.1-215"
+    "jison-gho": "^0.6.1-216",
+    "postcss": "^8.2.2"
   },
   "dependencies": {
-    "postcss": "^7.0.27",
     "postcss-selector-parser": "^6.0.2",
     "postcss-value-parser": "^4.0.2"
   },
+  "peerDependencies": {
+    "postcss": "^8.2.2"
+  },
   "ava": {
     "require": [
       "@babel/register",