let postcss = require('postcss') let clamp = require('./') async function run (input, output, opts) { let result = await postcss([clamp(opts)]).process(input, { from: '/test.css' }) expect(result.css).toEqual(output) expect(result.warnings()).toHaveLength(0) return result } it('handle simple transformation (only values)', async () => { await run( 'a{ width: clamp(10px, 64px, 80px); }', 'a{ width: max(10px, min(64px, 80px)); }' ) }) it('handle simple transformation (only values) with preserve', async () => { await run( 'a{ width: clamp(10px, 64px, 80px); }', 'a{ width: max(10px, min(64px, 80px)); width: clamp(10px, 64px, 80px); }', { preserve: true } ) }) it('handle transformation with functions', async () => { await run( 'a{ width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); }', 'a{ width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); }' ) }) it('handle transformation with functions with preserve', async () => { await run( 'a{ width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); }', 'a{ width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); ' + 'width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); }', { preserve: true } ) }) it('handle transformation with different units', async () => { await run( 'a{ width: clamp(10%, 2px, 4rem); }', 'a{ width: max(10%, min(2px, 4rem)); }' ) }) it('handle transformation with different units and preserve', async () => { await run( 'a{ width: clamp(10%, 2px, 4rem); }', 'a{ width: max(10%, min(2px, 4rem)); width: clamp(10%, 2px, 4rem); }', { preserve: true } ) }) it('transform only function with 3 parameters', async () => { await run( 'a{ width: clamp(10%, 2px, 4rem);' + '\nheight: clamp(10px, 20px, 30px, 40px); }', 'a{ width: max(10%, min(2px, 4rem));' + '\nheight: clamp(10px, 20px, 30px, 40px); }' ) }) it('transform only clamp function', async () => { await run( 'a{ width: clamp(10%, 2px, 4rem);\nheight: calc(10px + 100%); }', 'a{ width: max(10%, min(2px, 4rem));\nheight: calc(10px + 100%); }' ) }) it('precalculate second and third with the same unit (int values)', async () => { await run('a{ width: clamp(10%, 2px, 5px); }', 'a{ width: max(10%, 7px); }', { precalculate: true }) }) it('precalculate second and third with the same unit (float values)', async () => { await run( 'a{ width: clamp(10%, 2.5px, 5.1px); }', 'a{ width: max(10%, 7.6px); }', { precalculate: true } ) }) it('precalculate second and third with the same unit (float and int values)', async () => { await run( 'a{ width: clamp(10%, 2.5px, 5px); }', 'a{ width: max(10%, 7.5px); }', { precalculate: true } ) }) it('precalculate 2nd & 3rd with the same unit (float and int vals) & preserve', async () => { await run( 'a{ width: clamp(10%, 2.5px, 5px); }', 'a{ width: max(10%, 7.5px); width: clamp(10%, 2.5px, 5px); }', { precalculate: true, preserve: true } ) }) it('precalculate all values with the same unit (int values)', async () => { await run('a{ width: clamp(10px, 2px, 5px); }', 'a{ width: 17px; }', { precalculate: true }) }) it('precalculate all values with the same unit (float values)', async () => { await run( 'a{ width: clamp(10.4px, 2.11px, 5.9px); }', 'a{ width: 18.41px; }', { precalculate: true } ) }) it('precalculate all values with the same unit (int and float values)', async () => { await run('a{ width: clamp(10.4px, 2px, 5.9px); }', 'a{ width: 18.3px; }', { precalculate: true }) }) it('handle function with enable precalculation as third', async () => { await run( 'a{ width: clamp(10px, 2px, calc(10px + 100%)); }', 'a{ width: max(10px, min(2px, calc(10px + 100%))); }', { precalculate: true } ) }) it('handle function with enable precalculation as second', async () => { await run( 'a{ width: clamp(10px, calc(10px + 100%), 2px); }', 'a{ width: max(10px, min(calc(10px + 100%), 2px)); }', { precalculate: true } ) }) it('handle function with enable precalculation as first', async () => { await run( 'a{ width: clamp(calc(10px + 100%), 10px, 2px); }', 'a{ width: max(calc(10px + 100%), 12px); }', { precalculate: true } ) }) it('handle function with enable precalculation as all', async () => { await run( 'a{ width: clamp(calc(10px + 100%), calc(10rem + 200%), 10px); }', 'a{ width: max(calc(10px + 100%), min(calc(10rem + 200%), 10px)); }', { precalculate: true } ) }) it('handle not valid values', async () => { await run('a{ width: clamp(a, b, c); }', 'a{ width: max(a, min(b, c)); }', { precalculate: true }) }) it('handle not valid values with preserve', async () => { await run( 'a{ width: clamp(a, b, c); }', 'a{ width: max(a, min(b, c)); width: clamp(a, b, c); }', { precalculate: true, preserve: true } ) }) it('handle not valid values mixed with valid', async () => { await run( 'a{ width: clamp(a, 1px, 2em); }', 'a{ width: max(a, min(1px, 2em)); }', { precalculate: true } ) }) it('handle not valid values mixed with valid and preserve', async () => { await run( 'a{ width: clamp(a, 1px, 2em); }', 'a{ width: max(a, min(1px, 2em)); width: clamp(a, 1px, 2em); }', { precalculate: true, preserve: true } ) }) it('handle complex values', async () => { await run( 'a{ grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr); }', 'a{ grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr); }' ) }) it('handle multiple complex values', async () => { await run( 'a{ margin: clamp(1rem, 2%, 3rem) 4px clamp(5rem, 6%, 7rem) 8rem; }', 'a{ margin: max(1rem, min(2%, 3rem)) 4px max(5rem, min(6%, 7rem)) 8rem; }' ) }) it('handle calc', async () => { await run( 'a{ margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px)); }', 'a{ margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px))); }' ) }) it('handle multiple calc', async () => { await run( 'a{ margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px)); }', 'a{ margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px))); }' ) }) it('handle nested clamp', async () => { await run( 'a{ font-size: clamp(clamp(1rem, 2vw, 3rem), 4vw, 5rem); }', 'a{ font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem)); }' ) })