postcss-calc 7.0.1 → 7.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ # 7.0.2
2
+
3
+ - Fixed: incorrect reduction of subtraction from zero ([#88](https://github.com/postcss/postcss-calc/issues/88))
4
+ - Fixed: doesn't remove calc for single function
5
+ - Fixed: relax parser on unknown units ([#76](https://github.com/postcss/postcss-calc/issues/76))
6
+ - Fixed: handle numbers with exponen composed ([#83](https://github.com/postcss/postcss-calc/pull/83))
7
+ - Fixed: handle plus sign before value ([#79](https://github.com/postcss/postcss-calc/pull/79))
8
+ - Fixed: better handle precision for nested calc ([#75](https://github.com/postcss/postcss-calc/pull/75))
9
+ - Fixed: properly handle nested add and sub expression inside sub expression ([#64](https://github.com/postcss/postcss-calc/issues/64))
10
+ - Fixed: handle uppercase units and functions ([#71](https://github.com/postcss/postcss-calc/pull/71))
11
+ - Fixed: do not break `calc` with single var ([cssnano/cssnano#725](https://github.com/cssnano/cssnano/issues/725))
12
+ - Updated: `postcss` to 7.0.27 (patch)
13
+ - Updated: `postcss-selector-parser` to 6.0.2
14
+ - Updated: `postcss-value-parser` to 4.0.2
15
+
1
16
  # 7.0.1
2
17
 
3
18
  - Updated: `postcss` to 7.0.2 (patch)
package/dist/index.js CHANGED
@@ -22,9 +22,18 @@ var _default = (0, _postcss.plugin)('postcss-calc', function (opts) {
22
22
  return function (css, result) {
23
23
  css.walk(function (node) {
24
24
  var type = node.type;
25
- if (type === 'decl') (0, _transform.default)(node, "value", options, result);
26
- if (type === 'atrule' && options.mediaQueries) (0, _transform.default)(node, "params", options, result);
27
- if (type === 'rule' && options.selectors) (0, _transform.default)(node, "selector", options, result);
25
+
26
+ if (type === 'decl') {
27
+ (0, _transform.default)(node, "value", options, result);
28
+ }
29
+
30
+ if (type === 'atrule' && options.mediaQueries) {
31
+ (0, _transform.default)(node, "params", options, result);
32
+ }
33
+
34
+ if (type === 'rule' && options.selectors) {
35
+ (0, _transform.default)(node, "selector", options, result);
36
+ }
28
37
  });
29
38
  };
30
39
  });
@@ -0,0 +1,157 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var conversions = {
8
+ // Absolute length units
9
+ 'px': {
10
+ 'px': 1,
11
+ 'cm': 96 / 2.54,
12
+ 'mm': 96 / 25.4,
13
+ 'q': 96 / 101.6,
14
+ 'in': 96,
15
+ 'pt': 96 / 72,
16
+ 'pc': 16
17
+ },
18
+ 'cm': {
19
+ 'px': 2.54 / 96,
20
+ 'cm': 1,
21
+ 'mm': 0.1,
22
+ 'q': 0.025,
23
+ 'in': 2.54,
24
+ 'pt': 2.54 / 72,
25
+ 'pc': 2.54 / 6
26
+ },
27
+ 'mm': {
28
+ 'px': 25.4 / 96,
29
+ 'cm': 10,
30
+ 'mm': 1,
31
+ 'q': 0.25,
32
+ 'in': 25.4,
33
+ 'pt': 25.4 / 72,
34
+ 'pc': 25.4 / 6
35
+ },
36
+ 'q': {
37
+ 'px': 101.6 / 96,
38
+ 'cm': 40,
39
+ 'mm': 4,
40
+ 'q': 1,
41
+ 'in': 101.6,
42
+ 'pt': 101.6 / 72,
43
+ 'pc': 101.6 / 6
44
+ },
45
+ 'in': {
46
+ 'px': 1 / 96,
47
+ 'cm': 1 / 2.54,
48
+ 'mm': 1 / 25.4,
49
+ 'q': 1 / 101.6,
50
+ 'in': 1,
51
+ 'pt': 1 / 72,
52
+ 'pc': 1 / 6
53
+ },
54
+ 'pt': {
55
+ 'px': 0.75,
56
+ 'cm': 72 / 2.54,
57
+ 'mm': 72 / 25.4,
58
+ 'q': 72 / 101.6,
59
+ 'in': 72,
60
+ 'pt': 1,
61
+ 'pc': 12
62
+ },
63
+ 'pc': {
64
+ 'px': 0.0625,
65
+ 'cm': 6 / 2.54,
66
+ 'mm': 6 / 25.4,
67
+ 'q': 6 / 101.6,
68
+ 'in': 6,
69
+ 'pt': 6 / 72,
70
+ 'pc': 1
71
+ },
72
+ // Angle units
73
+ 'deg': {
74
+ 'deg': 1,
75
+ 'grad': 0.9,
76
+ 'rad': 180 / Math.PI,
77
+ 'turn': 360
78
+ },
79
+ 'grad': {
80
+ 'deg': 400 / 360,
81
+ 'grad': 1,
82
+ 'rad': 200 / Math.PI,
83
+ 'turn': 400
84
+ },
85
+ 'rad': {
86
+ 'deg': Math.PI / 180,
87
+ 'grad': Math.PI / 200,
88
+ 'rad': 1,
89
+ 'turn': Math.PI * 2
90
+ },
91
+ 'turn': {
92
+ 'deg': 1 / 360,
93
+ 'grad': 0.0025,
94
+ 'rad': 0.5 / Math.PI,
95
+ 'turn': 1
96
+ },
97
+ // Duration units
98
+ 's': {
99
+ 's': 1,
100
+ 'ms': 0.001
101
+ },
102
+ 'ms': {
103
+ 's': 1000,
104
+ 'ms': 1
105
+ },
106
+ // Frequency units
107
+ 'hz': {
108
+ 'hz': 1,
109
+ 'khz': 1000
110
+ },
111
+ 'khz': {
112
+ 'hz': 0.001,
113
+ 'khz': 1
114
+ },
115
+ // Resolution units
116
+ 'dpi': {
117
+ 'dpi': 1,
118
+ 'dpcm': 1 / 2.54,
119
+ 'dppx': 1 / 96
120
+ },
121
+ 'dpcm': {
122
+ 'dpi': 2.54,
123
+ 'dpcm': 1,
124
+ 'dppx': 2.54 / 96
125
+ },
126
+ 'dppx': {
127
+ 'dpi': 96,
128
+ 'dpcm': 96 / 2.54,
129
+ 'dppx': 1
130
+ }
131
+ };
132
+
133
+ function convertUnit(value, sourceUnit, targetUnit, precision) {
134
+ var sourceUnitNormalized = sourceUnit.toLowerCase();
135
+ var targetUnitNormalized = targetUnit.toLowerCase();
136
+
137
+ if (!conversions[targetUnitNormalized]) {
138
+ throw new Error("Cannot convert to " + targetUnit);
139
+ }
140
+
141
+ if (!conversions[targetUnitNormalized][sourceUnitNormalized]) {
142
+ throw new Error("Cannot convert from " + sourceUnit + " to " + targetUnit);
143
+ }
144
+
145
+ var converted = conversions[targetUnitNormalized][sourceUnitNormalized] * value;
146
+
147
+ if (precision !== false) {
148
+ precision = Math.pow(10, parseInt(precision) || 5);
149
+ return Math.round(converted * precision) / precision;
150
+ }
151
+
152
+ return converted;
153
+ }
154
+
155
+ var _default = convertUnit;
156
+ exports.default = _default;
157
+ module.exports = exports.default;
@@ -5,15 +5,10 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
- var _convert = _interopRequireDefault(require("./convert"));
8
+ var _convertUnit = _interopRequireDefault(require("./convertUnit"));
9
9
 
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
11
 
12
- function reduce(node, precision) {
13
- if (node.type === "MathExpression") return reduceMathExpression(node, precision);
14
- return node;
15
- }
16
-
17
12
  function isEqual(left, right) {
18
13
  return left.type === right.type && left.value === right.value;
19
14
  }
@@ -34,167 +29,204 @@ function isValueType(type) {
34
29
  case 'VminValue':
35
30
  case 'VmaxValue':
36
31
  case 'PercentageValue':
37
- case 'Value':
32
+ case 'Number':
38
33
  return true;
39
34
  }
40
35
 
41
36
  return false;
42
37
  }
43
38
 
44
- function convertMathExpression(node, precision) {
45
- var nodes = (0, _convert.default)(node.left, node.right, precision);
46
- var left = reduce(nodes.left, precision);
47
- var right = reduce(nodes.right, precision);
48
-
49
- if (left.type === "MathExpression" && right.type === "MathExpression") {
50
- if (left.operator === '/' && right.operator === '*' || left.operator === '-' && right.operator === '+' || left.operator === '*' && right.operator === '/' || left.operator === '+' && right.operator === '-') {
51
- 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);
52
- left = reduce(nodes.left, precision);
53
- right = reduce(nodes.right, precision);
54
- }
55
- }
56
-
57
- node.left = left;
58
- node.right = right;
59
- return node;
60
- }
61
-
62
39
  function flip(operator) {
63
40
  return operator === '+' ? '-' : '+';
64
41
  }
65
42
 
66
43
  function flipValue(node) {
67
- if (isValueType(node.type)) node.value = -node.value;else if (node.type == 'MathExpression') {
68
- node.left = flipValue(node.left);
69
- node.right = flipValue(node.right);
44
+ if (isValueType(node.type)) {
45
+ node.value = -node.value;
46
+ } else if (node.type === 'MathExpression') {
47
+ if (node.operator === '*' || node.operator === '/') {
48
+ node.left = flipValue(node.left);
49
+ } else {
50
+ node.left = flipValue(node.left);
51
+ node.right = flipValue(node.right);
52
+ }
70
53
  }
54
+
71
55
  return node;
72
56
  }
73
57
 
74
58
  function reduceAddSubExpression(node, precision) {
75
- var _node = node,
76
- left = _node.left,
77
- right = _node.right,
78
- op = _node.operator;
79
- if (left.type === 'Function' || right.type === 'Function') return node; // something + 0 => something
59
+ // something + 0 => something
80
60
  // something - 0 => something
61
+ if (isValueType(node.right.type) && node.right.value === 0) {
62
+ return node.left;
63
+ } // 0 + something => something
64
+
81
65
 
82
- if (right.value === 0) return left; // 0 + something => something
66
+ if (isValueType(node.left.type) && node.left.value === 0 && node.operator === "+") {
67
+ return node.right;
68
+ } // 0 - something => -something
83
69
 
84
- if (left.value === 0 && op === "+") return right; // 0 - something => -something
85
70
 
86
- if (left.value === 0 && op === "-") return flipValue(right); // value + value
71
+ if (isValueType(node.left.type) && node.left.value === 0 && node.operator === "-" && node.right.type !== "Function") {
72
+ return flipValue(node.right);
73
+ } // value + value
87
74
  // value - value
88
75
 
89
- if (left.type === right.type && isValueType(left.type)) {
90
- node = Object.assign({}, left);
91
- if (op === "+") node.value = left.value + right.value;else node.value = left.value - right.value;
76
+
77
+ if (isValueType(node.left.type) && node.left.type === node.right.type) {
78
+ var operator = node.operator;
79
+
80
+ var _covertNodesUnits = covertNodesUnits(node.left, node.right, precision),
81
+ left = _covertNodesUnits.left,
82
+ right = _covertNodesUnits.right;
83
+
84
+ if (operator === "+") {
85
+ left.value += right.value;
86
+ } else {
87
+ left.value -= right.value;
88
+ }
89
+
90
+ return left;
92
91
  } // value <op> (expr)
93
92
 
94
93
 
95
- if (isValueType(left.type) && (right.operator === '+' || right.operator === '-') && right.type === 'MathExpression') {
96
- // value + (value + something) => (value + value) + something
97
- // value + (value - something) => (value + value) - something
98
- // value - (value + something) => (value - value) - something
99
- // value - (value - something) => (value - value) + something
100
- if (left.type === right.left.type) {
101
- node = Object.assign({}, node);
102
- node.left = reduce({
103
- type: 'MathExpression',
104
- operator: op,
105
- left: left,
106
- right: right.left
107
- }, precision);
108
- node.right = right.right;
109
- node.operator = op === '-' ? flip(right.operator) : right.operator;
110
- return reduce(node, precision);
111
- } // value + (something + value) => (value + value) + something
112
- // value + (something - value) => (value - value) + something
113
- // value - (something + value) => (value - value) - something
114
- // value - (something - value) => (value + value) - something
115
- else if (left.type === right.right.type) {
116
- node = Object.assign({}, node);
94
+ if (node.right.type === 'MathExpression' && (node.right.operator === '+' || node.right.operator === '-')) {
95
+ // something - (something + something) => something - something - something
96
+ // something - (something - something) => something - something + something
97
+ if ((node.right.operator === '+' || node.right.operator === '-') && node.operator === '-') {
98
+ node.right.operator = flip(node.right.operator);
99
+ }
100
+
101
+ if (isValueType(node.left.type)) {
102
+ // value + (value + something) => value + something
103
+ // value + (value - something) => value - something
104
+ // value - (value + something) => value - something
105
+ // value - (value - something) => value + something
106
+ if (node.left.type === node.right.left.type) {
107
+ var _left = node.left,
108
+ _operator = node.operator,
109
+ _right = node.right;
117
110
  node.left = reduce({
118
111
  type: 'MathExpression',
119
- operator: op === '-' ? flip(right.operator) : right.operator,
120
- left: left,
121
- right: right.right
122
- }, precision);
123
- node.right = right.left;
112
+ operator: _operator,
113
+ left: _left,
114
+ right: _right.left
115
+ });
116
+ node.operator = _right.operator;
117
+ node.right = _right.right;
118
+ return reduce(node, precision);
119
+ } // something + (something + value) => dimension + something
120
+ // something + (something - value) => dimension + something
121
+ // something - (something + value) => dimension - something
122
+ // something - (something - value) => dimension - something
123
+
124
+
125
+ if (node.left.type === node.right.right.type) {
126
+ var _left2 = node.left,
127
+ _right2 = node.right;
128
+ node.left = reduce({
129
+ type: 'MathExpression',
130
+ operator: _right2.operator,
131
+ left: _left2,
132
+ right: _right2.right
133
+ });
134
+ node.right = _right2.left;
124
135
  return reduce(node, precision);
125
- } // value - (something + something) => value - something - something
126
- else if (op === '-' && right.operator === '+') {
127
- node = Object.assign({}, node);
128
- node.right.operator = '-';
129
- return reduce(node, precision);
130
- }
136
+ }
137
+ }
131
138
  } // (expr) <op> value
132
139
 
133
140
 
134
- if (left.type === 'MathExpression' && (left.operator === '+' || left.operator === '-') && isValueType(right.type)) {
135
- // (value + something) + value => (value + value) + something
136
- // (value - something) + value => (value + value) - something
137
- // (value + something) - value => (value - value) + something
138
- // (value - something) - value => (value - value) - something
139
- if (right.type === left.left.type) {
140
- node = Object.assign({}, left);
141
- node.left = reduce({
141
+ if (node.left.type === 'MathExpression' && (node.left.operator === '+' || node.left.operator === '-') && isValueType(node.right.type)) {
142
+ // (value + something) + value => value + something
143
+ // (value - something) + value => value - something
144
+ // (value + something) - value => value + something
145
+ // (value - something) - value => value - something
146
+ if (node.right.type === node.left.left.type) {
147
+ var _left3 = node.left,
148
+ _operator2 = node.operator,
149
+ _right3 = node.right;
150
+ _left3.left = reduce({
142
151
  type: 'MathExpression',
143
- operator: op,
144
- left: left.left,
145
- right: right
152
+ operator: _operator2,
153
+ left: _left3.left,
154
+ right: _right3
146
155
  }, precision);
147
- return reduce(node, precision);
148
- } // (something + value) + value => something + (value + value)
149
- // (something - value1) + value2 => something - (value2 - value1)
150
- // (something + value) - value => something + (value - value)
151
- // (something - value) - value => something - (value + value)
152
- else if (right.type === left.right.type) {
153
- node = Object.assign({}, left);
154
-
155
- if (left.operator === '-') {
156
- node.right = reduce({
157
- type: 'MathExpression',
158
- operator: flip(op),
159
- left: left.right,
160
- right: right
161
- }, precision);
162
-
163
- if (node.right.value && node.right.value < 0) {
164
- node.right.value = Math.abs(node.right.value);
165
- node.operator = '+';
166
- } else {
167
- node.operator = left.operator;
168
- }
169
- } else {
170
- node.right = reduce({
171
- type: 'MathExpression',
172
- operator: op,
173
- left: left.right,
174
- right: right
175
- }, precision);
176
- }
177
-
178
- if (node.right.value < 0) {
179
- node.right.value *= -1;
180
- node.operator = node.operator === '-' ? '+' : '-';
181
- }
156
+ return reduce(_left3, precision);
157
+ } // (something + dimension) + dimension => something + dimension
158
+ // (something - dimension) + dimension => something - dimension
159
+ // (something + dimension) - dimension => something + dimension
160
+ // (something - dimension) - dimension => something - dimension
182
161
 
183
- return reduce(node, precision);
162
+
163
+ if (node.right.type === node.left.right.type) {
164
+ var _left4 = node.left,
165
+ _operator3 = node.operator,
166
+ _right4 = node.right;
167
+
168
+ if (_left4.operator === '-') {
169
+ _left4.operator = _operator3 === '-' ? '-' : '+';
170
+ _left4.right = reduce({
171
+ type: 'MathExpression',
172
+ operator: _operator3 === '-' ? '+' : '-',
173
+ left: _right4,
174
+ right: _left4.right
175
+ }, precision);
176
+ } else {
177
+ _left4.right = reduce({
178
+ type: 'MathExpression',
179
+ operator: _operator3,
180
+ left: _left4.right,
181
+ right: _right4
182
+ }, precision);
184
183
  }
185
- }
186
184
 
187
- if (left.type === 'MathExpression' && right.type === 'MathExpression' && op === '-' && right.operator === '-') {
188
- node.right.operator = flip(node.right.operator);
185
+ if (_left4.right.value < 0) {
186
+ _left4.right.value *= -1;
187
+ _left4.operator = _left4.operator === '-' ? '+' : '-';
188
+ }
189
+
190
+ _left4.parenthesized = node.parenthesized;
191
+ return reduce(_left4, precision);
192
+ }
193
+ } // (expr) + (expr) => number
194
+ // (expr) - (expr) => number
195
+
196
+
197
+ if (node.right.type === 'MathExpression' && node.left.type === 'MathExpression') {
198
+ if (isEqual(node.left.right, node.right.right)) {
199
+ var newNodes = covertNodesUnits(node.left.left, node.right.left, precision);
200
+ node.left = newNodes.left;
201
+ node.right = newNodes.right;
202
+ return reduce(node);
203
+ }
204
+
205
+ if (isEqual(node.left.right, node.right.left)) {
206
+ var _newNodes = covertNodesUnits(node.left.left, node.right.right, precision);
207
+
208
+ node.left = _newNodes.left;
209
+ node.right = _newNodes.right;
210
+ return reduce(node);
211
+ }
189
212
  }
190
213
 
191
214
  return node;
192
215
  }
193
216
 
194
217
  function reduceDivisionExpression(node) {
195
- if (!isValueType(node.right.type)) return node;
196
- if (node.right.type !== 'Value') throw new Error(`Cannot divide by "${node.right.unit}", number expected`);
197
- if (node.right.value === 0) throw new Error('Cannot divide by zero'); // something / value
218
+ if (!isValueType(node.right.type)) {
219
+ return node;
220
+ }
221
+
222
+ if (node.right.type !== 'Number') {
223
+ throw new Error(`Cannot divide by "${node.right.unit}", number expected`);
224
+ }
225
+
226
+ if (node.right.value === 0) {
227
+ throw new Error('Cannot divide by zero');
228
+ } // something / value
229
+
198
230
 
199
231
  if (isValueType(node.left.type)) {
200
232
  node.left.value /= node.right.value;
@@ -205,46 +237,86 @@ function reduceDivisionExpression(node) {
205
237
  }
206
238
 
207
239
  function reduceMultiplicationExpression(node) {
208
- // (expr) * value
209
- if (node.left.type === 'MathExpression' && node.right.type === 'Value') {
240
+ // (expr) * number
241
+ if (node.left.type === 'MathExpression' && node.right.type === 'Number') {
210
242
  if (isValueType(node.left.left.type) && isValueType(node.left.right.type)) {
211
243
  node.left.left.value *= node.right.value;
212
244
  node.left.right.value *= node.right.value;
213
245
  return node.left;
214
246
  }
215
- } // something * value
216
- else if (isValueType(node.left.type) && node.right.type === 'Value') {
217
- node.left.value *= node.right.value;
218
- return node.left;
219
- } // value * (expr)
220
- else if (node.left.type === 'Value' && node.right.type === 'MathExpression') {
221
- if (isValueType(node.right.left.type) && isValueType(node.right.right.type)) {
222
- node.right.left.value *= node.left.value;
223
- node.right.right.value *= node.left.value;
224
- return node.right;
225
- }
226
- } // value * something
227
- else if (node.left.type === 'Value' && isValueType(node.right.type)) {
228
- node.right.value *= node.left.value;
229
- return node.right;
230
- }
247
+ } // something * number
248
+
249
+
250
+ if (isValueType(node.left.type) && node.right.type === 'Number') {
251
+ node.left.value *= node.right.value;
252
+ return node.left;
253
+ } // number * (expr)
254
+
255
+
256
+ if (node.left.type === 'Number' && node.right.type === 'MathExpression') {
257
+ if (isValueType(node.right.left.type) && isValueType(node.right.right.type)) {
258
+ node.right.left.value *= node.left.value;
259
+ node.right.right.value *= node.left.value;
260
+ return node.right;
261
+ }
262
+ } // number * something
263
+
264
+
265
+ if (node.left.type === 'Number' && isValueType(node.right.type)) {
266
+ node.right.value *= node.left.value;
267
+ return node.right;
268
+ }
231
269
 
232
270
  return node;
233
271
  }
234
272
 
235
- function reduceMathExpression(node, precision) {
236
- node = convertMathExpression(node, precision);
273
+ function covertNodesUnits(left, right, precision) {
274
+ switch (left.type) {
275
+ case 'LengthValue':
276
+ case 'AngleValue':
277
+ case 'TimeValue':
278
+ case 'FrequencyValue':
279
+ case 'ResolutionValue':
280
+ if (right.type === left.type && right.unit && left.unit) {
281
+ var converted = (0, _convertUnit.default)(right.value, right.unit, left.unit, precision);
282
+ right = {
283
+ type: left.type,
284
+ value: converted,
285
+ unit: left.unit
286
+ };
287
+ }
237
288
 
238
- switch (node.operator) {
239
- case "+":
240
- case "-":
241
- return reduceAddSubExpression(node, precision);
289
+ return {
290
+ left,
291
+ right
292
+ };
242
293
 
243
- case "/":
244
- return reduceDivisionExpression(node, precision);
294
+ default:
295
+ return {
296
+ left,
297
+ right
298
+ };
299
+ }
300
+ }
301
+
302
+ function reduce(node, precision) {
303
+ if (node.type === "MathExpression") {
304
+ node.left = reduce(node.left, precision);
305
+ node.right = reduce(node.right, precision);
306
+
307
+ switch (node.operator) {
308
+ case "+":
309
+ case "-":
310
+ return reduceAddSubExpression(node, precision);
311
+
312
+ case "/":
313
+ return reduceDivisionExpression(node, precision);
314
+
315
+ case "*":
316
+ return reduceMultiplicationExpression(node, precision);
317
+ }
245
318
 
246
- case "*":
247
- return reduceMultiplicationExpression(node);
319
+ return node;
248
320
  }
249
321
 
250
322
  return node;