diff --git a/src/js/css-calc-var.ts b/src/js/css-calc-var.ts index 219c905..2eb2bd4 100644 --- a/src/js/css-calc-var.ts +++ b/src/js/css-calc-var.ts @@ -713,21 +713,24 @@ const resolveNode = (node: CalcASTNode[], isRoot: boolean): string => { flatItems.push(item); } } + const hasComma = flatItems.includes(','); if (isRoot) { - if (flatItems.length >= TRIA) { + if (flatItems.length >= TRIA && !hasComma) { return sortCalcValues(flatItems, true); } - const joined = flatItems.join(''); - return joined.startsWith('calc(') ? joined : `calc(${joined})`; + const joined = flatItems.join('').replace(/,\s*/g, ', '); + return joined.startsWith('calc(') || /^[a-z-]+\(/.test(joined) + ? joined + : `calc(${joined})`; } - if (flatItems.length >= TRIA) { + if (flatItems.length >= TRIA && !hasComma) { let serialized = sortCalcValues(flatItems, false); if (REG_FN_VAR_START.test(serialized)) { serialized = calc(serialized, { toCanonicalUnits: true }); } return serialized; } - return flatItems.join(''); + return flatItems.join('').replace(/,\s*/g, ', '); }; /** @@ -810,12 +813,14 @@ export const serializeCalc = (value: string, opt: Options = {}): string => { flatItems.push(item); } } - if (flatItems.length >= TRIA) { + const hasComma = flatItems.includes(','); + if (flatItems.length >= TRIA && !hasComma) { serializedCalc = sortCalcValues(flatItems, true); } else { const firstItem = flatItems[0] || ''; serializedCalc = - isString(firstItem) && firstItem.startsWith('calc(') + isString(firstItem) && + (firstItem.startsWith('calc(') || /^[a-z-]+\(/.test(firstItem)) ? firstItem : `calc(${firstItem})`; } diff --git a/test/css-calc-var.test.ts b/test/css-calc-var.test.ts index 0c57110..7660656 100644 --- a/test/css-calc-var.test.ts +++ b/test/css-calc-var.test.ts @@ -1781,6 +1781,20 @@ describe('CSS calc()', () => { }); assert.strictEqual(res2, 'calc(0.666667)', 'result'); }); + + it('should get value', () => { + const res = func('min(180px, calc(80vw - 24px))', { + format: 'specifiedValue' + }); + assert.strictEqual(res, 'min(180px, calc(80vw - 24px))', 'result'); + }); + + it('should get value', () => { + const res = func('max(10px, calc(1vw + 1px))', { + format: 'specifiedValue' + }); + assert.strictEqual(res, 'max(10px, calc(1vw + 1px))', 'result'); + }); }); describe('serialize calc edge cases', () => {