postcss-calc 6.0.1 → 10.1.1

package/src/lib/reducer.js

@@ -0,0 +1,396 @@
+'use strict';
+const convertUnit = require('./convertUnit.js');
+
+/**
+ * @param {import('../parser').CalcNode} node
+ * @return {node is import('../parser').ValueExpression}
+ */
+function isValueType(node) {
+  switch (node.type) {
+    case 'LengthValue':
+    case 'AngleValue':
+    case 'TimeValue':
+    case 'FrequencyValue':
+    case 'ResolutionValue':
+    case 'EmValue':
+    case 'ExValue':
+    case 'ChValue':
+    case 'RemValue':
+    case 'VhValue':
+    case 'SvhValue':
+    case 'LvhValue':
+    case 'DvhValue':
+    case 'VwValue':
+    case 'SvwValue':
+    case 'LvwValue':
+    case 'DvwValue':
+    case 'VminValue':
+    case 'SvminValue':
+    case 'LvminValue':
+    case 'DvminValue':
+    case 'VmaxValue':
+    case 'SvmaxValue':
+    case 'LvmaxValue':
+    case 'DvmaxValue':
+    case 'VbValue':
+    case 'SvbValue':
+    case 'LvbValue':
+    case 'DvbValue':
+    case 'ViValue':
+    case 'SviValue':
+    case 'LviValue':
+    case 'DviValue':
+    case 'CqwValue':
+    case 'CqhValue':
+    case 'CqiValue':
+    case 'CqbValue':
+    case 'CqminValue':
+    case 'CqmaxValue':
+    case 'PercentageValue':
+    case 'LhValue':
+    case 'RlhValue':
+    case 'Number':
+      return true;
+  }
+  return false;
+}
+
+/** @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 {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);
+    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
+      );
+
+      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 (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
+      );
+    } else {
+      // * or /
+      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 });
+      }
+    }
+  } else if (node.type === 'ParenthesizedExpression') {
+    collectAddSubItems(preOperator, node.content, collected, precision);
+  } else {
+    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 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 (firstZeroItem) {
+      withoutZeroItem.unshift(firstZeroItem);
+    }
+  }
+
+  // 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,
+    };
+  }
+
+  return root;
+}
+/**
+ * @param {import('../parser').MathExpression} node
+ */
+function reduceDivisionExpression(node) {
+  if (!isValueType(node.right)) {
+    return node;
+  }
+
+  if (node.right.type !== 'Number') {
+    throw new Error(`Cannot divide by "${node.right.unit}", number expected`);
+  }
+
+  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)) {
+    // 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,
+    },
+  };
+}
+/**
+ * @param {import('../parser').MathExpression} node
+ */
+function reduceMultiplicationExpression(node) {
+  // (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
+ * @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)) {
+    // 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,
+    },
+  };
+}
+
+/**
+ * @param {import('../parser').ValueExpression} left
+ * @param {import('../parser').ValueExpression} right
+ * @param {number} precision
+ */
+function convertNodesUnits(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) {
+        const converted = convertUnit(
+          right.value,
+          right.unit,
+          left.unit,
+          precision
+        );
+
+        right = {
+          type: left.type,
+          value: converted,
+          unit: left.unit,
+        };
+      }
+
+      return { left, right };
+    default:
+      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' &&
+    (node.left.type === 'CalcKeyword' || node.right.type === 'CalcKeyword')
+  ) {
+    return node;
+  }
+  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 '/':
+        return reduceDivisionExpression(node);
+      case '*':
+        return reduceMultiplicationExpression(node);
+    }
+
+    return node;
+  }
+
+  if (node.type === 'ParenthesizedExpression') {
+    if (includesNoCssProperties(node)) {
+      return reduce(node.content, precision);
+    }
+  }
+
+  return node;
+}
+
+module.exports = reduce;

package/src/lib/stringifier.js

@@ -0,0 +1,106 @@
+'use strict';
+const order = {
+  '*': 0,
+  '/': 0,
+  '+': 1,
+  '-': 1,
+};
+
+/**
+ * @param {number} value
+ * @param {number | false} prec
+ */
+function round(value, prec) {
+  if (prec !== false) {
+    const precision = Math.pow(10, prec);
+    return Math.round(value * precision) / precision;
+  }
+  return value;
+}
+
+/**
+ * @param {number | false} prec
+ * @param {import('../parser').CalcNode} node
+ *
+ * @return {string}
+ */
+function stringify(node, prec) {
+  switch (node.type) {
+    case 'MathExpression': {
+      const { left, right, operator: op } = node;
+      let str = '';
+      if (left.type === 'MathExpression' && order[op] < order[left.operator]) {
+        str += `(${stringify(left, prec)})`;
+      } else if (left.type === 'CalcKeyword') {
+        str += left.value;
+      } 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 if (right.type === 'CalcKeyword') {
+        str += right.value;
+      } else {
+        str += stringify(right, prec);
+      }
+
+      return str;
+    }
+    case 'Number':
+      return round(node.value, prec).toString();
+    case 'Function':
+      return node.value.toString();
+    case 'ParenthesizedExpression':
+      return `(${stringify(node.content, prec)})`;
+    case 'CalcKeyword':
+      return node.value;
+    default:
+      return round(node.value, prec) + node.unit;
+  }
+}
+
+/**
+ * @param {string} calc
+ * @param {import('../parser').CalcNode} node
+ * @param {string} originalValue
+ * @param {{precision: number | false, warnWhenCannotResolve: boolean}} options
+ * @param {import("postcss").Result} result
+ * @param {import("postcss").ChildNode} item
+ *
+ * @returns {string}
+ */
+module.exports = function (calc, node, originalValue, options, result, item) {
+  let str = stringify(node, options.precision);
+
+  const shouldPrintCalc =
+    node.type === 'MathExpression' ||
+    node.type === 'Function' ||
+    node.type === 'ParenthesizedExpression' ||
+    node.type === 'CalcKeyword';
+
+  if (shouldPrintCalc) {
+    // if calc expression couldn't be resolved to a single value, re-wrap it as
+    // a calc()
+    if (node.type === 'ParenthesizedExpression') {
+      str = `${calc}${str}`;
+    } else {
+      str = `${calc}(${str})`;
+    }
+
+    // if the warnWhenCannotResolve option is on, inform the user that the calc
+    // expression could not be resolved to a single value
+    if (options.warnWhenCannotResolve) {
+      result.warn('Could not reduce expression: ' + originalValue, {
+        plugin: 'postcss-calc',
+        node: item,
+      });
+    }
+  }
+  return str;
+};

package/src/lib/transform.js

@@ -0,0 +1,109 @@
+'use strict';
+const selectorParser = require('postcss-selector-parser');
+const valueParser = require('postcss-value-parser');
+
+const { parser } = require('../parser.js');
+
+const reducer = require('./reducer.js');
+const stringifier = require('./stringifier.js');
+
+const MATCH_CALC = /((?:-(moz|webkit)-)?calc(?!-))/i;
+
+/**
+ * @param {string} value
+ * @param {{precision: number, warnWhenCannotResolve: boolean}} options
+ * @param {import("postcss").Result} result
+ * @param {import("postcss").ChildNode} item
+ */
+function transformValue(value, options, result, item) {
+  return valueParser(value)
+    .walk((node) => {
+      // skip anything which isn't a calc() function
+      if (node.type !== 'function' || !MATCH_CALC.test(node.value)) {
+        return;
+      }
+
+      // stringify calc expression and produce an AST
+      const contents = valueParser.stringify(node.nodes);
+      const ast = parser.parse(contents);
+
+      // reduce AST to its simplest form, that is, either to a single value
+      // or a simplified calc expression
+      const reducedAst = reducer(ast, options.precision);
+
+      // stringify AST and write it back
+      /** @type {valueParser.Node} */ (node).type = 'word';
+      node.value = stringifier(
+        node.value,
+        reducedAst,
+        value,
+        options,
+        result,
+        item
+      );
+
+      return false;
+    })
+    .toString();
+}
+/**
+ * @param {import("postcss-selector-parser").Selectors} value
+ * @param {{precision: number, warnWhenCannotResolve: boolean}} options
+ * @param {import("postcss").Result} result
+ * @param {import("postcss").ChildNode} item
+ */
+function transformSelector(value, options, result, item) {
+  return selectorParser((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) {
+        node.setValue(transformValue(node.value, options, result, item));
+      }
+
+      // tag value
+      // 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);
+      }
+
+      return;
+    });
+  }).processSync(value);
+}
+
+/**
+ * @param {any} node
+ * @param {{precision: number, preserve: boolean, warnWhenCannotResolve: boolean}} options
+ * @param {'value'|'params'|'selector'} property
+ * @param {import("postcss").Result} result
+ */
+module.exports = (node, property, options, result) => {
+  let value = node[property];
+
+  try {
+    value =
+      property === 'selector'
+        ? transformSelector(node[property], options, result, node)
+        : transformValue(node[property], options, result, node);
+  } catch (error) {
+    if (error instanceof Error) {
+      result.warn(error.message, { node });
+    } else {
+      result.warn('Error', { node });
+    }
+    return;
+  }
+
+  // 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) {
+    const clone = node.clone();
+    clone[property] = value;
+    node.parent.insertBefore(node, clone);
+  } else {
+    node[property] = value;
+  }
+};

package/src/parser.d.ts

@@ -0,0 +1,89 @@
+export interface MathExpression {
+  type: 'MathExpression';
+  right: CalcNode;
+  left: CalcNode;
+  operator: '*' | '+' | '-' | '/';
+}
+
+export interface ParenthesizedExpression {
+  type: 'ParenthesizedExpression';
+  content: CalcNode;
+}
+
+export interface DimensionExpression {
+  type:
+    | 'LengthValue'
+    | 'AngleValue'
+    | 'TimeValue'
+    | 'FrequencyValue'
+    | 'PercentageValue'
+    | 'ResolutionValue'
+    | 'EmValue'
+    | 'ExValue'
+    | 'ChValue'
+    | 'RemValue'
+    | 'VhValue'
+    | 'SvhValue'
+    | 'LvhValue'
+    | 'DvhValue'
+    | 'VwValue'
+    | 'SvwValue'
+    | 'LvwValue'
+    | 'DvwValue'
+    | 'VminValue'
+    | 'SvminValue'
+    | 'LvminValue'
+    | 'DvminValue'
+    | 'VmaxValue'
+    | 'SvmaxValue'
+    | 'LvmaxValue'
+    | 'DvmaxValue'
+    | 'VbValue'
+    | 'SvbValue'
+    | 'LvbValue'
+    | 'DvbValue'
+    | 'ViValue'
+    | 'SviValue'
+    | 'LviValue'
+    | 'DviValue'
+    | 'CqwValue'
+    | 'CqhValue'
+    | 'CqbValue'
+    | 'CqiValue'
+    | 'CqminValue'
+    | 'CqmaxValue'
+    | 'LhValue'
+    | 'RlhValue';
+  value: number;
+  unit: string;
+}
+
+export interface NumberExpression {
+  type: 'Number';
+  value: number;
+}
+
+export interface FunctionExpression {
+  type: 'Function';
+  value: string;
+}
+
+export interface CalcKeywordExpression {
+  type: 'CalcKeyword';
+  value: string;
+}
+
+export type ValueExpression = DimensionExpression | NumberExpression;
+
+export type CalcNode =
+  | MathExpression
+  | ValueExpression
+  | FunctionExpression
+  | ParenthesizedExpression
+  | CalcKeywordExpression;
+
+export interface Parser {
+  parse: (arg: string) => CalcNode;
+}
+
+export const parser: Parser;