postcss-calc 6.0.1 → 10.1.1

package/README.md

@@ -1,16 +1,16 @@
-# postcss-calc [![Build Status](https://travis-ci.org/postcss/postcss-calc.png)](https://travis-ci.org/postcss/postcss-calc)
+# PostCSS Calc [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][PostCSS]
 
-> [PostCSS](https://github.com/postcss/postcss) plugin to reduce `calc()`.
+[![NPM Version][npm-img]][npm-url]
+[![Support Chat][git-img]][git-url]
 
-This plugin reduce `calc()` references whenever it's possible.
-This can be particularly useful with the [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) plugin.
-
-**Note:** When multiple units are mixed together in the same expression, the `calc()` statement is left as is, to fallback to the [w3c calc() feature](http://www.w3.org/TR/css3-values/#calc).
+[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].
 
 ## Installation
 
-```console
-$ npm install postcss-calc
+```bash
+npm install postcss-calc
 ```
 
 ## Usage
@@ -31,62 +31,28 @@ var output = postcss()
   .css
 ```
 
-**Example** (with [postcss-custom-properties](https://github.com/postcss/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](test) for more examples.
+Checkout [tests] for more examples.
 
 ### Options
 
@@ -103,7 +69,8 @@ var out = postcss()
 
 #### `preserve` (default: `false`)
 
-Allow you to preserve calc() usage in output so browsers will handle decimal precision themselves.
+Allow you to preserve calc() usage in output so browsers will handle decimal
+precision themselves.
 
 ```js
 var out = postcss()
@@ -155,17 +122,32 @@ 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 before submitting a bug fix or a feature.
+Work on a branch, install dev-dependencies, respect coding style & run tests
+before submitting a bug fix or a feature.
 
-```console
-$ git clone https://github.com/postcss/postcss-calc.git
-$ git checkout -b patch-1
-$ npm install
-$ npm test
+```bash
+git clone git@github.com:postcss/postcss-calc.git
+git checkout -b patch-1
+npm install
+npm test
 ```
 
 ## [Changelog](CHANGELOG.md)
 
 ## [License](LICENSE)
+
+[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
+[npm-url]: https://www.npmjs.com/package/postcss-calc
+
+[PostCSS]: https://github.com/postcss
+[PostCSS Calc]: https://github.com/postcss/postcss-calc
+[PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties
+[tests]: src/__tests__/index.js
+[W3C calc() implementation]: https://www.w3.org/TR/css3-values/#calc-notation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-calc",
-  "version": "6.0.1",
+  "version": "10.1.1",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
     "css",
@@ -9,46 +9,42 @@
     "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": {
-    "prepublish": "npm run build && del-cli dist/__tests__",
-    "build": "del-cli dist && cross-env BABEL_ENV=publish babel src --out-dir dist",
-    "pretest": "eslint src && npm run build",
-    "test": "ava src/__tests__/"
-  },
-  "author": "Maxime Thirouin",
+  "author": "Andy Jansson",
   "license": "MIT",
-  "repository": "https://github.com/postcss/postcss-calc.git",
-  "eslintConfig": {
-    "parser": "babel-eslint",
-    "extends": "eslint-config-i-am-meticulous"
+  "engines": {
+    "node": "^18.12 || ^20.9 || >=22.0"
   },
   "devDependencies": {
-    "ava": "^0.19.1",
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.21.0",
-    "babel-eslint": "^7.1.1",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-preset-env": "^1.4.0",
-    "babel-register": "^6.18.0",
-    "cross-env": "^4.0.0",
-    "del-cli": "^0.2.1",
-    "eslint": "^3.12.2",
-    "eslint-config-i-am-meticulous": "^6.0.1",
-    "eslint-plugin-babel": "^4.0.0",
-    "eslint-plugin-import": "^2.2.0"
+    "@types/node": "^22.10.10",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "jison-gho": "0.6.1-216",
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
+    "typescript": "~5.7.3"
   },
   "dependencies": {
-    "css-unit-converter": "^1.1.1",
-    "postcss": "^6.0.0",
-    "postcss-selector-parser": "^2.2.2",
-    "reduce-css-calc": "^2.0.0"
+    "postcss-selector-parser": "^7.0.0",
+    "postcss-value-parser": "^4.2.0"
   },
-  "ava": {
-    "require": "babel-register"
+  "peerDependencies": {
+    "postcss": "^8.4.38"
+  },
+  "scripts": {
+    "build": "jison ./parser.jison -o src/parser.js",
+    "lint": "eslint . && tsc",
+    "test": "node --test"
   }
-}
+}

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;