postcss-calc 8.2.4 → 9.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-calc",
-  "version": "8.2.4",
+  "version": "9.0.1",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
     "css",
@@ -9,6 +9,11 @@
     "calculation",
     "calc"
   ],
+  "homepage": "https://github.com/postcss/postcss-calc",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/postcss/postcss-calc.git"
+  },
   "main": "src/index.js",
   "types": "types/index.d.ts",
   "files": [
@@ -16,9 +21,14 @@
     "types",
     "LICENSE"
   ],
+  "scripts": {
+    "prepare": "pnpm run build && tsc",
+    "build": "jison ./parser.jison -o src/parser.js",
+    "lint": "eslint . && tsc",
+    "test": "uvu test"
+  },
   "author": "Andy Jansson",
   "license": "MIT",
-  "repository": "https://github.com/postcss/postcss-calc.git",
   "eslintConfig": {
     "extends": [
       "eslint:recommended",
@@ -35,28 +45,24 @@
       "curly": "error"
     }
   },
+  "engines": {
+    "node": "^14 || ^16 || >=18.0"
+  },
   "devDependencies": {
-    "@types/node": "^17.0.15",
-    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
+    "@types/node": "^18.16.2",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
     "jison-gho": "^0.6.1-216",
     "postcss": "^8.2.2",
-    "prettier": "^2.5.1",
-    "typescript": "^4.5.5",
-    "uvu": "^0.5.3"
+    "prettier": "^2.8.8",
+    "typescript": "~5.0.4",
+    "uvu": "^0.5.6"
   },
   "dependencies": {
-    "postcss-selector-parser": "^6.0.9",
+    "postcss-selector-parser": "^6.0.11",
     "postcss-value-parser": "^4.2.0"
   },
   "peerDependencies": {
     "postcss": "^8.2.2"
-  },
-  "scripts": {
-    "build": "jison src/parser.jison -o src/parser.js",
-    "lint": "eslint src && tsc",
-    "pretest": "pnpm run build",
-    "test": "uvu 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[![Support Chat][git-img]][git-url]\n\n[PostCSS Calc] lets you reduce `calc()` references whenever it's possible.\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\nUsing this `input.css`:\n\n```css\nh1 {\n  font-size: calc(16px * 2);\n  height: calc(100px - 2em);\n  width: calc(2*var(--base-width));\n  margin-bottom: calc(16px * 1.5);\n}\n```\n\nyou will get:\n\n```css\nh1 {\n  font-size: 32px;\n  height: calc(100px - 2em);\n  width: calc(2*var(--base-width));\n  margin-bottom: 24px\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## Related PostCSS plugins\nTo replace the value of CSS custom properties at build time, try [PostCSS Custom Properties].\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[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/src/lib/stringifier.js

@@ -73,12 +73,17 @@ 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 === 'MathExpression' || node.type === 'Function' ||
+    node.type === 'ParenthesizedExpression';
 
   if (shouldPrintCalc) {
     // if calc expression couldn't be resolved to a single value, re-wrap it as
     // a calc()
-    str = `${calc}(${str})`;
+    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

package/src/__tests__/convertUnit.js

@@ -1,421 +0,0 @@
-'use strict';
-const { test } = require('uvu');
-const assert = require('uvu/assert');
-
-const convertUnit = require('../lib/convertUnit.js');
-
-test('valid conversions', () => {
-  const conversions = [
-    // source value, source unit, expected value, target unit
-    [10, 'px', 10, 'px'],
-    [10, 'px', 0.26458, 'cm'],
-    [10, 'px', 2.64583, 'mm'],
-    [10, 'px', 10.58333, 'q'],
-    [10, 'px', 0.10417, 'in'],
-    [10, 'px', 7.5, 'pt'],
-    [10, 'px', 0.625, 'pc'],
-    [10, 'cm', 377.95276, 'px'],
-    [10, 'cm', 10, 'cm'],
-    [10, 'cm', 100, 'mm'],
-    [10, 'cm', 400, 'q'],
-    [10, 'cm', 3.93701, 'in'],
-    [10, 'cm', 283.46457, 'pt'],
-    [10, 'cm', 23.62205, 'pc'],
-    [10, 'mm', 37.79528, 'px'],
-    [10, 'mm', 1, 'cm'],
-    [10, 'mm', 10, 'mm'],
-    [10, 'mm', 40, 'q'],
-    [10, 'mm', 0.3937, 'in'],
-    [10, 'mm', 28.34646, 'pt'],
-    [10, 'mm', 2.3622, 'pc'],
-    [10, 'q', 9.44882, 'px'],
-    [10, 'q', 0.25, 'cm'],
-    [10, 'q', 2.5, 'mm'],
-    [10, 'q', 0.09843, 'in'],
-    [10, 'q', 7.08661, 'pt'],
-    [10, 'q', 0.59055, 'pc'],
-    [10, 'in', 960, 'px'],
-    [10, 'in', 25.4, 'cm'],
-    [10, 'in', 254, 'mm'],
-    [10, 'in', 1016, 'q'],
-    [10, 'in', 10, 'in'],
-    [10, 'in', 720, 'pt'],
-    [10, 'in', 60, 'pc'],
-    [10, 'pt', 13.33333, 'px'],
-    [10, 'pt', 0.35278, 'cm'],
-    [10, 'pt', 3.52778, 'mm'],
-    [10, 'pt', 14.11111, 'q'],
-    [10, 'pt', 0.13889, 'in'],
-    [10, 'pt', 10, 'pt'],
-    [10, 'pt', 0.83333, 'pc'],
-    [10, 'pc', 160, 'px'],
-    [10, 'pc', 4.23333, 'cm'],
-    [10, 'pc', 42.33333, 'mm'],
-    [10, 'pc', 169.33333, 'q'],
-    [10, 'pc', 1.66667, 'in'],
-    [10, 'pc', 120, 'pt'],
-    [10, 'pc', 10, 'pc'],
-    [10, 'deg', 10, 'deg'],
-    [10, 'deg', 11.11111, 'grad'],
-    [10, 'deg', 0.17453, 'rad'],
-    [10, 'deg', 0.02778, 'turn'],
-    [10, 'grad', 9, 'deg'],
-    [10, 'grad', 10, 'grad'],
-    [10, 'grad', 0.15708, 'rad'],
-    [10, 'grad', 0.025, 'turn'],
-    [10, 'rad', 572.9578, 'deg'],
-    [10, 'rad', 636.61977, 'grad'],
-    [10, 'rad', 10, 'rad'],
-    [10, 'rad', 1.59155, 'turn'],
-    [10, 'turn', 3600, 'deg'],
-    [10, 'turn', 4000, 'grad'],
-    [10, 'turn', 62.83185, 'rad'],
-    [10, 'turn', 10, 'turn'],
-    [10, 's', 10, 's'],
-    [10, 's', 10000, 'ms'],
-    [10, 'ms', 0.01, 's'],
-    [10, 'ms', 10, 'ms'],
-    [10, 'Hz', 10, 'Hz'],
-    [10, 'Hz', 0.01, 'kHz'],
-    [10, 'kHz', 10000, 'Hz'],
-    [10, 'kHz', 10, 'kHz'],
-    [10, 'dpi', 10, 'dpi'],
-    [10, 'dpi', 25.4, 'dpcm'],
-    [10, 'dpi', 960, 'dppx'],
-    [10, 'dpcm', 3.93701, 'dpi'],
-    [10, 'dpcm', 10, 'dpcm'],
-    [10, 'dpcm', 377.95276, 'dppx'],
-    [10, 'dppx', 0.10417, 'dpi'],
-    [10, 'dppx', 0.26458, 'dpcm'],
-    [10, 'dppx', 10, 'dppx'],
-  ];
-
-  conversions.forEach(function (e) {
-    const value = e[0];
-    const unit = e[1];
-    const expected = e[2];
-    const targetUnit = e[3];
-
-    assert.is(
-      convertUnit(value, unit, targetUnit),
-      expected,
-      unit + ' -> ' + targetUnit
-    );
-  });
-});
-
-test('invalid conversions', () => {
-  const invalid_units = {
-    px: [
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    cm: [
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    mm: [
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    q: [
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    in: [
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    pt: [
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    pc: [
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    deg: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    grad: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    rad: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    turn: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    s: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    ms: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      'Hz',
-      'kHz',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    Hz: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    kHz: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'dpi',
-      'dpcm',
-      'dppx',
-    ],
-    dpi: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-    ],
-    dpcm: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-    ],
-    dppx: [
-      'px',
-      'cm',
-      'mm',
-      'in',
-      'pt',
-      'pc',
-      'deg',
-      'grad',
-      'rad',
-      'turn',
-      's',
-      'ms',
-      'Hz',
-      'kHz',
-    ],
-  };
-
-  for (const unit in invalid_units) {
-    invalid_units[unit].forEach((targetUnit) => {
-      let failed = false;
-
-      try {
-        convertUnit(10, unit, targetUnit);
-      } catch (e) {
-        failed = true;
-      }
-
-      assert.ok(failed, unit + ' -> ' + targetUnit);
-    });
-  }
-});
-
-test('precision', () => {
-  const precision = 10;
-  const conversions = [
-    // source value, source unit, expected value, target unit
-    [10, 'px', 0.2645833333, 'cm'],
-    [10, 'px', 2.6458333333, 'mm'],
-    [10, 'px', 0.1041666667, 'in'],
-    [10, 'cm', 377.9527559055, 'px'],
-  ];
-
-  conversions.forEach((e) => {
-    const value = e[0];
-    const unit = e[1];
-    const expected = e[2];
-    const targetUnit = e[3];
-
-    assert.is(
-      convertUnit(value, unit, targetUnit, precision),
-      expected,
-      unit + ' -> ' + targetUnit
-    );
-  });
-});
-
-test('falsey precision', () => {
-  assert.is(convertUnit(10, 'px', 'cm', false), 0.26458333333333334);
-});
-
-test.run();