postcss-calc 8.2.0 → 8.2.4

package/README.md

@@ -1,12 +1,9 @@
 # PostCSS Calc [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][PostCSS]
 
 [![NPM Version][npm-img]][npm-url]
-[![Build Status][cli-img]][cli-url]
 [![Support Chat][git-img]][git-url]
 
-[PostCSS Calc] lets you reduce `calc()` references whenever it's possible. This
-can be particularly useful with the [PostCSS Custom Properties] plugin.
-
+[PostCSS Calc] lets you reduce `calc()` references whenever it's possible.
 When multiple units are mixed together in the same expression, the `calc()`
 statement is left as is, to fallback to the [W3C calc() implementation].
 
@@ -34,61 +31,27 @@ var output = postcss()
   .css
 ```
 
-**Example** (with [PostCSS Custom Properties] enabled as well):
-
-```js
-// dependencies
-var fs = require("fs")
-var postcss = require("postcss")
-var customProperties = require("postcss-custom-properties")
-var calc = require("postcss-calc")
-
-// css to be processed
-var css = fs.readFileSync("input.css", "utf8")
-
-// process css
-var output = postcss()
-  .use(customProperties())
-  .use(calc())
-  .process(css)
-  .css
-```
-
 Using this `input.css`:
 
 ```css
-:root {
-  --main-font-size: 16px;
-}
-
-body {
-  font-size: var(--main-font-size);
-}
-
 h1 {
-  font-size: calc(var(--main-font-size) * 2);
+  font-size: calc(16px * 2);
   height: calc(100px - 2em);
-  margin-bottom: calc(
-      var(--main-font-size)
-      * 1.5
-    )
+  width: calc(2*var(--base-width));
+  margin-bottom: calc(16px * 1.5);
 }
 ```
 
 you will get:
 
 ```css
-body {
-  font-size: 16px
-}
-
 h1 {
   font-size: 32px;
   height: calc(100px - 2em);
+  width: calc(2*var(--base-width));
   margin-bottom: 24px
 }
 ```
-
 Checkout [tests] for more examples.
 
 ### Options
@@ -159,6 +122,9 @@ div[data-size="calc(3*3)"] {
 
 ---
 
+## Related PostCSS plugins
+To replace the value of CSS custom properties at build time, try [PostCSS Custom Properties].
+
 ## Contributing
 
 Work on a branch, install dev-dependencies, respect coding style & run tests
@@ -175,8 +141,6 @@ npm test
 
 ## [License](LICENSE)
 
-[cli-img]: https://img.shields.io/travis/postcss/postcss-calc/master.svg
-[cli-url]: https://travis-ci.org/postcss/postcss-calc
 [git-img]: https://img.shields.io/badge/support-chat-blue.svg
 [git-url]: https://gitter.im/postcss/postcss
 [npm-img]: https://img.shields.io/npm/v/postcss-calc.svg

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-calc",
-  "version": "8.2.0",
+  "version": "8.2.4",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
     "css",
@@ -9,10 +9,10 @@
     "calculation",
     "calc"
   ],
-  "main": "dist/index.js",
+  "main": "src/index.js",
   "types": "types/index.d.ts",
   "files": [
-    "dist",
+    "src",
     "types",
     "LICENSE"
   ],
@@ -22,38 +22,41 @@
   "eslintConfig": {
     "extends": [
       "eslint:recommended",
-      "plugin:import/recommended"
+      "prettier"
+    ],
+    "env": {
+      "node": true,
+      "es2017": true
+    },
+    "ignorePatterns": [
+      "src/parser.js"
     ],
     "rules": {
       "curly": "error"
     }
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.5",
-    "@babel/register": "^7.16.7",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "eslint": "^8.5.0",
-    "eslint-plugin-import": "^2.25.3",
+    "@types/node": "^17.0.15",
+    "eslint": "^8.8.0",
+    "eslint-config-prettier": "^8.3.0",
     "jison-gho": "^0.6.1-216",
     "postcss": "^8.2.2",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.5.4",
-    "uvu": "^0.5.2"
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.5",
+    "uvu": "^0.5.3"
   },
   "dependencies": {
-    "postcss-selector-parser": "^6.0.2",
-    "postcss-value-parser": "^4.0.2"
+    "postcss-selector-parser": "^6.0.9",
+    "postcss-value-parser": "^4.2.0"
   },
   "peerDependencies": {
     "postcss": "^8.2.2"
   },
   "scripts": {
-    "build": "rimraf dist && babel src --out-dir dist --ignore src/__tests__/**/*.js && jison src/parser.jison -o dist/parser.js",
+    "build": "jison src/parser.jison -o src/parser.js",
     "lint": "eslint src && tsc",
     "pretest": "pnpm run build",
-    "test": "uvu -r @babel/register src/__tests__"
+    "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[![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"
+  "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/__tests__/convertUnit.js

@@ -0,0 +1,421 @@
+'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();