postcss-calc 8.2.3 → 9.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-calc",
-  "version": "8.2.3",
+  "version": "9.0.0",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
     "css",
@@ -9,51 +9,61 @@
     "calculation",
     "calc"
   ],
-  "main": "dist/index.js",
+  "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": [
-    "dist",
+    "src",
     "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",
-      "plugin:import/recommended"
+      "prettier"
+    ],
+    "env": {
+      "node": true,
+      "es2017": true
+    },
+    "ignorePatterns": [
+      "src/parser.js"
     ],
     "rules": {
       "curly": "error"
     }
   },
+  "engines": {
+    "node": "^14 || ^16 || >=18.0"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-    "@babel/register": "^7.16.9",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "eslint": "^8.7.0",
-    "eslint-plugin-import": "^2.25.4",
+    "@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",
-    "rimraf": "^3.0.2",
-    "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.2",
-    "postcss-value-parser": "^4.0.2"
+    "postcss-selector-parser": "^6.0.11",
+    "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",
-    "lint": "eslint src && tsc",
-    "pretest": "pnpm run build",
-    "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[![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/index.js

@@ -0,0 +1,51 @@
+'use strict';
+const transform = require('./lib/transform.js');
+
+/**
+ * @typedef {{precision?: number | false,
+ *          preserve?: boolean,
+ *          warnWhenCannotResolve?: boolean,
+ *          mediaQueries?: boolean,
+ *          selectors?: boolean}} PostCssCalcOptions
+ */
+/**
+ * @type {import('postcss').PluginCreator<PostCssCalcOptions>}
+ * @param {PostCssCalcOptions} opts
+ * @return {import('postcss').Plugin}
+ */
+function pluginCreator(opts) {
+  const options = Object.assign(
+    {
+      precision: 5,
+      preserve: false,
+      warnWhenCannotResolve: false,
+      mediaQueries: false,
+      selectors: false,
+    },
+    opts
+  );
+
+  return {
+    postcssPlugin: 'postcss-calc',
+    OnceExit(css, { result }) {
+      css.walk((node) => {
+        const { type } = node;
+        if (type === 'decl') {
+          transform(node, 'value', options, result);
+        }
+
+        if (type === 'atrule' && options.mediaQueries) {
+          transform(node, 'params', options, result);
+        }
+
+        if (type === 'rule' && options.selectors) {
+          transform(node, 'selector', options, result);
+        }
+      });
+    },
+  };
+}
+
+pluginCreator.postcss = true;
+
+module.exports = pluginCreator;

package/src/lib/convertUnit.js

@@ -0,0 +1,160 @@
+'use strict';
+/**
+ * @type {{[key:string]: {[key:string]: number}}}
+ */
+const conversions = {
+  // Absolute length units
+  px: {
+    px: 1,
+    cm: 96 / 2.54,
+    mm: 96 / 25.4,
+    q: 96 / 101.6,
+    in: 96,
+    pt: 96 / 72,
+    pc: 16,
+  },
+  cm: {
+    px: 2.54 / 96,
+    cm: 1,
+    mm: 0.1,
+    q: 0.025,
+    in: 2.54,
+    pt: 2.54 / 72,
+    pc: 2.54 / 6,
+  },
+  mm: {
+    px: 25.4 / 96,
+    cm: 10,
+    mm: 1,
+    q: 0.25,
+    in: 25.4,
+    pt: 25.4 / 72,
+    pc: 25.4 / 6,
+  },
+  q: {
+    px: 101.6 / 96,
+    cm: 40,
+    mm: 4,
+    q: 1,
+    in: 101.6,
+    pt: 101.6 / 72,
+    pc: 101.6 / 6,
+  },
+  in: {
+    px: 1 / 96,
+    cm: 1 / 2.54,
+    mm: 1 / 25.4,
+    q: 1 / 101.6,
+    in: 1,
+    pt: 1 / 72,
+    pc: 1 / 6,
+  },
+  pt: {
+    px: 0.75,
+    cm: 72 / 2.54,
+    mm: 72 / 25.4,
+    q: 72 / 101.6,
+    in: 72,
+    pt: 1,
+    pc: 12,
+  },
+  pc: {
+    px: 0.0625,
+    cm: 6 / 2.54,
+    mm: 6 / 25.4,
+    q: 6 / 101.6,
+    in: 6,
+    pt: 6 / 72,
+    pc: 1,
+  },
+  // Angle units
+  deg: {
+    deg: 1,
+    grad: 0.9,
+    rad: 180 / Math.PI,
+    turn: 360,
+  },
+  grad: {
+    deg: 400 / 360,
+    grad: 1,
+    rad: 200 / Math.PI,
+    turn: 400,
+  },
+  rad: {
+    deg: Math.PI / 180,
+    grad: Math.PI / 200,
+    rad: 1,
+    turn: Math.PI * 2,
+  },
+  turn: {
+    deg: 1 / 360,
+    grad: 0.0025,
+    rad: 0.5 / Math.PI,
+    turn: 1,
+  },
+  // Duration units
+  s: {
+    s: 1,
+    ms: 0.001,
+  },
+  ms: {
+    s: 1000,
+    ms: 1,
+  },
+  // Frequency units
+  hz: {
+    hz: 1,
+    khz: 1000,
+  },
+  khz: {
+    hz: 0.001,
+    khz: 1,
+  },
+  // Resolution units
+  dpi: {
+    dpi: 1,
+    dpcm: 1 / 2.54,
+    dppx: 1 / 96,
+  },
+  dpcm: {
+    dpi: 2.54,
+    dpcm: 1,
+    dppx: 2.54 / 96,
+  },
+  dppx: {
+    dpi: 96,
+    dpcm: 96 / 2.54,
+    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();
+  const targetUnitNormalized = targetUnit.toLowerCase();
+
+  if (!conversions[targetUnitNormalized]) {
+    throw new Error('Cannot convert to ' + targetUnit);
+  }
+
+  if (!conversions[targetUnitNormalized][sourceUnitNormalized]) {
+    throw new Error('Cannot convert from ' + sourceUnit + ' to ' + targetUnit);
+  }
+
+  const converted =
+    conversions[targetUnitNormalized][sourceUnitNormalized] * value;
+
+  if (precision !== false) {
+    precision = Math.pow(10, Math.ceil(precision) || 5);
+
+    return Math.round(converted * precision) / precision;
+  }
+
+  return converted;
+}
+
+module.exports = convertUnit;