postcss-calc 6.0.0 → 7.0.1

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# 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)
+
+# 6.0.1 - 2017-10-10
+
+- Fixed: throwing error for attribute selectors without a value
+
 # 6.0.0 - 2017-05-08
 
 - Breaking: Updated PostCSS from v5.x to v6.x, and reduce-css-calc from v1.x

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](test) 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,15 @@ 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/convert.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _cssUnitConverter = _interopRequireDefault(require("css-unit-converter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function convertNodes(left, right, precision) {
+  switch (left.type) {
+    case 'LengthValue':
+    case 'AngleValue':
+    case 'TimeValue':
+    case 'FrequencyValue':
+    case 'ResolutionValue':
+      return convertAbsoluteLength(left, right, precision);
+
+    default:
+      return {
+        left,
+        right
+      };
+  }
+}
+
+function convertAbsoluteLength(left, right, precision) {
+  if (right.type === left.type) {
+    right = {
+      type: left.type,
+      value: (0, _cssUnitConverter.default)(right.value, right.unit, left.unit, precision),
+      unit: left.unit
+    };
+  }
+
+  return {
+    left,
+    right
+  };
+}
+
+var _default = convertNodes;
+exports.default = _default;
+module.exports = exports.default;

package/dist/lib/reducer.js

@@ -0,0 +1,255 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _convert = _interopRequireDefault(require("./convert"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function reduce(node, precision) {
+  if (node.type === "MathExpression") return reduceMathExpression(node, precision);
+  return node;
+}
+
+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 'Value':
+      return true;
+  }
+
+  return false;
+}
+
+function convertMathExpression(node, precision) {
+  var nodes = (0, _convert.default)(node.left, node.right, precision);
+  var left = reduce(nodes.left, precision);
+  var right = reduce(nodes.right, precision);
+
+  if (left.type === "MathExpression" && right.type === "MathExpression") {
+    if (left.operator === '/' && right.operator === '*' || left.operator === '-' && right.operator === '+' || left.operator === '*' && right.operator === '/' || left.operator === '+' && right.operator === '-') {
+      if (isEqual(left.right, right.right)) nodes = (0, _convert.default)(left.left, right.left, precision);else if (isEqual(left.right, right.left)) nodes = (0, _convert.default)(left.left, right.right, precision);
+      left = reduce(nodes.left, precision);
+      right = reduce(nodes.right, precision);
+    }
+  }
+
+  node.left = left;
+  node.right = right;
+  return node;
+}
+
+function flip(operator) {
+  return operator === '+' ? '-' : '+';
+}
+
+function flipValue(node) {
+  if (isValueType(node.type)) node.value = -node.value;else if (node.type == 'MathExpression') {
+    node.left = flipValue(node.left);
+    node.right = flipValue(node.right);
+  }
+  return node;
+}
+
+function reduceAddSubExpression(node, precision) {
+  var _node = node,
+      left = _node.left,
+      right = _node.right,
+      op = _node.operator;
+  if (left.type === 'Function' || right.type === 'Function') return node; // something + 0 => something
+  // something - 0 => something
+
+  if (right.value === 0) return left; // 0 + something => something
+
+  if (left.value === 0 && op === "+") return right; // 0 - something => -something
+
+  if (left.value === 0 && op === "-") return flipValue(right); // value + value
+  // value - value
+
+  if (left.type === right.type && isValueType(left.type)) {
+    node = Object.assign({}, left);
+    if (op === "+") node.value = left.value + right.value;else node.value = left.value - right.value;
+  } // value <op> (expr)
+
+
+  if (isValueType(left.type) && (right.operator === '+' || right.operator === '-') && right.type === 'MathExpression') {
+    // value + (value + something) => (value + value) + something
+    // value + (value - something) => (value + value) - something
+    // value - (value + something) => (value - value) - something
+    // value - (value - something) => (value - value) + something
+    if (left.type === right.left.type) {
+      node = Object.assign({}, node);
+      node.left = reduce({
+        type: 'MathExpression',
+        operator: op,
+        left: left,
+        right: right.left
+      }, precision);
+      node.right = right.right;
+      node.operator = op === '-' ? flip(right.operator) : right.operator;
+      return reduce(node, precision);
+    } // value + (something + value) => (value + value) + something
+    // value + (something - value) => (value - value) + something
+    // value - (something + value) => (value - value) - something
+    // value - (something - value) => (value + value) - something
+    else if (left.type === right.right.type) {
+        node = Object.assign({}, node);
+        node.left = reduce({
+          type: 'MathExpression',
+          operator: op === '-' ? flip(right.operator) : right.operator,
+          left: left,
+          right: right.right
+        }, precision);
+        node.right = right.left;
+        return reduce(node, precision);
+      } // value - (something + something) => value - something - something
+      else if (op === '-' && right.operator === '+') {
+          node = Object.assign({}, node);
+          node.right.operator = '-';
+          return reduce(node, precision);
+        }
+  } // (expr) <op> value
+
+
+  if (left.type === 'MathExpression' && (left.operator === '+' || left.operator === '-') && isValueType(right.type)) {
+    // (value + something) + value => (value + value) + something
+    // (value - something) + value => (value + value) - something
+    // (value + something) - value => (value - value) + something
+    // (value - something) - value => (value - value) - something
+    if (right.type === left.left.type) {
+      node = Object.assign({}, left);
+      node.left = reduce({
+        type: 'MathExpression',
+        operator: op,
+        left: left.left,
+        right: right
+      }, precision);
+      return reduce(node, precision);
+    } // (something + value) + value => something + (value + value)
+    // (something - value1) + value2 => something - (value2 - value1)
+    // (something + value) - value => something + (value - value)
+    // (something - value) - value => something - (value + value)
+    else if (right.type === left.right.type) {
+        node = Object.assign({}, left);
+
+        if (left.operator === '-') {
+          node.right = reduce({
+            type: 'MathExpression',
+            operator: flip(op),
+            left: left.right,
+            right: right
+          }, precision);
+
+          if (node.right.value && node.right.value < 0) {
+            node.right.value = Math.abs(node.right.value);
+            node.operator = '+';
+          } else {
+            node.operator = left.operator;
+          }
+        } else {
+          node.right = reduce({
+            type: 'MathExpression',
+            operator: op,
+            left: left.right,
+            right: right
+          }, precision);
+        }
+
+        if (node.right.value < 0) {
+          node.right.value *= -1;
+          node.operator = node.operator === '-' ? '+' : '-';
+        }
+
+        return reduce(node, precision);
+      }
+  }
+
+  if (left.type === 'MathExpression' && right.type === 'MathExpression' && op === '-' && right.operator === '-') {
+    node.right.operator = flip(node.right.operator);
+  }
+
+  return node;
+}
+
+function reduceDivisionExpression(node) {
+  if (!isValueType(node.right.type)) return node;
+  if (node.right.type !== 'Value') 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) * value
+  if (node.left.type === 'MathExpression' && node.right.type === 'Value') {
+    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 * value
+  else if (isValueType(node.left.type) && node.right.type === 'Value') {
+      node.left.value *= node.right.value;
+      return node.left;
+    } // value * (expr)
+    else if (node.left.type === 'Value' && 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;
+        }
+      } // value * something
+      else if (node.left.type === 'Value' && isValueType(node.right.type)) {
+          node.right.value *= node.left.value;
+          return node.right;
+        }
+
+  return node;
+}
+
+function reduceMathExpression(node, precision) {
+  node = convertMathExpression(node, precision);
+
+  switch (node.operator) {
+    case "+":
+    case "-":
+      return reduceAddSubExpression(node, precision);
+
+    case "/":
+      return reduceDivisionExpression(node, precision);
+
+    case "*":
+      return reduceMultiplicationExpression(node);
+  }
+
+  return node;
+}
+
+var _default = reduce;
+exports.default = _default;
+module.exports = exports.default;

package/dist/lib/stringifier.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var order = {
+  "*": 0,
+  "/": 0,
+  "+": 1,
+  "-": 1
+};
+
+function round(value, prec) {
+  if (prec !== false) {
+    var precision = Math.pow(10, prec);
+    return Math.round(value * precision) / precision;
+  }
+
+  return value;
+}
+
+function stringify(node, prec) {
+  switch (node.type) {
+    case "MathExpression":
+      {
+        var left = node.left,
+            right = node.right,
+            op = node.operator;
+        var str = "";
+        if (left.type === 'MathExpression' && order[op] < order[left.operator]) str += `(${stringify(left, prec)})`;else str += stringify(left, prec);
+        str += order[op] ? ` ${node.operator} ` : node.operator;
+        if (right.type === 'MathExpression' && order[op] < order[right.operator]) str += `(${stringify(right, prec)})`;else str += stringify(right, prec);
+        return str;
+      }
+
+    case "Value":
+      return round(node.value, prec);
+
+    case 'Function':
+      return node.value;
+
+    default:
+      return round(node.value, prec) + node.unit;
+  }
+}
+
+function _default(calc, node, originalValue, options, result, item) {
+  var str = stringify(node, options.precision);
+
+  if (node.type === "MathExpression") {
+    // if calc expression couldn't be resolved to a single value, re-wrap it as
+    // a calc()
+    str = `${calc}(${str})`; // if the warnWhenCannotResolve option is on, inform the user that the calc
+    // expression could not be resolved to a single value
+
+    if (options.warnWhenCannotResolve) {
+      result.warn("Could not reduce expression: " + originalValue, {
+        plugin: 'postcss-calc',
+        node: item
+      });
+    }
+  }
+
+  return str;
+}
+
+module.exports = exports.default;

package/dist/lib/transform.js

@@ -1,58 +1,66 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _postcssSelectorParser = require('postcss-selector-parser');
+var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
 
-var _postcssSelectorParser2 = _interopRequireDefault(_postcssSelectorParser);
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 
-var _reduceCssCalc = require('reduce-css-calc');
+var _parser = require("../parser");
 
-var _reduceCssCalc2 = _interopRequireDefault(_reduceCssCalc);
+var _reducer = _interopRequireDefault(require("./reducer"));
+
+var _stringifier = _interopRequireDefault(require("./stringifier"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var MATCH_CALC = /((?:\-[a-z]+\-)?calc)/;
+// eslint-disable-next-line import/no-unresolved
+var MATCH_CALC = /((?:-(moz|webkit)-)?calc)/i;
 
 function transformValue(value, options, result, item) {
-  var reduced = (0, _reduceCssCalc2.default)(value, options.precision);
-  // if the warnWhenCannotResolve option is on, inform the user that the calc
-  // expression could not be resolved to a single value
-  if (options.warnWhenCannotResolve && MATCH_CALC.test(reduced)) {
-    result.warn("Could not reduce expression: " + value, { plugin: 'postcss-calc', node: item });
-  }
-
-  return reduced;
+  return (0, _postcssValueParser.default)(value).walk(function (node) {
+    // skip anything which isn't a calc() function
+    if (node.type !== 'function' || !MATCH_CALC.test(node.value)) return node; // stringify calc expression and produce an AST
+
+    var contents = _postcssValueParser.default.stringify(node.nodes);
+
+    var ast = _parser.parser.parse(contents); // reduce AST to its simplest form, that is, either to a single value
+    // or a simplified calc expression
+
+
+    var reducedAst = (0, _reducer.default)(ast, options.precision, item); // stringify AST and write it back
+
+    node.type = 'word';
+    node.value = (0, _stringifier.default)(node.value, reducedAst, value, options, result, item);
+  }, true).toString();
 }
 
 function transformSelector(value, options, result, item) {
-  return (0, _postcssSelectorParser2.default)(function (selectors) {
+  return (0, _postcssSelectorParser.default)(function (selectors) {
     selectors.walk(function (node) {
       // attribute value
       // e.g. the "calc(3*3)" part of "div[data-size="calc(3*3)"]"
-      if (node.type === 'attribute') {
-        var val = transformValue(node.raws.unquoted, options, result, item);
-        node.value = node.quoted ? '"' + val + '"' : val;
-      }
-
-      // tag value
+      if (node.type === 'attribute' && node.value) {
+        node.setValue(transformValue(node.value, options, result, item));
+      } // tag value
       // e.g. the "calc(3*3)" part of "div:nth-child(2n + calc(3*3))"
-      if (node.type === 'tag') node.value = transformValue(node.value, options, result, item);
 
+
+      if (node.type === 'tag') node.value = transformValue(node.value, options, result, item);
       return;
     });
-  }).process(value).result.toString();
+  }).processSync(value);
 }
 
-exports.default = function (node, property, options, result) {
-  var value = property === "selector" ? transformSelector(node[property], options, result, node) : transformValue(node[property], options, result, node);
-
-  // if the preserve option is enabled and the value has changed, write the
+var _default = function _default(node, property, options, result) {
+  var value = property === "selector" ? transformSelector(node[property], options, result, node) : transformValue(node[property], options, result, node); // if the preserve option is enabled and the value has changed, write the
   // transformed value into a cloned node which is inserted before the current
   // node, preserving the original value. Otherwise, overwrite the original
   // value.
+
   if (options.preserve && node[property] !== value) {
     var clone = node.clone();
     clone[property] = value;
@@ -60,4 +68,5 @@ exports.default = function (node, property, options, result) {
   } else node[property] = value;
 };
 
-module.exports = exports['default'];
+exports.default = _default;
+module.exports = exports.default;