postcss-calc 6.0.2 → 7.0.3

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# 7.0.3
+
+- Fixed: substracted css-variable from zero ([#111](https://github.com/postcss/postcss-calc/issues/111))
+
+# 7.0.2
+
+- Fixed: incorrect reduction of subtraction from zero ([#88](https://github.com/postcss/postcss-calc/issues/88))
+- Fixed: doesn't remove calc for single function
+- Fixed: relax parser on unknown units ([#76](https://github.com/postcss/postcss-calc/issues/76))
+- Fixed: handle numbers with exponen composed ([#83](https://github.com/postcss/postcss-calc/pull/83))
+- Fixed: handle plus sign before value ([#79](https://github.com/postcss/postcss-calc/pull/79))
+- Fixed: better handle precision for nested calc ([#75](https://github.com/postcss/postcss-calc/pull/75))
+- Fixed: properly handle nested add and sub expression inside sub expression ([#64](https://github.com/postcss/postcss-calc/issues/64))
+- Fixed: handle uppercase units and functions ([#71](https://github.com/postcss/postcss-calc/pull/71))
+- Fixed: do not break `calc` with single var ([cssnano/cssnano#725](https://github.com/cssnano/cssnano/issues/725))
+- Updated: `postcss` to 7.0.27 (patch)
+- Updated: `postcss-selector-parser` to 6.0.2
+- Updated: `postcss-value-parser` to 4.0.2
+
+# 7.0.1
+
+- Updated: `postcss` to 7.0.2 (patch)
+- Updated: `postcss-selector-parser` to 5.0.0-rc.4 (patch)
+- Updated: `postcss-value-parser` to 3.3.1 (patch)
+
+# 7.0.0
+
+- Changed: Updated postcss-selector-parser to version 5.0.0-rc.3
+- Changed: Dropped reduce-css-calc as a dependency
+- Fixed: Support constant() and env() ([#42](https://github.com/postcss/postcss-calc/issues/42), [#48](https://github.com/postcss/postcss-calc/issues/48))
+- Fixed: Support custom properties with "calc" in its name ([#50](https://github.com/postcss/postcss-calc/issues/50))
+- Fixed: Remove unnecessary whitespace around `*` and `/` ([cssnano#625](https://github.com/cssnano/cssnano/issues/625))
+- Fixed: Arithmetic bugs around subtraction ([#49](https://github.com/postcss/postcss-calc/issues/49))
+- Fixed: Handling of nested calc statements ([reduce-css-calc#49](https://github.com/MoOx/reduce-css-calc/issues/49))
+- Fixed: Bugs regarding complex calculations ([reduce-cs-calc#45](https://github.com/MoOx/reduce-css-calc/issues/45))
+- Fixed: `100%` incorrectly being transformed to `1` ([reduce-css-calc#44](https://github.com/MoOx/reduce-css-calc/issues/44))
+- Added: support for case-insensitive calc statements
+
 # 6.0.2 - 2018-09-25
 
 - Fixed: use PostCSS 7 (thanks to @douglasduteil)

package/README.md

@@ -1,16 +1,19 @@
-# 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]
+[![Build Status][cli-img]][cli-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.
+[PostCSS Calc] lets you reduce `calc()` references whenever it's possible. This
+can be particularly useful with the [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).
+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,7 +34,7 @@ var output = postcss()
   .css
 ```
 
-**Example** (with [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) enabled as well):
+**Example** (with [PostCSS Custom Properties] enabled as well):
 
 ```js
 // dependencies
@@ -86,7 +89,7 @@ h1 {
 }
 ```
 
-Checkout [tests](src/__tests__/index.js) for more examples.
+Checkout [tests] for more examples.
 
 ### Options
 
@@ -103,7 +106,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()
@@ -157,15 +161,29 @@ div[data-size="calc(3*3)"] {
 
 ## 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)
+
+[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
+[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/dist/index.js

@@ -1,18 +1,17 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _postcss = require('postcss');
+var _postcss = require("postcss");
 
-var _transform = require('./lib/transform');
-
-var _transform2 = _interopRequireDefault(_transform);
+var _transform = _interopRequireDefault(require("./lib/transform"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = (0, _postcss.plugin)('postcss-calc', function (opts) {
+var _default = (0, _postcss.plugin)('postcss-calc', function (opts) {
   var options = Object.assign({
     precision: 5,
     preserve: false,
@@ -20,15 +19,24 @@ exports.default = (0, _postcss.plugin)('postcss-calc', function (opts) {
     mediaQueries: false,
     selectors: false
   }, opts);
-
   return function (css, result) {
     css.walk(function (node) {
       var type = node.type;
 
-      if (type === 'decl') (0, _transform2.default)(node, "value", options, result);
-      if (type === 'atrule' && options.mediaQueries) (0, _transform2.default)(node, "params", options, result);
-      if (type === 'rule' && options.selectors) (0, _transform2.default)(node, "selector", options, result);
+      if (type === 'decl') {
+        (0, _transform.default)(node, "value", options, result);
+      }
+
+      if (type === 'atrule' && options.mediaQueries) {
+        (0, _transform.default)(node, "params", options, result);
+      }
+
+      if (type === 'rule' && options.selectors) {
+        (0, _transform.default)(node, "selector", options, result);
+      }
     });
   };
 });
-module.exports = exports['default'];
+
+exports.default = _default;
+module.exports = exports.default;

package/dist/lib/convertUnit.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var 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
+  }
+};
+
+function convertUnit(value, sourceUnit, targetUnit, precision) {
+  var sourceUnitNormalized = sourceUnit.toLowerCase();
+  var 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);
+  }
+
+  var converted = conversions[targetUnitNormalized][sourceUnitNormalized] * value;
+
+  if (precision !== false) {
+    precision = Math.pow(10, parseInt(precision) || 5);
+    return Math.round(converted * precision) / precision;
+  }
+
+  return converted;
+}
+
+var _default = convertUnit;
+exports.default = _default;
+module.exports = exports.default;

package/dist/lib/reducer.js

@@ -0,0 +1,340 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _convertUnit = _interopRequireDefault(require("./convertUnit"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function isEqual(left, right) {
+  return left.type === right.type && left.value === right.value;
+}
+
+function isValueType(type) {
+  switch (type) {
+    case 'LengthValue':
+    case 'AngleValue':
+    case 'TimeValue':
+    case 'FrequencyValue':
+    case 'ResolutionValue':
+    case 'EmValue':
+    case 'ExValue':
+    case 'ChValue':
+    case 'RemValue':
+    case 'VhValue':
+    case 'VwValue':
+    case 'VminValue':
+    case 'VmaxValue':
+    case 'PercentageValue':
+    case 'Number':
+      return true;
+  }
+
+  return false;
+}
+
+function flip(operator) {
+  return operator === '+' ? '-' : '+';
+}
+
+function flipValue(node) {
+  if (isValueType(node.type)) {
+    node.value = -node.value;
+  } else if (node.type === 'MathExpression') {
+    if (node.operator === '*' || node.operator === '/') {
+      node.left = flipValue(node.left);
+    } else {
+      node.left = flipValue(node.left);
+      node.right = flipValue(node.right);
+    }
+  }
+
+  return node;
+}
+
+function reduceAddSubExpression(node, precision) {
+  // something + 0 => something
+  // something - 0 => something
+  if (isValueType(node.right.type) && node.right.value === 0) {
+    return node.left;
+  } // 0 + something => something
+
+
+  if (isValueType(node.left.type) && node.left.value === 0 && node.operator === "+") {
+    return node.right;
+  } // 0 - something => -something
+
+
+  if (isValueType(node.left.type) && node.left.value === 0 && node.operator === "-" && !isCSSFunction(node.right)) {
+    return flipValue(node.right);
+  } // value + value
+  // value - value
+
+
+  if (isValueType(node.left.type) && node.left.type === node.right.type) {
+    var operator = node.operator;
+
+    var _covertNodesUnits = covertNodesUnits(node.left, node.right, precision),
+        left = _covertNodesUnits.left,
+        right = _covertNodesUnits.right;
+
+    if (operator === "+") {
+      left.value += right.value;
+    } else {
+      left.value -= right.value;
+    }
+
+    return left;
+  } // value <op> (expr)
+
+
+  if (node.right.type === 'MathExpression' && (node.right.operator === '+' || node.right.operator === '-')) {
+    // something - (something + something) => something - something - something
+    // something - (something - something) => something - something + something
+    if ((node.right.operator === '+' || node.right.operator === '-') && node.operator === '-') {
+      node.right.operator = flip(node.right.operator);
+    }
+
+    if (isValueType(node.left.type)) {
+      // value + (value + something) => value + something
+      // value + (value - something) => value - something
+      // value - (value + something) => value - something
+      // value - (value - something) => value + something
+      if (node.left.type === node.right.left.type) {
+        var _left = node.left,
+            _operator = node.operator,
+            _right = node.right;
+        node.left = reduce({
+          type: 'MathExpression',
+          operator: _operator,
+          left: _left,
+          right: _right.left
+        });
+        node.operator = _right.operator;
+        node.right = _right.right;
+        return reduce(node, precision);
+      } // something + (something + value) => dimension + something
+      // something + (something - value) => dimension + something
+      // something - (something + value) => dimension - something
+      // something - (something - value) => dimension - something
+
+
+      if (node.left.type === node.right.right.type) {
+        var _left2 = node.left,
+            _right2 = node.right;
+        node.left = reduce({
+          type: 'MathExpression',
+          operator: _right2.operator,
+          left: _left2,
+          right: _right2.right
+        });
+        node.right = _right2.left;
+        return reduce(node, precision);
+      }
+    }
+  } // (expr) <op> value
+
+
+  if (node.left.type === 'MathExpression' && (node.left.operator === '+' || node.left.operator === '-') && isValueType(node.right.type)) {
+    // (value + something) + value => value + something
+    // (value - something) + value => value - something
+    // (value + something) - value => value + something
+    // (value - something) - value => value - something
+    if (node.right.type === node.left.left.type) {
+      var _left3 = node.left,
+          _operator2 = node.operator,
+          _right3 = node.right;
+      _left3.left = reduce({
+        type: 'MathExpression',
+        operator: _operator2,
+        left: _left3.left,
+        right: _right3
+      }, precision);
+      return reduce(_left3, precision);
+    } // (something + dimension) + dimension => something + dimension
+    // (something - dimension) + dimension => something - dimension
+    // (something + dimension) - dimension => something + dimension
+    // (something - dimension) - dimension => something - dimension
+
+
+    if (node.right.type === node.left.right.type) {
+      var _left4 = node.left,
+          _operator3 = node.operator,
+          _right4 = node.right;
+
+      if (_left4.operator === '-') {
+        _left4.operator = _operator3 === '-' ? '-' : '+';
+        _left4.right = reduce({
+          type: 'MathExpression',
+          operator: _operator3 === '-' ? '+' : '-',
+          left: _right4,
+          right: _left4.right
+        }, precision);
+      } else {
+        _left4.right = reduce({
+          type: 'MathExpression',
+          operator: _operator3,
+          left: _left4.right,
+          right: _right4
+        }, precision);
+      }
+
+      if (_left4.right.value < 0) {
+        _left4.right.value *= -1;
+        _left4.operator = _left4.operator === '-' ? '+' : '-';
+      }
+
+      _left4.parenthesized = node.parenthesized;
+      return reduce(_left4, precision);
+    }
+  } // (expr) + (expr) => number
+  // (expr) - (expr) => number
+
+
+  if (node.right.type === 'MathExpression' && node.left.type === 'MathExpression') {
+    if (isEqual(node.left.right, node.right.right)) {
+      var newNodes = covertNodesUnits(node.left.left, node.right.left, precision);
+      node.left = newNodes.left;
+      node.right = newNodes.right;
+      return reduce(node);
+    }
+
+    if (isEqual(node.left.right, node.right.left)) {
+      var _newNodes = covertNodesUnits(node.left.left, node.right.right, precision);
+
+      node.left = _newNodes.left;
+      node.right = _newNodes.right;
+      return reduce(node);
+    }
+  }
+
+  return node;
+}
+
+function reduceDivisionExpression(node) {
+  if (!isValueType(node.right.type)) {
+    return node;
+  }
+
+  if (node.right.type !== 'Number') {
+    throw new Error(`Cannot divide by "${node.right.unit}", number expected`);
+  }
+
+  if (node.right.value === 0) {
+    throw new Error('Cannot divide by zero');
+  } // something / value
+
+
+  if (isValueType(node.left.type)) {
+    node.left.value /= node.right.value;
+    return node.left;
+  }
+
+  return node;
+}
+
+function reduceMultiplicationExpression(node) {
+  // (expr) * number
+  if (node.left.type === 'MathExpression' && node.right.type === 'Number') {
+    if (isValueType(node.left.left.type) && isValueType(node.left.right.type)) {
+      node.left.left.value *= node.right.value;
+      node.left.right.value *= node.right.value;
+      return node.left;
+    }
+  } // something * number
+
+
+  if (isValueType(node.left.type) && node.right.type === 'Number') {
+    node.left.value *= node.right.value;
+    return node.left;
+  } // number * (expr)
+
+
+  if (node.left.type === 'Number' && node.right.type === 'MathExpression') {
+    if (isValueType(node.right.left.type) && isValueType(node.right.right.type)) {
+      node.right.left.value *= node.left.value;
+      node.right.right.value *= node.left.value;
+      return node.right;
+    }
+  } // number * something
+
+
+  if (node.left.type === 'Number' && isValueType(node.right.type)) {
+    node.right.value *= node.left.value;
+    return node.right;
+  }
+
+  return node;
+}
+
+function covertNodesUnits(left, right, precision) {
+  switch (left.type) {
+    case 'LengthValue':
+    case 'AngleValue':
+    case 'TimeValue':
+    case 'FrequencyValue':
+    case 'ResolutionValue':
+      if (right.type === left.type && right.unit && left.unit) {
+        var converted = (0, _convertUnit.default)(right.value, right.unit, left.unit, precision);
+        right = {
+          type: left.type,
+          value: converted,
+          unit: left.unit
+        };
+      }
+
+      return {
+        left,
+        right
+      };
+
+    default:
+      return {
+        left,
+        right
+      };
+  }
+}
+
+function reduce(node, precision) {
+  if (node.type === "MathExpression") {
+    node.left = reduce(node.left, precision);
+    node.right = reduce(node.right, precision);
+
+    switch (node.operator) {
+      case "+":
+      case "-":
+        return reduceAddSubExpression(node, precision);
+
+      case "/":
+        return reduceDivisionExpression(node, precision);
+
+      case "*":
+        return reduceMultiplicationExpression(node, precision);
+    }
+
+    return node;
+  }
+
+  return node;
+}
+
+var _default = reduce;
+exports.default = _default;
+
+function isCSSFunction(node) {
+  if (node.type === "Function") {
+    return true;
+  }
+
+  if (node.type === "MathExpression") {
+    return isCSSFunction(node.left) || isCSSFunction(node.right);
+  }
+
+  return false;
+}
+
+module.exports = exports.default;