postcss-calc 8.2.3 → 8.2.4
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/package.json +19 -16
- package/src/__tests__/convertUnit.js +421 -0
- package/src/__tests__/index.js +903 -0
- package/src/index.js +51 -0
- package/src/lib/convertUnit.js +160 -0
- package/{dist → src}/lib/reducer.js +108 -142
- package/{dist → src}/lib/stringifier.js +36 -51
- package/src/lib/transform.js +109 -0
- package/src/parser.d.ts +51 -0
- package/src/parser.jison +111 -0
- package/{dist → src}/parser.js +0 -0
- package/types/index.d.ts +14 -13
- package/types/lib/convertUnit.d.ts +1 -1
- package/types/lib/reducer.d.ts +8 -5
- package/types/lib/stringifier.d.ts +2 -11
- package/types/lib/transform.d.ts +2 -2
- package/dist/index.js +0 -64
- package/dist/lib/convertUnit.js +0 -167
- package/dist/lib/transform.js +0 -119
|
@@ -0,0 +1,903 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
const { test } = require('uvu');
|
|
3
|
+
const assert = require('uvu/assert');
|
|
4
|
+
const postcss = require('postcss');
|
|
5
|
+
|
|
6
|
+
const reduceCalc = require('../index.js');
|
|
7
|
+
|
|
8
|
+
const postcssOpts = { from: undefined };
|
|
9
|
+
|
|
10
|
+
function testValue(fixture, expected, opts = {}) {
|
|
11
|
+
fixture = `foo{bar:${fixture}}`;
|
|
12
|
+
expected = `foo{bar:${expected}}`;
|
|
13
|
+
|
|
14
|
+
return async () => {
|
|
15
|
+
const result = await postcss(reduceCalc(opts)).process(
|
|
16
|
+
fixture,
|
|
17
|
+
postcssOpts
|
|
18
|
+
);
|
|
19
|
+
assert.is(result.css, expected);
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function testCss(fixture, expected, opts = {}) {
|
|
24
|
+
return async () => {
|
|
25
|
+
const result = await postcss(reduceCalc(opts)).process(
|
|
26
|
+
fixture,
|
|
27
|
+
postcssOpts
|
|
28
|
+
);
|
|
29
|
+
assert.is(result.css, expected);
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function testThrows(fixture, expected, warning, opts = {}) {
|
|
34
|
+
fixture = `foo{bar:${fixture}}`;
|
|
35
|
+
expected = `foo{bar:${expected}}`;
|
|
36
|
+
|
|
37
|
+
return async () => {
|
|
38
|
+
const result = await postcss(reduceCalc(opts)).process(
|
|
39
|
+
fixture,
|
|
40
|
+
postcssOpts
|
|
41
|
+
);
|
|
42
|
+
const warnings = result.warnings();
|
|
43
|
+
assert.is(result.css, expected);
|
|
44
|
+
assert.is(warnings[0].text, warning);
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
test('should reduce simple calc (1)', testValue('calc(1px + 1px)', '2px'));
|
|
49
|
+
|
|
50
|
+
test(
|
|
51
|
+
'should reduce simple calc (2)',
|
|
52
|
+
testValue('calc(1px + 1px);baz:calc(2px+3px)', '2px;baz:5px')
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
test('should reduce simple calc (3)', testValue('calc(1rem * 1.5)', '1.5rem'));
|
|
56
|
+
|
|
57
|
+
test('should reduce simple calc (4)', testValue('calc(3em - 1em)', '2em'));
|
|
58
|
+
|
|
59
|
+
test('should reduce simple calc (5', testValue('calc(2ex / 2)', '1ex'));
|
|
60
|
+
|
|
61
|
+
test(
|
|
62
|
+
'should reduce simple calc (6)',
|
|
63
|
+
testValue('calc(50px - (20px - 30px))', '60px')
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
test(
|
|
67
|
+
'should reduce simple calc (7)',
|
|
68
|
+
testValue('calc(100px - (100px - 100%))', '100%')
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
test(
|
|
72
|
+
'should reduce simple calc (8)',
|
|
73
|
+
testValue('calc(100px + (100px - 100%))', 'calc(200px - 100%)')
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
test(
|
|
77
|
+
'should reduce additions and subtractions (1)',
|
|
78
|
+
testValue('calc(100% - 10px + 20px)', 'calc(100% + 10px)')
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
test(
|
|
82
|
+
'should reduce additions and subtractions (2)',
|
|
83
|
+
testValue('calc(100% + 10px - 20px)', 'calc(100% - 10px)')
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
test(
|
|
87
|
+
'should reduce additions and subtractions (3)',
|
|
88
|
+
testValue('calc(1px - (2em + 3%))', 'calc(1px - 2em - 3%)')
|
|
89
|
+
);
|
|
90
|
+
|
|
91
|
+
test(
|
|
92
|
+
'should reduce additions and subtractions (4)',
|
|
93
|
+
testValue('calc((100vw - 50em) / 2)', 'calc(50vw - 25em)')
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
test(
|
|
97
|
+
'should reduce additions and subtractions (5)',
|
|
98
|
+
testValue('calc(10px - (100vw - 50em) / 2)', 'calc(10px - 50vw + 25em)')
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
test(
|
|
102
|
+
'should reduce additions and subtractions (6)',
|
|
103
|
+
testValue('calc(1px - (2em + 4vh + 3%))', 'calc(1px - 2em - 4vh - 3%)')
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
test(
|
|
107
|
+
'should reduce additions and subtractions (7)',
|
|
108
|
+
testValue(
|
|
109
|
+
'calc(0px - (24px - (var(--a) - var(--b)) / 2 + var(--c)))',
|
|
110
|
+
'calc(-24px + (var(--a) - var(--b))/2 - var(--c))'
|
|
111
|
+
)
|
|
112
|
+
);
|
|
113
|
+
|
|
114
|
+
test(
|
|
115
|
+
'should reduce additions and subtractions (8)',
|
|
116
|
+
testValue('calc(1px + (2em + (3vh + 4px)))', 'calc(5px + 2em + 3vh)')
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
test(
|
|
120
|
+
'should reduce additions and subtractions (9)',
|
|
121
|
+
testValue('calc(1px - (2em + 4px - 6vh) / 2)', 'calc(-1px - 1em + 3vh)')
|
|
122
|
+
);
|
|
123
|
+
|
|
124
|
+
test(
|
|
125
|
+
'should reduce multiplication',
|
|
126
|
+
testValue('calc(((var(--a) + 4px) * 2) * 2)', 'calc((var(--a) + 4px)*2*2)')
|
|
127
|
+
);
|
|
128
|
+
|
|
129
|
+
test(
|
|
130
|
+
'should reduce multiplication before reducing additions',
|
|
131
|
+
testValue(
|
|
132
|
+
'calc(((var(--a) + 4px) * 2) * 2 + 4px)',
|
|
133
|
+
'calc((var(--a) + 4px)*2*2 + 4px)'
|
|
134
|
+
)
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
test(
|
|
138
|
+
'should reduce division',
|
|
139
|
+
testValue('calc(((var(--a) + 4px) / 2) / 2)', 'calc((var(--a) + 4px)/2/2)')
|
|
140
|
+
);
|
|
141
|
+
|
|
142
|
+
test(
|
|
143
|
+
'should reduce division before reducing additions',
|
|
144
|
+
testValue(
|
|
145
|
+
'calc(((var(--a) + 4px) / 2) / 2 + 4px)',
|
|
146
|
+
'calc((var(--a) + 4px)/2/2 + 4px)'
|
|
147
|
+
)
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
test(
|
|
151
|
+
'should ignore value surrounding calc function (1)',
|
|
152
|
+
testValue('a calc(1px + 1px)', 'a 2px')
|
|
153
|
+
);
|
|
154
|
+
|
|
155
|
+
test(
|
|
156
|
+
'should ignore value surrounding calc function (2)',
|
|
157
|
+
testValue('calc(1px + 1px) a', '2px a')
|
|
158
|
+
);
|
|
159
|
+
|
|
160
|
+
test(
|
|
161
|
+
'should ignore value surrounding calc function (3)',
|
|
162
|
+
testValue('a calc(1px + 1px) b', 'a 2px b')
|
|
163
|
+
);
|
|
164
|
+
|
|
165
|
+
test(
|
|
166
|
+
'should ignore value surrounding calc function (4)',
|
|
167
|
+
testValue('a calc(1px + 1px) b calc(1em + 2em) c', 'a 2px b 3em c')
|
|
168
|
+
);
|
|
169
|
+
|
|
170
|
+
test(
|
|
171
|
+
'should reduce nested calc',
|
|
172
|
+
testValue('calc(100% - calc(50% + 25px))', 'calc(50% - 25px)')
|
|
173
|
+
);
|
|
174
|
+
|
|
175
|
+
test(
|
|
176
|
+
'should reduce vendor-prefixed nested calc',
|
|
177
|
+
testValue(
|
|
178
|
+
'-webkit-calc(100% - -webkit-calc(50% + 25px))',
|
|
179
|
+
'-webkit-calc(50% - 25px)'
|
|
180
|
+
)
|
|
181
|
+
);
|
|
182
|
+
|
|
183
|
+
test('should reduce uppercase calc (1)', testValue('CALC(1px + 1px)', '2px'));
|
|
184
|
+
|
|
185
|
+
test(
|
|
186
|
+
'should reduce uppercase calc (2)',
|
|
187
|
+
testValue('CALC(1px + CALC(2px / 2))', '2px')
|
|
188
|
+
);
|
|
189
|
+
|
|
190
|
+
test(
|
|
191
|
+
'should reduce uppercase calc (3)',
|
|
192
|
+
testValue('-WEBKIT-CALC(1px + 1px)', '2px')
|
|
193
|
+
);
|
|
194
|
+
|
|
195
|
+
test(
|
|
196
|
+
'should reduce uppercase calc (4)',
|
|
197
|
+
testValue('-WEBKIT-CALC(1px + -WEBKIT-CALC(2px / 2))', '2px')
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
test(
|
|
201
|
+
'should ignore calc with css variables (1)',
|
|
202
|
+
testValue('calc(var(--mouseX) * 1px)', 'calc(var(--mouseX)*1px)')
|
|
203
|
+
);
|
|
204
|
+
|
|
205
|
+
test(
|
|
206
|
+
'should ignore calc with css variables (2)',
|
|
207
|
+
testValue(
|
|
208
|
+
'calc(10px - (100px * var(--mouseX)))',
|
|
209
|
+
'calc(10px - 100px*var(--mouseX))'
|
|
210
|
+
)
|
|
211
|
+
);
|
|
212
|
+
|
|
213
|
+
test(
|
|
214
|
+
'should ignore calc with css variables (3)',
|
|
215
|
+
testValue(
|
|
216
|
+
'calc(10px - (100px + var(--mouseX)))',
|
|
217
|
+
'calc(-90px - var(--mouseX))'
|
|
218
|
+
)
|
|
219
|
+
);
|
|
220
|
+
|
|
221
|
+
test(
|
|
222
|
+
'should ignore calc with css variables (4)',
|
|
223
|
+
testValue(
|
|
224
|
+
'calc(10px - (100px / var(--mouseX)))',
|
|
225
|
+
'calc(10px - 100px/var(--mouseX))'
|
|
226
|
+
)
|
|
227
|
+
);
|
|
228
|
+
|
|
229
|
+
test(
|
|
230
|
+
'should ignore calc with css variables (5)',
|
|
231
|
+
testValue(
|
|
232
|
+
'calc(10px - (100px - var(--mouseX)))',
|
|
233
|
+
'calc(-90px + var(--mouseX))'
|
|
234
|
+
)
|
|
235
|
+
);
|
|
236
|
+
|
|
237
|
+
test(
|
|
238
|
+
'should ignore calc with css variables (6)',
|
|
239
|
+
testValue('calc(var(--popupHeight) / 2)', 'calc(var(--popupHeight)/2)')
|
|
240
|
+
);
|
|
241
|
+
|
|
242
|
+
test(
|
|
243
|
+
'should ignore calc with css variables (7)',
|
|
244
|
+
testValue(
|
|
245
|
+
'calc(var(--popupHeight) / 2 + var(--popupWidth) / 2)',
|
|
246
|
+
'calc(var(--popupHeight)/2 + var(--popupWidth)/2)'
|
|
247
|
+
)
|
|
248
|
+
);
|
|
249
|
+
|
|
250
|
+
test(
|
|
251
|
+
'should reduce calc with newline characters',
|
|
252
|
+
testValue('calc(\n1rem \n* 2 \n* 1.5)', '3rem')
|
|
253
|
+
);
|
|
254
|
+
|
|
255
|
+
test(
|
|
256
|
+
'should preserve calc with incompatible units',
|
|
257
|
+
testValue('calc(100% + 1px)', 'calc(100% + 1px)')
|
|
258
|
+
);
|
|
259
|
+
|
|
260
|
+
test(
|
|
261
|
+
'should parse fractions without leading zero',
|
|
262
|
+
testValue('calc(2rem - .14285em)', 'calc(2rem - 0.14285em)')
|
|
263
|
+
);
|
|
264
|
+
|
|
265
|
+
test('should handle precision correctly (1)', testValue('calc(1/100)', '0.01'));
|
|
266
|
+
|
|
267
|
+
test(
|
|
268
|
+
'should handle precision correctly (2)',
|
|
269
|
+
testValue('calc(5/1000000)', '0.00001')
|
|
270
|
+
);
|
|
271
|
+
|
|
272
|
+
test(
|
|
273
|
+
'should handle precision correctly (3)',
|
|
274
|
+
testValue('calc(5/1000000)', '0.000005', { precision: 6 })
|
|
275
|
+
);
|
|
276
|
+
|
|
277
|
+
test(
|
|
278
|
+
'should reduce browser-prefixed calc (1)',
|
|
279
|
+
testValue('-webkit-calc(1px + 1px)', '2px')
|
|
280
|
+
);
|
|
281
|
+
|
|
282
|
+
test(
|
|
283
|
+
'should reduce browser-prefixed calc (2)',
|
|
284
|
+
testValue('-moz-calc(1px + 1px)', '2px')
|
|
285
|
+
);
|
|
286
|
+
|
|
287
|
+
test(
|
|
288
|
+
'should discard zero values (#2) (1)',
|
|
289
|
+
testValue('calc(100vw / 2 - 6px + 0px)', 'calc(50vw - 6px)')
|
|
290
|
+
);
|
|
291
|
+
|
|
292
|
+
test(
|
|
293
|
+
'should discard zero values (#2) (2)',
|
|
294
|
+
testValue('calc(500px - 0px)', '500px')
|
|
295
|
+
);
|
|
296
|
+
|
|
297
|
+
test(
|
|
298
|
+
'should not perform addition on unitless values (#3)',
|
|
299
|
+
testValue('calc(1px + 1)', 'calc(1px + 1)')
|
|
300
|
+
);
|
|
301
|
+
|
|
302
|
+
test(
|
|
303
|
+
'should reduce consecutive substractions (#24) (1)',
|
|
304
|
+
testValue('calc(100% - 120px - 60px)', 'calc(100% - 180px)')
|
|
305
|
+
);
|
|
306
|
+
|
|
307
|
+
test(
|
|
308
|
+
'should reduce consecutive substractions (#24) (2)',
|
|
309
|
+
testValue('calc(100% - 10px - 20px)', 'calc(100% - 30px)')
|
|
310
|
+
);
|
|
311
|
+
|
|
312
|
+
test(
|
|
313
|
+
'should reduce mixed units of time (postcss-calc#33)',
|
|
314
|
+
testValue('calc(1s - 50ms)', '0.95s')
|
|
315
|
+
);
|
|
316
|
+
|
|
317
|
+
test(
|
|
318
|
+
'should correctly reduce calc with mixed units (cssnano#211)',
|
|
319
|
+
testValue('calc(99.99% * 1/1 - 0rem)', '99.99%')
|
|
320
|
+
);
|
|
321
|
+
|
|
322
|
+
test(
|
|
323
|
+
'should apply optimization (cssnano#320)',
|
|
324
|
+
testValue('calc(50% + (5em + 5%))', 'calc(55% + 5em)')
|
|
325
|
+
);
|
|
326
|
+
|
|
327
|
+
test(
|
|
328
|
+
'should reduce substraction from zero',
|
|
329
|
+
testValue('calc( 0 - 10px)', '-10px')
|
|
330
|
+
);
|
|
331
|
+
|
|
332
|
+
test(
|
|
333
|
+
'should reduce subtracted expression from zero',
|
|
334
|
+
testValue('calc( 0 - calc(1px + 1em) )', 'calc(-1px - 1em)')
|
|
335
|
+
);
|
|
336
|
+
|
|
337
|
+
test(
|
|
338
|
+
'should reduce substracted expression from zero (1)',
|
|
339
|
+
testValue('calc( 0 - (100vw - 10px) / 2 )', 'calc(-50vw + 5px)')
|
|
340
|
+
);
|
|
341
|
+
|
|
342
|
+
test(
|
|
343
|
+
'should reduce substracted expression from zero (2)',
|
|
344
|
+
testValue('calc( 0px - (100vw - 10px))', 'calc(10px - 100vw)')
|
|
345
|
+
);
|
|
346
|
+
|
|
347
|
+
test(
|
|
348
|
+
'should reduce substracted expression from zero (3)',
|
|
349
|
+
testValue('calc( 0px - (100vw - 10px) * 2 )', 'calc(20px - 200vw)')
|
|
350
|
+
);
|
|
351
|
+
|
|
352
|
+
test(
|
|
353
|
+
'should reduce substracted expression from zero (4)',
|
|
354
|
+
testValue('calc( 0px - (100vw + 10px))', 'calc(-10px - 100vw)')
|
|
355
|
+
);
|
|
356
|
+
|
|
357
|
+
test(
|
|
358
|
+
'should reduce substracted expression from zero (css-variable)',
|
|
359
|
+
testValue(
|
|
360
|
+
'calc( 0px - (var(--foo, 4px) / 2))',
|
|
361
|
+
'calc(0px - var(--foo, 4px)/2)'
|
|
362
|
+
)
|
|
363
|
+
);
|
|
364
|
+
|
|
365
|
+
test(
|
|
366
|
+
'should reduce nested expression',
|
|
367
|
+
testValue('calc( (1em - calc( 10px + 1em)) / 2)', '-5px')
|
|
368
|
+
);
|
|
369
|
+
|
|
370
|
+
test(
|
|
371
|
+
'should skip constant function',
|
|
372
|
+
testValue(
|
|
373
|
+
'calc(constant(safe-area-inset-left))',
|
|
374
|
+
'calc(constant(safe-area-inset-left))'
|
|
375
|
+
)
|
|
376
|
+
);
|
|
377
|
+
|
|
378
|
+
test(
|
|
379
|
+
'should skip env function',
|
|
380
|
+
testValue(
|
|
381
|
+
'calc(env(safe-area-inset-left))',
|
|
382
|
+
'calc(env(safe-area-inset-left))'
|
|
383
|
+
)
|
|
384
|
+
);
|
|
385
|
+
|
|
386
|
+
test(
|
|
387
|
+
'should skip env function (#1)',
|
|
388
|
+
testValue(
|
|
389
|
+
'calc(env(safe-area-inset-left, 50px 20px))',
|
|
390
|
+
'calc(env(safe-area-inset-left, 50px 20px))'
|
|
391
|
+
)
|
|
392
|
+
);
|
|
393
|
+
|
|
394
|
+
test(
|
|
395
|
+
'should skip unknown function',
|
|
396
|
+
testValue(
|
|
397
|
+
'calc(unknown(safe-area-inset-left))',
|
|
398
|
+
'calc(unknown(safe-area-inset-left))'
|
|
399
|
+
)
|
|
400
|
+
);
|
|
401
|
+
|
|
402
|
+
test(
|
|
403
|
+
'should preserve the original declaration when `preserve` option is set to true',
|
|
404
|
+
testCss('foo{bar:calc(1rem * 1.5)}', 'foo{bar:1.5rem;bar:calc(1rem * 1.5)}', {
|
|
405
|
+
preserve: true,
|
|
406
|
+
})
|
|
407
|
+
);
|
|
408
|
+
|
|
409
|
+
test(
|
|
410
|
+
'should not yield warnings when nothing is wrong',
|
|
411
|
+
testValue('calc(500px - 0px)', '500px', { warnWhenCannotResolve: true })
|
|
412
|
+
);
|
|
413
|
+
|
|
414
|
+
test(
|
|
415
|
+
'should warn when calc expression cannot be reduced to a single value',
|
|
416
|
+
testValue('calc(100% + 1px)', 'calc(100% + 1px)', {
|
|
417
|
+
warnWhenCannotResolve: true,
|
|
418
|
+
})
|
|
419
|
+
);
|
|
420
|
+
|
|
421
|
+
test(
|
|
422
|
+
'should reduce mixed units of time (#33)',
|
|
423
|
+
testValue('calc(1s - 50ms)', '0.95s')
|
|
424
|
+
);
|
|
425
|
+
|
|
426
|
+
test(
|
|
427
|
+
'should not parse variables as calc expressions (#35)',
|
|
428
|
+
testCss(
|
|
429
|
+
'foo:nth-child(2n + $var-calc){}',
|
|
430
|
+
'foo:nth-child(2n + $var-calc){}',
|
|
431
|
+
{ selectors: true }
|
|
432
|
+
)
|
|
433
|
+
);
|
|
434
|
+
|
|
435
|
+
test(
|
|
436
|
+
'should apply algebraic reduction (cssnano#319)',
|
|
437
|
+
testValue('calc((100px - 1em) + (-50px + 1em))', '50px')
|
|
438
|
+
);
|
|
439
|
+
|
|
440
|
+
test(
|
|
441
|
+
'should discard zero values (reduce-css-calc#2) (1)',
|
|
442
|
+
testValue('calc(100vw / 2 - 6px + 0px)', 'calc(50vw - 6px)')
|
|
443
|
+
);
|
|
444
|
+
|
|
445
|
+
test(
|
|
446
|
+
'should discard zero values (reduce-css-calc#2) (2)',
|
|
447
|
+
testValue('calc(500px - 0px)', '500px')
|
|
448
|
+
);
|
|
449
|
+
|
|
450
|
+
test(
|
|
451
|
+
'should not perform addition on unitless values (reduce-css-calc#3)',
|
|
452
|
+
testValue('calc(1px + 1)', 'calc(1px + 1)')
|
|
453
|
+
);
|
|
454
|
+
|
|
455
|
+
test(
|
|
456
|
+
'should return the same and not thrown an exception for attribute selectors without a value',
|
|
457
|
+
testCss('button[disabled]{}', 'button[disabled]{}', { selectors: true })
|
|
458
|
+
);
|
|
459
|
+
|
|
460
|
+
test(
|
|
461
|
+
'should ignore reducing custom property',
|
|
462
|
+
testCss(
|
|
463
|
+
':root { --foo: calc(var(--bar) / 8); }',
|
|
464
|
+
':root { --foo: calc(var(--bar)/8); }'
|
|
465
|
+
)
|
|
466
|
+
);
|
|
467
|
+
|
|
468
|
+
test(
|
|
469
|
+
'should ignore media queries',
|
|
470
|
+
testCss(
|
|
471
|
+
'@media (min-width:calc(10px+10px)){}',
|
|
472
|
+
'@media (min-width:calc(10px+10px)){}'
|
|
473
|
+
)
|
|
474
|
+
);
|
|
475
|
+
|
|
476
|
+
test(
|
|
477
|
+
'should reduce calc in media queries when `mediaQueries` option is set to true',
|
|
478
|
+
testCss('@media (min-width:calc(10px+10px)){}', '@media (min-width:20px){}', {
|
|
479
|
+
mediaQueries: true,
|
|
480
|
+
})
|
|
481
|
+
);
|
|
482
|
+
|
|
483
|
+
test(
|
|
484
|
+
'should ignore selectors (1)',
|
|
485
|
+
testCss('div[data-size="calc(3*3)"]{}', 'div[data-size="calc(3*3)"]{}')
|
|
486
|
+
);
|
|
487
|
+
|
|
488
|
+
test(
|
|
489
|
+
'should ignore selectors (2)',
|
|
490
|
+
testCss('div:nth-child(2n + calc(3*3)){}', 'div:nth-child(2n + calc(3*3)){}')
|
|
491
|
+
);
|
|
492
|
+
|
|
493
|
+
test(
|
|
494
|
+
'should reduce calc in selectors when `selectors` option is set to true (1)',
|
|
495
|
+
testCss('div[data-size="calc(3*3)"]{}', 'div[data-size="9"]{}', {
|
|
496
|
+
selectors: true,
|
|
497
|
+
})
|
|
498
|
+
);
|
|
499
|
+
|
|
500
|
+
test(
|
|
501
|
+
'should reduce calc in selectors when `selectors` option is set to true (2)',
|
|
502
|
+
testCss('div:nth-child(2n + calc(3*3)){}', 'div:nth-child(2n + 9){}', {
|
|
503
|
+
selectors: true,
|
|
504
|
+
})
|
|
505
|
+
);
|
|
506
|
+
|
|
507
|
+
test(
|
|
508
|
+
'should not reduce 100% to 1 (reduce-css-calc#44)',
|
|
509
|
+
testCss(
|
|
510
|
+
'.@supports (width:calc(100% - constant(safe-area-inset-left))){.a{width:calc(100% - constant(safe-area-inset-left))}}',
|
|
511
|
+
'.@supports (width:calc(100% - constant(safe-area-inset-left))){.a{width:calc(100% - constant(safe-area-inset-left))}}'
|
|
512
|
+
)
|
|
513
|
+
);
|
|
514
|
+
|
|
515
|
+
test(
|
|
516
|
+
'should not break css variables that have "calc" in their names',
|
|
517
|
+
testCss(
|
|
518
|
+
'a{transform: translateY(calc(-100% - var(--tooltip-calculated-offset)))}',
|
|
519
|
+
'a{transform: translateY(calc(-100% - var(--tooltip-calculated-offset)))}'
|
|
520
|
+
)
|
|
521
|
+
);
|
|
522
|
+
|
|
523
|
+
test(
|
|
524
|
+
'should handle complex calculations (reduce-css-calc#45) (1)',
|
|
525
|
+
testValue(
|
|
526
|
+
'calc(100% + (2 * 100px) - ((75.37% - 63.5px) - 900px))',
|
|
527
|
+
'calc(24.63% + 1163.5px)'
|
|
528
|
+
)
|
|
529
|
+
);
|
|
530
|
+
|
|
531
|
+
test(
|
|
532
|
+
'should handle complex calculations (reduce-css-calc#45) (2)',
|
|
533
|
+
testValue(
|
|
534
|
+
'calc(((((100% + (2 * 30px) + 63.5px) / 0.7537) - (100vw - 60px)) / 2) + 30px)',
|
|
535
|
+
'calc(66.33939% + 141.92915px - 50vw)'
|
|
536
|
+
)
|
|
537
|
+
);
|
|
538
|
+
|
|
539
|
+
test(
|
|
540
|
+
'should handle advanced arithmetic (1)',
|
|
541
|
+
testValue(
|
|
542
|
+
'calc(((75.37% - 63.5px) - 900px) + (2 * 100px))',
|
|
543
|
+
'calc(75.37% - 763.5px)'
|
|
544
|
+
)
|
|
545
|
+
);
|
|
546
|
+
|
|
547
|
+
test(
|
|
548
|
+
'should handle advanced arithmetic (2)',
|
|
549
|
+
testValue(
|
|
550
|
+
'calc((900px - (10% - 63.5px)) + (2 * 100px))',
|
|
551
|
+
'calc(1163.5px - 10%)'
|
|
552
|
+
)
|
|
553
|
+
);
|
|
554
|
+
|
|
555
|
+
test(
|
|
556
|
+
'should handle nested calc statements (reduce-css-calc#49)',
|
|
557
|
+
testValue('calc(calc(2.25rem + 2px) - 1px * 2)', '2.25rem')
|
|
558
|
+
);
|
|
559
|
+
|
|
560
|
+
test(
|
|
561
|
+
'should throw an exception when attempting to divide by zero',
|
|
562
|
+
testThrows('calc(500px/0)', 'calc(500px/0)', 'Cannot divide by zero')
|
|
563
|
+
);
|
|
564
|
+
|
|
565
|
+
test(
|
|
566
|
+
'should throw an exception when attempting to divide by unit (#1)',
|
|
567
|
+
testThrows(
|
|
568
|
+
'calc(500px/2px)',
|
|
569
|
+
'calc(500px/2px)',
|
|
570
|
+
'Cannot divide by "px", number expected'
|
|
571
|
+
)
|
|
572
|
+
);
|
|
573
|
+
|
|
574
|
+
test(
|
|
575
|
+
'nested var (reduce-css-calc#50)',
|
|
576
|
+
testValue(
|
|
577
|
+
'calc(var(--xxx, var(--yyy)) / 2)',
|
|
578
|
+
'calc(var(--xxx, var(--yyy))/2)'
|
|
579
|
+
)
|
|
580
|
+
);
|
|
581
|
+
|
|
582
|
+
test(
|
|
583
|
+
'should not throw an exception when unknow function exist in calc',
|
|
584
|
+
testValue(
|
|
585
|
+
'calc(unknown(#fff) - other-unknown(200px))',
|
|
586
|
+
'calc(unknown(#fff) - other-unknown(200px))'
|
|
587
|
+
)
|
|
588
|
+
);
|
|
589
|
+
|
|
590
|
+
test(
|
|
591
|
+
'should not throw an exception when unknow function exist in calc (#1)',
|
|
592
|
+
testValue(
|
|
593
|
+
'calc(unknown(#fff) * other-unknown(200px))',
|
|
594
|
+
'calc(unknown(#fff)*other-unknown(200px))'
|
|
595
|
+
)
|
|
596
|
+
);
|
|
597
|
+
|
|
598
|
+
test(
|
|
599
|
+
'should not strip calc with single CSS custom variable',
|
|
600
|
+
testValue('calc(var(--foo))', 'calc(var(--foo))')
|
|
601
|
+
);
|
|
602
|
+
|
|
603
|
+
test(
|
|
604
|
+
'should strip unnecessary calc with single CSS custom variable',
|
|
605
|
+
testValue('calc(calc(var(--foo)))', 'calc(var(--foo))')
|
|
606
|
+
);
|
|
607
|
+
|
|
608
|
+
test(
|
|
609
|
+
'should not strip calc with single CSS custom variables and value',
|
|
610
|
+
testValue('calc(var(--foo) + 10px)', 'calc(var(--foo) + 10px)')
|
|
611
|
+
);
|
|
612
|
+
|
|
613
|
+
test('should reduce calc (uppercase)', testValue('CALC(1PX + 1PX)', '2PX'));
|
|
614
|
+
|
|
615
|
+
test(
|
|
616
|
+
'should reduce calc (uppercase) (#1)',
|
|
617
|
+
testValue('CALC(VAR(--foo) + VAR(--bar))', 'CALC(VAR(--foo) + VAR(--bar))')
|
|
618
|
+
);
|
|
619
|
+
|
|
620
|
+
test(
|
|
621
|
+
'should reduce calc (uppercase) (#2)',
|
|
622
|
+
testValue('CALC( (1EM - CALC( 10PX + 1EM)) / 2)', '-5PX')
|
|
623
|
+
);
|
|
624
|
+
|
|
625
|
+
test(
|
|
626
|
+
'should handle nested calc function (#1)',
|
|
627
|
+
testValue(
|
|
628
|
+
'calc(calc(var(--foo) + var(--bar)) + var(--baz))',
|
|
629
|
+
'calc(var(--foo) + var(--bar) + var(--baz))'
|
|
630
|
+
)
|
|
631
|
+
);
|
|
632
|
+
|
|
633
|
+
test(
|
|
634
|
+
'should handle nested calc function (#2)',
|
|
635
|
+
testValue(
|
|
636
|
+
'calc(var(--foo) + calc(var(--bar) + var(--baz)))',
|
|
637
|
+
'calc(var(--foo) + var(--bar) + var(--baz))'
|
|
638
|
+
)
|
|
639
|
+
);
|
|
640
|
+
|
|
641
|
+
test(
|
|
642
|
+
'should handle nested calc function (#3)',
|
|
643
|
+
testValue(
|
|
644
|
+
'calc(calc(var(--foo) - var(--bar)) - var(--baz))',
|
|
645
|
+
'calc(var(--foo) - var(--bar) - var(--baz))'
|
|
646
|
+
)
|
|
647
|
+
);
|
|
648
|
+
|
|
649
|
+
test(
|
|
650
|
+
'should handle nested calc function (#4)',
|
|
651
|
+
testValue(
|
|
652
|
+
'calc(var(--foo) - calc(var(--bar) - var(--baz)))',
|
|
653
|
+
'calc(var(--foo) - var(--bar) + var(--baz))'
|
|
654
|
+
)
|
|
655
|
+
);
|
|
656
|
+
|
|
657
|
+
test(
|
|
658
|
+
'should handle nested calc function (#5)',
|
|
659
|
+
testValue(
|
|
660
|
+
'calc(calc(var(--foo) + var(--bar)) - var(--baz))',
|
|
661
|
+
'calc(var(--foo) + var(--bar) - var(--baz))'
|
|
662
|
+
)
|
|
663
|
+
);
|
|
664
|
+
|
|
665
|
+
test(
|
|
666
|
+
'should handle nested calc function (#6)',
|
|
667
|
+
testValue(
|
|
668
|
+
'calc(var(--foo) + calc(var(--bar) - var(--baz)))',
|
|
669
|
+
'calc(var(--foo) + var(--bar) - var(--baz))'
|
|
670
|
+
)
|
|
671
|
+
);
|
|
672
|
+
|
|
673
|
+
test(
|
|
674
|
+
'should handle nested calc function (#7)',
|
|
675
|
+
testValue(
|
|
676
|
+
'calc(calc(var(--foo) - var(--bar)) + var(--baz))',
|
|
677
|
+
'calc(var(--foo) - var(--bar) + var(--baz))'
|
|
678
|
+
)
|
|
679
|
+
);
|
|
680
|
+
|
|
681
|
+
test(
|
|
682
|
+
'should handle nested calc function (#8)',
|
|
683
|
+
testValue(
|
|
684
|
+
'calc(var(--foo) - calc(var(--bar) + var(--baz)))',
|
|
685
|
+
'calc(var(--foo) - var(--bar) - var(--baz))'
|
|
686
|
+
)
|
|
687
|
+
);
|
|
688
|
+
|
|
689
|
+
test(
|
|
690
|
+
'should handle nested calc function (#9)',
|
|
691
|
+
testValue(
|
|
692
|
+
'calc(calc(var(--foo) + var(--bar)) * var(--baz))',
|
|
693
|
+
'calc((var(--foo) + var(--bar))*var(--baz))'
|
|
694
|
+
)
|
|
695
|
+
);
|
|
696
|
+
|
|
697
|
+
test(
|
|
698
|
+
'should handle nested calc function (#10)',
|
|
699
|
+
testValue(
|
|
700
|
+
'calc(var(--foo) * calc(var(--bar) + var(--baz)))',
|
|
701
|
+
'calc(var(--foo)*(var(--bar) + var(--baz)))'
|
|
702
|
+
)
|
|
703
|
+
);
|
|
704
|
+
|
|
705
|
+
test(
|
|
706
|
+
'should handle nested calc function (#11)',
|
|
707
|
+
testValue(
|
|
708
|
+
'calc(calc(var(--foo) + var(--bar)) / var(--baz))',
|
|
709
|
+
'calc((var(--foo) + var(--bar))/var(--baz))'
|
|
710
|
+
)
|
|
711
|
+
);
|
|
712
|
+
|
|
713
|
+
test(
|
|
714
|
+
'should handle nested calc function (#12)',
|
|
715
|
+
testValue(
|
|
716
|
+
'calc(var(--foo) / calc(var(--bar) + var(--baz)))',
|
|
717
|
+
'calc(var(--foo)/(var(--bar) + var(--baz)))'
|
|
718
|
+
)
|
|
719
|
+
);
|
|
720
|
+
|
|
721
|
+
test(
|
|
722
|
+
'should handle nested calc function (#13)',
|
|
723
|
+
testValue(
|
|
724
|
+
'calc(100vh - 5rem - calc(10rem + 100px))',
|
|
725
|
+
'calc(100vh - 15rem - 100px)'
|
|
726
|
+
)
|
|
727
|
+
);
|
|
728
|
+
|
|
729
|
+
test(
|
|
730
|
+
'should handle nested calc function (#14)',
|
|
731
|
+
testValue('calc(100% - calc(10px + 2vw))', 'calc(100% - 10px - 2vw)')
|
|
732
|
+
);
|
|
733
|
+
|
|
734
|
+
test(
|
|
735
|
+
'should handle nested calc function (#15)',
|
|
736
|
+
testValue('calc(100% - calc(10px - 2vw))', 'calc(100% - 10px + 2vw)')
|
|
737
|
+
);
|
|
738
|
+
|
|
739
|
+
test(
|
|
740
|
+
'should preserve division precedence',
|
|
741
|
+
testValue(
|
|
742
|
+
'calc(100%/(var(--aspect-ratio)))',
|
|
743
|
+
'calc(100%/(var(--aspect-ratio)))'
|
|
744
|
+
)
|
|
745
|
+
);
|
|
746
|
+
|
|
747
|
+
test(
|
|
748
|
+
'should preserve division precedence (2)',
|
|
749
|
+
testValue(
|
|
750
|
+
`calc(
|
|
751
|
+
(var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) /
|
|
752
|
+
((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16))
|
|
753
|
+
)`,
|
|
754
|
+
'calc((var(--fluid-screen) - ((var(--fluid-min-width)/16)*1rem))/(var(--fluid-max-width)/16 - var(--fluid-min-width)/16))'
|
|
755
|
+
)
|
|
756
|
+
);
|
|
757
|
+
|
|
758
|
+
test(
|
|
759
|
+
'should preserve division precedence (3)',
|
|
760
|
+
testValue('calc(1/(10/var(--dot-size)))', 'calc(1/(10/var(--dot-size)))')
|
|
761
|
+
);
|
|
762
|
+
|
|
763
|
+
test(
|
|
764
|
+
'should correctly preserve parentheses',
|
|
765
|
+
testValue(
|
|
766
|
+
'calc(1/((var(--a) - var(--b))/16))',
|
|
767
|
+
'calc(1/(var(--a) - var(--b))/16)'
|
|
768
|
+
)
|
|
769
|
+
);
|
|
770
|
+
|
|
771
|
+
test('precision for calc', testValue('calc(100% / 3 * 3)', '100%'));
|
|
772
|
+
|
|
773
|
+
test(
|
|
774
|
+
'precision for nested calc',
|
|
775
|
+
testValue('calc(calc(100% / 3) * 3)', '100%')
|
|
776
|
+
);
|
|
777
|
+
|
|
778
|
+
test('plus sign', testValue('calc(+100px + +100px)', '200px'));
|
|
779
|
+
|
|
780
|
+
test('plus sign (#1)', testValue('calc(+100px - +100px)', '0px'));
|
|
781
|
+
|
|
782
|
+
test('plus sign (#2)', testValue('calc(200px * +1)', '200px'));
|
|
783
|
+
|
|
784
|
+
test('plus sign (#3)', testValue('calc(200px / +1)', '200px'));
|
|
785
|
+
|
|
786
|
+
test('minus sign', testValue('calc(-100px + -100px)', '-200px'));
|
|
787
|
+
|
|
788
|
+
test('minus sign (#2)', testValue('calc(-100px - -100px)', '0px'));
|
|
789
|
+
|
|
790
|
+
test('minus sign (#3)', testValue('calc(200px * -1)', '-200px'));
|
|
791
|
+
|
|
792
|
+
test('minus sign (#4)', testValue('calc(200px / -1)', '-200px'));
|
|
793
|
+
|
|
794
|
+
test('whitespace', testValue('calc( 100px + 100px )', '200px'));
|
|
795
|
+
|
|
796
|
+
test('whitespace (#1)', testValue('calc(\t100px\t+\t100px\t)', '200px'));
|
|
797
|
+
|
|
798
|
+
test('whitespace (#2)', testValue('calc(\n100px\n+\n100px\n)', '200px'));
|
|
799
|
+
|
|
800
|
+
test(
|
|
801
|
+
'whitespace (#4)',
|
|
802
|
+
testValue('calc(\r\n100px\r\n+\r\n100px\r\n)', '200px')
|
|
803
|
+
);
|
|
804
|
+
|
|
805
|
+
test(
|
|
806
|
+
'comments',
|
|
807
|
+
testValue('calc(/*test*/100px/*test*/ + /*test*/100px/*test*/)', '200px')
|
|
808
|
+
);
|
|
809
|
+
|
|
810
|
+
test(
|
|
811
|
+
'comments (#1)',
|
|
812
|
+
testValue('calc(/*test*/100px/*test*/*/*test*/2/*test*/)', '200px')
|
|
813
|
+
);
|
|
814
|
+
|
|
815
|
+
test(
|
|
816
|
+
'comments nested',
|
|
817
|
+
testValue(
|
|
818
|
+
'calc(/*test*/100px + calc(/*test*/100px/*test*/ + /*test*/100px/*test*/))',
|
|
819
|
+
'300px'
|
|
820
|
+
)
|
|
821
|
+
);
|
|
822
|
+
|
|
823
|
+
test('exponent composed', testValue('calc(1.1e+1px + 1.1e+1px)', '22px'));
|
|
824
|
+
|
|
825
|
+
test('exponent composed (#1)', testValue('calc(10e+1px + 10e+1px)', '200px'));
|
|
826
|
+
|
|
827
|
+
test(
|
|
828
|
+
'exponent composed (#2)',
|
|
829
|
+
testValue('calc(1.1e+10px + 1.1e+10px)', '22000000000px')
|
|
830
|
+
);
|
|
831
|
+
|
|
832
|
+
test('exponent composed (#3)', testValue('calc(9e+1 * 1px)', '90px'));
|
|
833
|
+
|
|
834
|
+
test('exponent composed (#4)', testValue('calc(9e+1% + 10%)', '100%'));
|
|
835
|
+
|
|
836
|
+
test(
|
|
837
|
+
'exponent composed (uppercase)',
|
|
838
|
+
testValue('calc(1.1E+1px + 1.1E+1px)', '22px')
|
|
839
|
+
);
|
|
840
|
+
|
|
841
|
+
test('convert units', testValue('calc(1cm + 1px)', '1.02646cm'));
|
|
842
|
+
|
|
843
|
+
test('convert units (#1)', testValue('calc(1px + 1cm)', '38.79528px'));
|
|
844
|
+
|
|
845
|
+
test('convert units (#2)', testValue('calc(10Q + 10Q)', '20Q'));
|
|
846
|
+
|
|
847
|
+
test('convert units (#3)', testValue('calc(100.9q + 10px)', '111.48333q'));
|
|
848
|
+
|
|
849
|
+
test('convert units (#4)', testValue('calc(10px + 100.9q)', '105.33858px'));
|
|
850
|
+
|
|
851
|
+
test('convert units (#5)', testValue('calc(10cm + 1px)', '10.02646cm'));
|
|
852
|
+
|
|
853
|
+
test('convert units (#6)', testValue('calc(10mm + 1px)', '10.26458mm'));
|
|
854
|
+
|
|
855
|
+
test('convert units (#7)', testValue('calc(10px + 1q)', '10.94488px'));
|
|
856
|
+
|
|
857
|
+
test('convert units (#8)', testValue('calc(10cm + 1q)', '10.025cm'));
|
|
858
|
+
|
|
859
|
+
test('convert units (#9)', testValue('calc(10mm + 1q)', '10.25mm'));
|
|
860
|
+
|
|
861
|
+
test('convert units (#10)', testValue('calc(10in + 1q)', '10.00984in'));
|
|
862
|
+
|
|
863
|
+
test('convert units (#11)', testValue('calc(10pt + 1q)', '10.70866pt'));
|
|
864
|
+
|
|
865
|
+
test('convert units (#12)', testValue('calc(10pc + 1q)', '10.05906pc'));
|
|
866
|
+
|
|
867
|
+
test('convert units (#13)', testValue('calc(1q + 10px)', '11.58333q'));
|
|
868
|
+
|
|
869
|
+
test('convert units (#14)', testValue('calc(1q + 10cm)', '401q'));
|
|
870
|
+
|
|
871
|
+
test('convert units (#15)', testValue('calc(1q + 10mm)', '41q'));
|
|
872
|
+
|
|
873
|
+
test('convert units (#16)', testValue('calc(1q + 10in)', '1017q'));
|
|
874
|
+
|
|
875
|
+
test('convert units (#17)', testValue('calc(1q + 10pt)', '15.11111q'));
|
|
876
|
+
|
|
877
|
+
test('convert units (#18)', testValue('calc(1q + 10pc)', '170.33333q'));
|
|
878
|
+
|
|
879
|
+
test(
|
|
880
|
+
'unknown units',
|
|
881
|
+
testValue('calc(1unknown + 2unknown)', 'calc(1unknown + 2unknown)')
|
|
882
|
+
);
|
|
883
|
+
|
|
884
|
+
test(
|
|
885
|
+
'unknown units with known',
|
|
886
|
+
testValue('calc(1unknown + 2px)', 'calc(1unknown + 2px)')
|
|
887
|
+
);
|
|
888
|
+
|
|
889
|
+
test(
|
|
890
|
+
'unknown units with known (#1)',
|
|
891
|
+
testValue('calc(1px + 2unknown)', 'calc(1px + 2unknown)')
|
|
892
|
+
);
|
|
893
|
+
|
|
894
|
+
test(
|
|
895
|
+
'error with parsing',
|
|
896
|
+
testThrows(
|
|
897
|
+
'calc(10pc + unknown)',
|
|
898
|
+
'calc(10pc + unknown)',
|
|
899
|
+
'Lexical error on line 1: Unrecognized text.\n\n Erroneous area:\n1: 10pc + unknown\n^.........^'
|
|
900
|
+
)
|
|
901
|
+
);
|
|
902
|
+
|
|
903
|
+
test.run();
|