| 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();
|
|---|