postcss-calc 8.2.0 → 8.2.4

package/src/index.js

@@ -0,0 +1,51 @@
+'use strict';
+const transform = require('./lib/transform.js');
+
+/**
+ * @typedef {{precision?: number | false,
+ *          preserve?: boolean,
+ *          warnWhenCannotResolve?: boolean,
+ *          mediaQueries?: boolean,
+ *          selectors?: boolean}} PostCssCalcOptions
+ */
+/**
+ * @type {import('postcss').PluginCreator<PostCssCalcOptions>}
+ * @param {PostCssCalcOptions} opts
+ * @return {import('postcss').Plugin}
+ */
+function pluginCreator(opts) {
+  const options = Object.assign(
+    {
+      precision: 5,
+      preserve: false,
+      warnWhenCannotResolve: false,
+      mediaQueries: false,
+      selectors: false,
+    },
+    opts
+  );
+
+  return {
+    postcssPlugin: 'postcss-calc',
+    OnceExit(css, { result }) {
+      css.walk((node) => {
+        const { type } = node;
+        if (type === 'decl') {
+          transform(node, 'value', options, result);
+        }
+
+        if (type === 'atrule' && options.mediaQueries) {
+          transform(node, 'params', options, result);
+        }
+
+        if (type === 'rule' && options.selectors) {
+          transform(node, 'selector', options, result);
+        }
+      });
+    },
+  };
+}
+
+pluginCreator.postcss = true;
+
+module.exports = pluginCreator;

package/src/lib/convertUnit.js

@@ -0,0 +1,160 @@
+'use strict';
+/**
+ * @type {{[key:string]: {[key:string]: number}}}
+ */
+const conversions = {
+  // Absolute length units
+  px: {
+    px: 1,
+    cm: 96 / 2.54,
+    mm: 96 / 25.4,
+    q: 96 / 101.6,
+    in: 96,
+    pt: 96 / 72,
+    pc: 16,
+  },
+  cm: {
+    px: 2.54 / 96,
+    cm: 1,
+    mm: 0.1,
+    q: 0.025,
+    in: 2.54,
+    pt: 2.54 / 72,
+    pc: 2.54 / 6,
+  },
+  mm: {
+    px: 25.4 / 96,
+    cm: 10,
+    mm: 1,
+    q: 0.25,
+    in: 25.4,
+    pt: 25.4 / 72,
+    pc: 25.4 / 6,
+  },
+  q: {
+    px: 101.6 / 96,
+    cm: 40,
+    mm: 4,
+    q: 1,
+    in: 101.6,
+    pt: 101.6 / 72,
+    pc: 101.6 / 6,
+  },
+  in: {
+    px: 1 / 96,
+    cm: 1 / 2.54,
+    mm: 1 / 25.4,
+    q: 1 / 101.6,
+    in: 1,
+    pt: 1 / 72,
+    pc: 1 / 6,
+  },
+  pt: {
+    px: 0.75,
+    cm: 72 / 2.54,
+    mm: 72 / 25.4,
+    q: 72 / 101.6,
+    in: 72,
+    pt: 1,
+    pc: 12,
+  },
+  pc: {
+    px: 0.0625,
+    cm: 6 / 2.54,
+    mm: 6 / 25.4,
+    q: 6 / 101.6,
+    in: 6,
+    pt: 6 / 72,
+    pc: 1,
+  },
+  // Angle units
+  deg: {
+    deg: 1,
+    grad: 0.9,
+    rad: 180 / Math.PI,
+    turn: 360,
+  },
+  grad: {
+    deg: 400 / 360,
+    grad: 1,
+    rad: 200 / Math.PI,
+    turn: 400,
+  },
+  rad: {
+    deg: Math.PI / 180,
+    grad: Math.PI / 200,
+    rad: 1,
+    turn: Math.PI * 2,
+  },
+  turn: {
+    deg: 1 / 360,
+    grad: 0.0025,
+    rad: 0.5 / Math.PI,
+    turn: 1,
+  },
+  // Duration units
+  s: {
+    s: 1,
+    ms: 0.001,
+  },
+  ms: {
+    s: 1000,
+    ms: 1,
+  },
+  // Frequency units
+  hz: {
+    hz: 1,
+    khz: 1000,
+  },
+  khz: {
+    hz: 0.001,
+    khz: 1,
+  },
+  // Resolution units
+  dpi: {
+    dpi: 1,
+    dpcm: 1 / 2.54,
+    dppx: 1 / 96,
+  },
+  dpcm: {
+    dpi: 2.54,
+    dpcm: 1,
+    dppx: 2.54 / 96,
+  },
+  dppx: {
+    dpi: 96,
+    dpcm: 96 / 2.54,
+    dppx: 1,
+  },
+};
+/**
+ * @param {number} value
+ * @param {string} sourceUnit
+ * @param {string} targetUnit
+ * @param {number|false} precision
+ */
+function convertUnit(value, sourceUnit, targetUnit, precision) {
+  const sourceUnitNormalized = sourceUnit.toLowerCase();
+  const targetUnitNormalized = targetUnit.toLowerCase();
+
+  if (!conversions[targetUnitNormalized]) {
+    throw new Error('Cannot convert to ' + targetUnit);
+  }
+
+  if (!conversions[targetUnitNormalized][sourceUnitNormalized]) {
+    throw new Error('Cannot convert from ' + sourceUnit + ' to ' + targetUnit);
+  }
+
+  const converted =
+    conversions[targetUnitNormalized][sourceUnitNormalized] * value;
+
+  if (precision !== false) {
+    precision = Math.pow(10, Math.ceil(precision) || 5);
+
+    return Math.round(converted * precision) / precision;
+  }
+
+  return converted;
+}
+
+module.exports = convertUnit;

package/{dist → src}/lib/reducer.js

@@ -1,13 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _convertUnit = _interopRequireDefault(require("./convertUnit"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+'use strict';
+const convertUnit = require('./convertUnit.js');
 
 /**
  * @param {import('../parser').CalcNode} node
@@ -32,159 +24,153 @@ function isValueType(node) {
     case 'Number':
       return true;
   }
-
   return false;
 }
-/** @param {'-'|'+'} operator */
-
 
+/** @param {'-'|'+'} operator */
 function flip(operator) {
   return operator === '+' ? '-' : '+';
 }
+
 /**
  * @param {string} operator
  * @returns {operator is '+'|'-'}
  */
-
-
 function isAddSubOperator(operator) {
   return operator === '+' || operator === '-';
 }
+
 /**
  * @typedef {{preOperator: '+'|'-', node: import('../parser').CalcNode}} Collectible
-*/
+ */
 
 /**
  * @param {'+'|'-'} preOperator
  * @param {import('../parser').CalcNode} node
- * @param {Collectible[]} collected 
+ * @param {Collectible[]} collected
  * @param {number} precision
  */
-
-
 function collectAddSubItems(preOperator, node, collected, precision) {
   if (!isAddSubOperator(preOperator)) {
     throw new Error(`invalid operator ${preOperator}`);
   }
-
   if (isValueType(node)) {
-    const itemIndex = collected.findIndex(x => x.node.type === node.type);
-
+    const itemIndex = collected.findIndex((x) => x.node.type === node.type);
     if (itemIndex >= 0) {
       if (node.value === 0) {
         return;
-      } // can cast because of the criterion used to find itemIndex
-
-
-      const otherValueNode =
-      /** @type import('../parser').ValueExpression*/
-      collected[itemIndex].node;
-      const {
-        left: reducedNode,
-        right: current
-      } = convertNodesUnits(otherValueNode, node, precision);
+      }
+      // can cast because of the criterion used to find itemIndex
+      const otherValueNode = /** @type import('../parser').ValueExpression*/ (
+        collected[itemIndex].node
+      );
+      const { left: reducedNode, right: current } = convertNodesUnits(
+        otherValueNode,
+        node,
+        precision
+      );
 
       if (collected[itemIndex].preOperator === '-') {
         collected[itemIndex].preOperator = '+';
         reducedNode.value *= -1;
       }
-
-      if (preOperator === "+") {
+      if (preOperator === '+') {
         reducedNode.value += current.value;
       } else {
         reducedNode.value -= current.value;
-      } // make sure reducedNode.value >= 0
-
-
+      }
+      // make sure reducedNode.value >= 0
       if (reducedNode.value >= 0) {
-        collected[itemIndex] = {
-          node: reducedNode,
-          preOperator: '+'
-        };
+        collected[itemIndex] = { node: reducedNode, preOperator: '+' };
       } else {
         reducedNode.value *= -1;
-        collected[itemIndex] = {
-          node: reducedNode,
-          preOperator: '-'
-        };
+        collected[itemIndex] = { node: reducedNode, preOperator: '-' };
       }
     } else {
       // make sure node.value >= 0
       if (node.value >= 0) {
-        collected.push({
-          node,
-          preOperator
-        });
+        collected.push({ node, preOperator });
       } else {
         node.value *= -1;
-        collected.push({
-          node,
-          preOperator: flip(preOperator)
-        });
+        collected.push({ node, preOperator: flip(preOperator) });
       }
     }
-  } else if (node.type === "MathExpression") {
+  } else if (node.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);
+      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 (reducedNode.type !== "MathExpression" || isAddSubOperator(reducedNode.operator)) {
+      const 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
-        });
+        collected.push({ node: reducedNode, preOperator });
       }
     }
+  } else if (node.type === 'ParenthesizedExpression') {
+    collectAddSubItems(preOperator, node.content, collected, precision);
   } else {
-    collected.push({
-      node,
-      preOperator
-    });
+    collected.push({ node, preOperator });
   }
 }
+
 /**
  * @param {import('../parser').CalcNode} node
  * @param {number} precision
  */
-
-
 function reduceAddSubExpression(node, precision) {
   /** @type Collectible[] */
   const collected = [];
   collectAddSubItems('+', node, collected, precision);
-  const withoutZeroItem = collected.filter(item => !(isValueType(item.node) && item.node.value === 0));
+
+  const withoutZeroItem = collected.filter(
+    (item) => !(isValueType(item.node) && 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)) {
-    const firstZeroItem = collected.find(item => isValueType(item.node) && item.node.value === 0);
-
+  if (
+    !firstNonZeroItem ||
+    (firstNonZeroItem.preOperator === '-' &&
+      !isValueType(firstNonZeroItem.node))
+  ) {
+    const firstZeroItem = collected.find(
+      (item) => isValueType(item.node) && item.node.value === 0
+    );
     if (firstZeroItem) {
       withoutZeroItem.unshift(firstZeroItem);
     }
-  } // make sure the preOperator of the first item is +
-
+  }
 
-  if (withoutZeroItem[0].preOperator === '-' && isValueType(withoutZeroItem[0].node)) {
+  // make sure the preOperator of the first item is +
+  if (
+    withoutZeroItem[0].preOperator === '-' &&
+    isValueType(withoutZeroItem[0].node)
+  ) {
     withoutZeroItem[0].node.value *= -1;
     withoutZeroItem[0].preOperator = '+';
   }
 
   let root = withoutZeroItem[0].node;
-
   for (let i = 1; i < withoutZeroItem.length; i++) {
     root = {
       type: 'MathExpression',
       operator: withoutZeroItem[i].preOperator,
       left: root,
-      right: withoutZeroItem[i].node
+      right: withoutZeroItem[i].node,
     };
   }
 
@@ -193,8 +179,6 @@ function reduceAddSubExpression(node, precision) {
 /**
  * @param {import('../parser').MathExpression} node
  */
-
-
 function reduceDivisionExpression(node) {
   if (!isValueType(node.right)) {
     return node;
@@ -206,116 +190,104 @@ function reduceDivisionExpression(node) {
 
   return applyNumberDivision(node.left, node.right.value);
 }
+
 /**
  * apply (expr) / number
  *
  * @param {import('../parser').CalcNode} node
  * @param {number} divisor
  * @return {import('../parser').CalcNode}
-*/
-
-
+ */
 function applyNumberDivision(node, divisor) {
   if (divisor === 0) {
     throw new Error('Cannot divide by zero');
   }
-
   if (isValueType(node)) {
     node.value /= divisor;
     return node;
   }
-
-  if (node.type === "MathExpression" && isAddSubOperator(node.operator)) {
+  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",
+      type: 'MathExpression',
       operator: node.operator,
       left: applyNumberDivision(node.left, divisor),
-      right: applyNumberDivision(node.right, divisor)
+      right: applyNumberDivision(node.right, divisor),
     };
-  } // it is impossible to reduce it into a single value
+  }
+  // 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",
+    type: 'MathExpression',
     operator: '/',
     left: node,
     right: {
-      type: "Number",
-      value: divisor
-    }
+      type: 'Number',
+      value: divisor,
+    },
   };
 }
 /**
  * @param {import('../parser').MathExpression} node
  */
-
-
 function reduceMultiplicationExpression(node) {
   // (expr) * number
   if (node.right.type === 'Number') {
     return applyNumberMultiplication(node.left, node.right.value);
-  } // number * (expr)
-
-
+  }
+  // number * (expr)
   if (node.left.type === 'Number') {
     return applyNumberMultiplication(node.right, node.left.value);
   }
-
   return node;
 }
+
 /**
  * apply (expr) * number
  * @param {number} multiplier
  * @param {import('../parser').CalcNode} node
  * @return {import('../parser').CalcNode}
  */
-
-
 function applyNumberMultiplication(node, multiplier) {
   if (isValueType(node)) {
     node.value *= multiplier;
     return node;
   }
-
-  if (node.type === "MathExpression" && isAddSubOperator(node.operator)) {
+  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",
+      type: 'MathExpression',
       operator: node.operator,
       left: applyNumberMultiplication(node.left, multiplier),
-      right: applyNumberMultiplication(node.right, multiplier)
+      right: applyNumberMultiplication(node.right, multiplier),
     };
-  } // it is impossible to reduce it into a single value
+  }
+  // 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",
+    type: 'MathExpression',
     operator: '*',
     left: node,
     right: {
-      type: "Number",
-      value: multiplier
-    }
+      type: 'Number',
+      value: multiplier,
+    },
   };
 }
+
 /**
  * @param {import('../parser').ValueExpression} left
  * @param {import('../parser').ValueExpression} right
  * @param {number} precision
  */
-
-
 function convertNodesUnits(left, right, precision) {
   switch (left.type) {
     case 'LengthValue':
@@ -324,56 +296,67 @@ function convertNodesUnits(left, right, precision) {
     case 'FrequencyValue':
     case 'ResolutionValue':
       if (right.type === left.type && right.unit && left.unit) {
-        const converted = (0, _convertUnit.default)(right.value, right.unit, left.unit, precision);
+        const converted = convertUnit(
+          right.value,
+          right.unit,
+          left.unit,
+          precision
+        );
+
         right = {
           type: left.type,
           value: converted,
-          unit: left.unit
+          unit: left.unit,
         };
       }
 
-      return {
-        left,
-        right
-      };
-
+      return { left, right };
     default:
-      return {
-        left,
-        right
-      };
+      return { left, right };
   }
 }
+
+/**
+ * @param {import('../parser').ParenthesizedExpression} node
+ */
+function includesNoCssProperties(node) {
+  return (
+    node.content.type !== 'Function' &&
+    (node.content.type !== 'MathExpression' ||
+      (node.content.right.type !== 'Function' &&
+        node.content.left.type !== 'Function'))
+  );
+}
 /**
  * @param {import('../parser').CalcNode} node
  * @param {number} precision
+ * @return {import('../parser').CalcNode}
  */
-
-
 function reduce(node, precision) {
-  if (node.type === "MathExpression") {
+  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 reduceDivisionExpression(node);
-
-      case "*":
+      case '*':
         return reduceMultiplicationExpression(node);
     }
 
     return node;
   }
 
+  if (node.type === 'ParenthesizedExpression') {
+    if (includesNoCssProperties(node)) {
+      return reduce(node.content, precision);
+    }
+  }
+
   return node;
 }
 
-var _default = reduce;
-exports.default = _default;
-module.exports = exports.default;
+module.exports = reduce;