postcss-calc 8.1.0 → 8.2.0

package/dist/index.js

@@ -9,6 +9,15 @@ var _transform = _interopRequireDefault(require("./lib/transform"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/**
+ * @typedef {{precision?: number | false,
+ *          preserve?: boolean, 
+ *          warnWhenCannotResolve?: boolean, 
+ *          mediaQueries?: boolean, 
+ *          selectors?: boolean}} PostCssCalcOptions
+ *
+ * @param {PostCssCalcOptions} opts
+ */
 function pluginCreator(opts) {
   const options = Object.assign({
     precision: 5,
@@ -20,6 +29,10 @@ function pluginCreator(opts) {
   return {
     postcssPlugin: 'postcss-calc',
 
+    /**
+     * @param {import('postcss').Root} css
+     * @param {{result: import('postcss').Result}} helpers
+     */
     OnceExit(css, {
       result
     }) {

package/dist/lib/convertUnit.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+/**
+ * @type {{[key:string]: {[key:string]: number}}}
+ */
 const conversions = {
   // Absolute length units
   'px': {
@@ -129,6 +133,12 @@ const conversions = {
     '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();
@@ -145,7 +155,7 @@ function convertUnit(value, sourceUnit, targetUnit, precision) {
   const converted = conversions[targetUnitNormalized][sourceUnitNormalized] * value;
 
   if (precision !== false) {
-    precision = Math.pow(10, parseInt(precision) || 5);
+    precision = Math.pow(10, Math.ceil(precision) || 5);
     return Math.round(converted * precision) / precision;
   }
 

package/dist/lib/reducer.js

@@ -9,8 +9,12 @@ var _convertUnit = _interopRequireDefault(require("./convertUnit"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function isValueType(type) {
-  switch (type) {
+/**
+ * @param {import('../parser').CalcNode} node
+ * @return {node is import('../parser').ValueExpression}
+ */
+function isValueType(node) {
+  switch (node.type) {
     case 'LengthValue':
     case 'AngleValue':
     case 'TimeValue':
@@ -31,34 +35,54 @@ function isValueType(type) {
 
   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}`);
   }
 
-  const type = node.type;
-
-  if (isValueType(type)) {
-    const itemIndex = collected.findIndex(x => x.node.type === type);
+  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
-      } = covertNodesUnits(collected[itemIndex].node, node, precision);
+      } = convertNodesUnits(otherValueNode, node, precision);
 
       if (collected[itemIndex].preOperator === '-') {
         collected[itemIndex].preOperator = '+';
@@ -99,7 +123,7 @@ function collectAddSubItems(preOperator, node, collected, precision) {
         });
       }
     }
-  } else if (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;
@@ -124,22 +148,31 @@ function collectAddSubItems(preOperator, node, collected, precision) {
     });
   }
 }
+/**
+ * @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.type) && 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.type)) {
-    const firstZeroItem = collected.find(item => isValueType(item.node.type) && item.node.value === 0);
-    withoutZeroItem.unshift(firstZeroItem);
+  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.type)) {
+  if (withoutZeroItem[0].preOperator === '-' && isValueType(withoutZeroItem[0].node)) {
     withoutZeroItem[0].node.value *= -1;
     withoutZeroItem[0].preOperator = '+';
   }
@@ -157,9 +190,13 @@ function reduceAddSubExpression(node, precision) {
 
   return root;
 }
+/**
+ * @param {import('../parser').MathExpression} node
+ */
+
 
 function reduceDivisionExpression(node) {
-  if (!isValueType(node.right.type)) {
+  if (!isValueType(node.right)) {
     return node;
   }
 
@@ -168,7 +205,14 @@ function reduceDivisionExpression(node) {
   }
 
   return applyNumberDivision(node.left, node.right.value);
-} // apply (expr) / number
+}
+/**
+ * apply (expr) / number
+ *
+ * @param {import('../parser').CalcNode} node
+ * @param {number} divisor
+ * @return {import('../parser').CalcNode}
+*/
 
 
 function applyNumberDivision(node, divisor) {
@@ -176,7 +220,7 @@ function applyNumberDivision(node, divisor) {
     throw new Error('Cannot divide by zero');
   }
 
-  if (isValueType(node.type)) {
+  if (isValueType(node)) {
     node.value /= divisor;
     return node;
   }
@@ -207,6 +251,10 @@ function applyNumberDivision(node, divisor) {
     }
   };
 }
+/**
+ * @param {import('../parser').MathExpression} node
+ */
+
 
 function reduceMultiplicationExpression(node) {
   // (expr) * number
@@ -220,11 +268,17 @@ function reduceMultiplicationExpression(node) {
   }
 
   return node;
-} // apply (expr) / number
+}
+/**
+ * apply (expr) * number
+ * @param {number} multiplier
+ * @param {import('../parser').CalcNode} node
+ * @return {import('../parser').CalcNode}
+ */
 
 
 function applyNumberMultiplication(node, multiplier) {
-  if (isValueType(node.type)) {
+  if (isValueType(node)) {
     node.value *= multiplier;
     return node;
   }
@@ -255,8 +309,14 @@ function applyNumberMultiplication(node, multiplier) {
     }
   };
 }
+/**
+ * @param {import('../parser').ValueExpression} left
+ * @param {import('../parser').ValueExpression} right
+ * @param {number} precision
+ */
 
-function covertNodesUnits(left, right, precision) {
+
+function convertNodesUnits(left, right, precision) {
   switch (left.type) {
     case 'LengthValue':
     case 'AngleValue':
@@ -284,6 +344,11 @@ function covertNodesUnits(left, right, precision) {
       };
   }
 }
+/**
+ * @param {import('../parser').CalcNode} node
+ * @param {number} precision
+ */
+
 
 function reduce(node, precision) {
   if (node.type === "MathExpression") {
@@ -297,10 +362,10 @@ function reduce(node, precision) {
 
     switch (node.operator) {
       case "/":
-        return reduceDivisionExpression(node, precision);
+        return reduceDivisionExpression(node);
 
       case "*":
-        return reduceMultiplicationExpression(node, precision);
+        return reduceMultiplicationExpression(node);
     }
 
     return node;

package/dist/lib/stringifier.js

@@ -10,6 +10,10 @@ const order = {
   "+": 1,
   "-": 1
 };
+/**
+ * @param {number} value
+ * @param {number | false} prec
+ */
 
 function round(value, prec) {
   if (prec !== false) {
@@ -19,6 +23,11 @@ function round(value, prec) {
 
   return value;
 }
+/**
+ * @param {number | false} prec
+ * @param {import('../parser').CalcNode} node
+ */
+
 
 function stringify(node, prec) {
   switch (node.type) {
@@ -49,15 +58,26 @@ function stringify(node, prec) {
       }
 
     case 'Number':
-      return round(node.value, prec);
+      return round(node.value, prec).toString();
 
     case 'Function':
-      return node.value;
+      return node.value.toString();
 
     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}
+ */
+
 
 function _default(calc, node, originalValue, options, result, item) {
   let str = stringify(node, options.precision);

package/dist/lib/transform.js

@@ -19,12 +19,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // eslint-disable-next-line import/no-unresolved
 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 (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;
+      return;
     } // stringify calc expression and produce an AST
 
 
@@ -36,11 +42,19 @@ function transformValue(value, options, result, item) {
 
     const reducedAst = (0, _reducer.default)(ast, options.precision); // stringify AST and write it back
 
+    /** @type {valueParser.Node} */
     node.type = "word";
     node.value = (0, _stringifier.default)(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 (0, _postcssSelectorParser.default)(selectors => {
@@ -61,6 +75,13 @@ function transformSelector(value, options, result, item) {
     });
   }).processSync(value);
 }
+/** 
+ * @param {any} node
+ * @param {{precision: number, preserve: boolean, warnWhenCannotResolve: boolean}} options
+ * @param {'value'|'params'|'selector'} property
+ * @param {import("postcss").Result} result
+ */
+
 
 var _default = (node, property, options, result) => {
   let value = node[property];
@@ -68,9 +89,16 @@ var _default = (node, property, options, result) => {
   try {
     value = property === "selector" ? transformSelector(node[property], options, result, node) : transformValue(node[property], options, result, node);
   } catch (error) {
-    result.warn(error.message, {
-      node
-    });
+    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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-calc",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
     "css",
@@ -10,8 +10,10 @@
     "calc"
   ],
   "main": "dist/index.js",
+  "types": "types/index.d.ts",
   "files": [
     "dist",
+    "types",
     "LICENSE"
   ],
   "author": "Andy Jansson",
@@ -27,17 +29,18 @@
     }
   },
   "devDependencies": {
-    "@ava/babel": "^2.0.0",
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.5",
     "@babel/plugin-transform-modules-commonjs": "^7.16.5",
-    "ava": "^3.15.0",
+    "@babel/register": "^7.16.7",
     "babel-plugin-add-module-exports": "^1.0.0",
     "eslint": "^8.5.0",
     "eslint-plugin-import": "^2.25.3",
     "jison-gho": "^0.6.1-216",
     "postcss": "^8.2.2",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "typescript": "^4.5.4",
+    "uvu": "^0.5.2"
   },
   "dependencies": {
     "postcss-selector-parser": "^6.0.2",
@@ -46,14 +49,11 @@
   "peerDependencies": {
     "postcss": "^8.2.2"
   },
-  "ava": {
-    "babel": true
-  },
   "scripts": {
     "build": "rimraf dist && babel src --out-dir dist --ignore src/__tests__/**/*.js && jison src/parser.jison -o dist/parser.js",
-    "lint": "eslint src",
+    "lint": "eslint src && tsc",
     "pretest": "pnpm run build",
-    "test": "ava"
+    "test": "uvu -r @babel/register src/__tests__"
   },
   "readme": "# PostCSS Calc [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS\" width=\"90\" height=\"90\" align=\"right\">][PostCSS]\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][cli-img]][cli-url]\n[![Support Chat][git-img]][git-url]\n\n[PostCSS Calc] lets you reduce `calc()` references whenever it's possible. This\ncan be particularly useful with the [PostCSS Custom Properties] plugin.\n\nWhen multiple units are mixed together in the same expression, the `calc()`\nstatement is left as is, to fallback to the [W3C calc() implementation].\n\n## Installation\n\n```bash\nnpm install postcss-calc\n```\n\n## Usage\n\n```js\n// dependencies\nvar fs = require(\"fs\")\nvar postcss = require(\"postcss\")\nvar calc = require(\"postcss-calc\")\n\n// css to be processed\nvar css = fs.readFileSync(\"input.css\", \"utf8\")\n\n// process css\nvar output = postcss()\n  .use(calc())\n  .process(css)\n  .css\n```\n\n**Example** (with [PostCSS Custom Properties] enabled as well):\n\n```js\n// dependencies\nvar fs = require(\"fs\")\nvar postcss = require(\"postcss\")\nvar customProperties = require(\"postcss-custom-properties\")\nvar calc = require(\"postcss-calc\")\n\n// css to be processed\nvar css = fs.readFileSync(\"input.css\", \"utf8\")\n\n// process css\nvar output = postcss()\n  .use(customProperties())\n  .use(calc())\n  .process(css)\n  .css\n```\n\nUsing this `input.css`:\n\n```css\n:root {\n  --main-font-size: 16px;\n}\n\nbody {\n  font-size: var(--main-font-size);\n}\n\nh1 {\n  font-size: calc(var(--main-font-size) * 2);\n  height: calc(100px - 2em);\n  margin-bottom: calc(\n      var(--main-font-size)\n      * 1.5\n    )\n}\n```\n\nyou will get:\n\n```css\nbody {\n  font-size: 16px\n}\n\nh1 {\n  font-size: 32px;\n  height: calc(100px - 2em);\n  margin-bottom: 24px\n}\n```\n\nCheckout [tests] for more examples.\n\n### Options\n\n#### `precision` (default: `5`)\n\nAllow you to define the precision for decimal numbers.\n\n```js\nvar out = postcss()\n  .use(calc({precision: 10}))\n  .process(css)\n  .css\n```\n\n#### `preserve` (default: `false`)\n\nAllow you to preserve calc() usage in output so browsers will handle decimal\nprecision themselves.\n\n```js\nvar out = postcss()\n  .use(calc({preserve: true}))\n  .process(css)\n  .css\n```\n\n#### `warnWhenCannotResolve` (default: `false`)\n\nAdds warnings when calc() are not reduced to a single value.\n\n```js\nvar out = postcss()\n  .use(calc({warnWhenCannotResolve: true}))\n  .process(css)\n  .css\n```\n\n#### `mediaQueries` (default: `false`)\n\nAllows calc() usage as part of media query declarations.\n\n```js\nvar out = postcss()\n  .use(calc({mediaQueries: true}))\n  .process(css)\n  .css\n```\n\n#### `selectors` (default: `false`)\n\nAllows calc() usage as part of selectors.\n\n```js\nvar out = postcss()\n  .use(calc({selectors: true}))\n  .process(css)\n  .css\n```\n\nExample:\n\n```css\ndiv[data-size=\"calc(3*3)\"] {\n  width: 100px;\n}\n```\n\n---\n\n## Contributing\n\nWork on a branch, install dev-dependencies, respect coding style & run tests\nbefore submitting a bug fix or a feature.\n\n```bash\ngit clone git@github.com:postcss/postcss-calc.git\ngit checkout -b patch-1\nnpm install\nnpm test\n```\n\n## [Changelog](CHANGELOG.md)\n\n## [License](LICENSE)\n\n[cli-img]: https://img.shields.io/travis/postcss/postcss-calc/master.svg\n[cli-url]: https://travis-ci.org/postcss/postcss-calc\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://img.shields.io/npm/v/postcss-calc.svg\n[npm-url]: https://www.npmjs.com/package/postcss-calc\n\n[PostCSS]: https://github.com/postcss\n[PostCSS Calc]: https://github.com/postcss/postcss-calc\n[PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties\n[tests]: src/__tests__/index.js\n[W3C calc() implementation]: https://www.w3.org/TR/css3-values/#calc-notation\n"
 }

package/types/index.d.ts

@@ -0,0 +1,30 @@
+export default pluginCreator;
+export type PostCssCalcOptions = {
+    precision?: number | false;
+    preserve?: boolean;
+    warnWhenCannotResolve?: boolean;
+    mediaQueries?: boolean;
+    selectors?: boolean;
+};
+/**
+ * @typedef {{precision?: number | false,
+ *          preserve?: boolean,
+ *          warnWhenCannotResolve?: boolean,
+ *          mediaQueries?: boolean,
+ *          selectors?: boolean}} PostCssCalcOptions
+ *
+ * @param {PostCssCalcOptions} opts
+ */
+declare function pluginCreator(opts: PostCssCalcOptions): {
+    postcssPlugin: string;
+    /**
+     * @param {import('postcss').Root} css
+     * @param {{result: import('postcss').Result}} helpers
+     */
+    OnceExit(css: import('postcss').Root, { result }: {
+        result: import('postcss').Result;
+    }): void;
+};
+declare namespace pluginCreator {
+    const postcss: boolean;
+}

package/types/lib/convertUnit.d.ts

@@ -0,0 +1,8 @@
+export default convertUnit;
+/**
+ * @param {number} value
+ * @param {string} sourceUnit
+ * @param {string} targetUnit
+ * @param {number|false} precision
+ */
+declare function convertUnit(value: number, sourceUnit: string, targetUnit: string, precision: number | false): number;

package/types/lib/reducer.d.ts

@@ -0,0 +1,10 @@
+export default reduce;
+export type Collectible = {
+    preOperator: '+' | '-';
+    node: import('../parser').CalcNode;
+};
+/**
+ * @param {import('../parser').CalcNode} node
+ * @param {number} precision
+ */
+declare function reduce(node: import('../parser').CalcNode, precision: number): import("../parser").MathExpression | import("../parser").DimensionExpression | import("../parser").NumberExpression | import("../parser").FunctionExpression;

package/types/lib/stringifier.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @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}
+ */
+export default function _default(calc: string, node: import('../parser').CalcNode, originalValue: string, options: {
+    precision: number | false;
+    warnWhenCannotResolve: boolean;
+}, result: import("postcss").Result, item: import("postcss").ChildNode): string;

package/types/lib/transform.d.ts

@@ -0,0 +1,6 @@
+declare function _default(node: any, property: 'value' | 'params' | 'selector', options: {
+    precision: number;
+    preserve: boolean;
+    warnWhenCannotResolve: boolean;
+}, result: import("postcss").Result): void;
+export default _default;