postcss-calc - npm Package Compare versions

Comparing version 8.1.0 to 8.2.0

dist/index.js

@@ -12,2 +12,11 @@ "use strict";
 
+/**
+ * @typedef {{precision?: number | false,
+ *          preserve?: boolean, 
+ *          warnWhenCannotResolve?: boolean, 
+ *          mediaQueries?: boolean, 
+ *          selectors?: boolean}} PostCssCalcOptions
+ *
+ * @param {PostCssCalcOptions} opts
+ */
 function pluginCreator(opts) {
@@ -24,2 +33,6 @@ const options = Object.assign({
 
+    /**
+     * @param {import('postcss').Root} css
+     * @param {{result: import('postcss').Result}} helpers
+     */
     OnceExit(css, {
@@ -26,0 +39,0 @@ result

dist/lib/convertUnit.js

@@ -7,2 +7,6 @@ "use strict";
 exports.default = void 0;
+
+/**
+ * @type {{[key:string]: {[key:string]: number}}}
+ */
 const conversions = {
@@ -133,2 +137,8 @@ // Absolute length units
 };
+/**
+ * @param {number} value
+ * @param {string} sourceUnit
+ * @param {string} targetUnit
+ * @param {number|false} precision 
+ */
 
@@ -150,3 +160,3 @@ function convertUnit(value, sourceUnit, targetUnit, precision) {
   if (precision !== false) {
-    precision = Math.pow(10, parseInt(precision) || 5);
+    precision = Math.pow(10, Math.ceil(precision) || 5);
     return Math.round(converted * precision) / precision;
@@ -153,0 +163,0 @@ }

dist/lib/reducer.js

@@ -12,4 +12,8 @@ "use strict";
 
-function isValueType(type) {
-  switch (type) {
+/**
+ * @param {import('../parser').CalcNode} node
+ * @return {node is import('../parser').ValueExpression}
+ */
+function isValueType(node) {
+  switch (node.type) {
     case 'LengthValue':
@@ -35,11 +39,29 @@ case 'AngleValue':
 }
+/** @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) {
@@ -50,16 +72,18 @@ if (!isAddSubOperator(preOperator)) {
 
-  const type = node.type;
+  if (isValueType(node)) {
+    const itemIndex = collected.findIndex(x => x.node.type === node.type);
 
-  if (isValueType(type)) {
-    const itemIndex = collected.findIndex(x => x.node.type === 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);
 
@@ -105,3 +129,3 @@ if (collected[itemIndex].preOperator === '-') {
     }
-  } else if (type === "MathExpression") {
+  } else if (node.type === "MathExpression") {
     if (isAddSubOperator(node.operator)) {
@@ -131,7 +155,13 @@ collectAddSubItems(preOperator, node.left, 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
@@ -141,9 +171,12 @@ // prevent producing "calc(-var(--a))" or "calc()"
 
-  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;
@@ -166,5 +199,9 @@ withoutZeroItem[0].preOperator = '+';
 }
+/**
+ * @param {import('../parser').MathExpression} node
+ */
 
+
 function reduceDivisionExpression(node) {
-  if (!isValueType(node.right.type)) {
+  if (!isValueType(node.right)) {
     return node;
@@ -178,3 +215,10 @@ }
   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}
+*/
 
@@ -187,3 +231,3 @@
 
-  if (isValueType(node.type)) {
+  if (isValueType(node)) {
     node.value /= divisor;
@@ -219,3 +263,7 @@ return node;
 }
+/**
+ * @param {import('../parser').MathExpression} node
+ */
 
+
 function reduceMultiplicationExpression(node) {
@@ -233,7 +281,13 @@ // (expr) * number
   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;
@@ -269,4 +323,10 @@ return node;
 }
+/**
+ * @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) {
@@ -299,3 +359,8 @@ case 'LengthValue':
 }
+/**
+ * @param {import('../parser').CalcNode} node
+ * @param {number} precision
+ */
 
+
 function reduce(node, precision) {
@@ -313,6 +378,6 @@ if (node.type === "MathExpression") {
       case "/":
-        return reduceDivisionExpression(node, precision);
+        return reduceDivisionExpression(node);
 
       case "*":
-        return reduceMultiplicationExpression(node, precision);
+        return reduceMultiplicationExpression(node);
     }
@@ -319,0 +384,0 @@

dist/lib/stringifier.js

@@ -13,2 +13,6 @@ "use strict";
 };
+/**
+ * @param {number} value
+ * @param {number | false} prec
+ */
 
@@ -23,3 +27,8 @@ function round(value, prec) {
 }
+/**
+ * @param {number | false} prec
+ * @param {import('../parser').CalcNode} node
+ */
 
+
 function stringify(node, prec) {
@@ -54,6 +63,6 @@ switch (node.type) {
     case 'Number':
-      return round(node.value, prec);
+      return round(node.value, prec).toString();
 
     case 'Function':
-      return node.value;
+      return node.value.toString();
 
@@ -64,3 +73,14 @@ default:
 }
+/**
+ * @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) {
@@ -67,0 +87,0 @@ let str = stringify(node, options.precision);

dist/lib/transform.js

@@ -22,2 +22,8 @@ "use strict";
 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
+ */
 
@@ -28,3 +34,3 @@ function transformValue(value, options, result, item) {
     if (node.type !== "function" || !MATCH_CALC.test(node.value)) {
-      return node;
+      return;
     } // stringify calc expression and produce an AST
@@ -41,2 +47,3 @@
 
+    /** @type {valueParser.Node} */
     node.type = "word";
@@ -47,3 +54,10 @@ node.value = (0, _stringifier.default)(node.value, reducedAst, value, options, result, item);
 }
+/**
+ * @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) {
@@ -68,3 +82,10 @@ return (0, _postcssSelectorParser.default)(selectors => {
 }
+/** 
+ * @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) => {
@@ -76,5 +97,12 @@ let value = node[property];
   } catch (error) {
-    result.warn(error.message, {
-      node
-    });
+    if (error instanceof Error) {
+      result.warn(error.message, {
+        node
+      });
+    } else {
+      result.warn('Error', {
+        node
+      });
+    }
+
     return;
@@ -81,0 +109,0 @@ } // if the preserve option is enabled and the value has changed, write the

package.json

 {
   "name": "postcss-calc",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "PostCSS plugin to reduce calc()",
@@ -13,4 +13,6 @@ "keywords": [
   "main": "dist/index.js",
+  "types": "types/index.d.ts",
   "files": [
     "dist",
+    "types",
     "LICENSE"
@@ -31,7 +33,6 @@ ],
   "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",
@@ -42,3 +43,5 @@ "eslint": "^8.5.0",
     "postcss": "^8.2.2",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "typescript": "^4.5.4",
+    "uvu": "^0.5.2"
   },
@@ -52,12 +55,9 @@ "dependencies": {
   },
-  "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 [e-mail]: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"
 }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

155086

increased by3.75%

Number of package files

14

increased by55.56%

Lines of code

3938

increased by5.01%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

12

increased by9.09%

No dependency changes