diff --git a/packages/css/src/config/functions.ts b/packages/css/src/config/functions.ts index d32e587b7..97146767c 100644 --- a/packages/css/src/config/functions.ts +++ b/packages/css/src/config/functions.ts @@ -60,7 +60,6 @@ const functions: FunctionDefinitions = { !hasUnit && isNaN(+current) && valueComponent.type === 'number' - && valueComponent.unit !== '%' ) { hasUnit = true } @@ -69,9 +68,7 @@ const functions: FunctionDefinitions = { if (isNaN(+current)) { if (valueComponent.type === 'number') { currentValueComponents.push(valueComponent) - if (valueComponent.unit !== '%') { - currentHasUnit = true - } + currentHasUnit = true } else { currentValueComponents.push(valueComponent) } @@ -157,9 +154,10 @@ const functions: FunctionDefinitions = { bypassParsing || isVarFunction || unitChecking && currentHasUnit, unitChecking, isVarFunction - ) + ) || functionName === 'var' if (!childHasUnit && functionName === '$') { - childHasUnit = this.css.variables[(newValueComponent.children[0] as StringValueComponent).value]?.type === 'string' + const variableType = this.css.variables[(newValueComponent.children[0] as StringValueComponent).value]?.type + childHasUnit = !variableType || variableType === 'string' } if (childHasUnit) { hasUnit = true diff --git a/packages/css/tests/calc.test.ts b/packages/css/tests/calc.test.ts index 966be6b40..83050c60a 100644 --- a/packages/css/tests/calc.test.ts +++ b/packages/css/tests/calc.test.ts @@ -1,13 +1,13 @@ it('calc', () => { - expect(new MasterCSS().create('w:calc(var(--h)|/|var(--w)*100%)')?.text).toContain('width:calc(var(--h) / var(--w) * 100% / 16 * 1rem)') - expect(new MasterCSS().create('w:calc($(h)/$(w)*100%)')?.text).toContain('width:calc(var(--h) / var(--w) * 100% / 16 * 1rem)') - expect(new MasterCSS().create('w:calc(var(--h)/var(--w)*100%)')?.text).toContain('width:calc(var(--h) / var(--w) * 100% / 16 * 1rem)') - expect(new MasterCSS().create('w:calc(var(--h)/var(--w)*100%)')?.text).toContain('width:calc(var(--h) / var(--w) * 100% / 16 * 1rem)') - expect(new MasterCSS().create('w:calc(var(--h)|/|var(--w)*100%)')?.text).toContain('width:calc(var(--h) / var(--w) * 100% / 16 * 1rem)') - expect(new MasterCSS().create('w:calc(var(--h)|/|var(--w)*100%)')?.text).toContain('width:calc(var(--h) / var(--w) * 100% / 16 * 1rem)') - expect(new MasterCSS().create('w:calc(1*2/3*100%)')?.text).toContain('width:calc(1 * 2 / 3 * 100% / 16 * 1rem)') - expect(new MasterCSS().create('w:calc(1rem*2/3*100%)')?.text).toContain('width:calc(1rem * 2 / 3 * 100%)') - expect(new MasterCSS().create('w:calc(1*2rem/3*100%)')?.text).toContain('width:calc(1 * 2rem / 3 * 100%)') + expect(new MasterCSS().create('w:calc(var(--h)|/|var(--w)*100%)')?.text).toContain('width:calc(var(--h) / var(--w) * 100%)') + expect(new MasterCSS().create('w:calc($(h)/$(w)*100)')?.text).toContain('width:calc(var(--h) / var(--w) * 100)') + expect(new MasterCSS({ variables: { w: 1, h: 1 } }).create('w:calc($(h)/$(w)*100)')?.text).toContain('width:calc(1 / 1 * 100 / 16 * 1rem)') + expect(new MasterCSS({ variables: { w: 1, h: '1rem' } }).create('w:calc($(h)/$(w)*100)')?.text).toContain('width:calc(1rem / 1 * 100)') + expect(new MasterCSS().create('w:calc(var(--h)/var(--w)*100%)')?.text).toContain('width:calc(var(--h) / var(--w) * 100%)') + expect(new MasterCSS().create('w:calc(var(--h)|/|var(--w)*100%)')?.text).toContain('width:calc(var(--h) / var(--w) * 100%)') + expect(new MasterCSS().create('w:calc(1*2/3*100%)')?.text).toContain('width:calc(1 * 2 / 3 * 100%)') + expect(new MasterCSS().create('w:calc(1rem*2/3*100)')?.text).toContain('width:calc(1rem * 2 / 3 * 100)') + expect(new MasterCSS().create('w:calc(1*2rem/3*100)')?.text).toContain('width:calc(1 * 2rem / 3 * 100)') expect(new MasterCSS().create('w:calc(1*2/3*100em)')?.text).toContain('width:calc(1 * 2 / 3 * 100em)') expect(new MasterCSS().create('w:calc(1*2/3*calc(2*3*6))')?.text).toContain('width:calc(1 * 2 / 3 * calc(2 * 3 * 6) / 16 * 1rem)') expect(new MasterCSS().create('w:calc(5*(2*3rem+6)/3)')?.text).toContain('width:calc(5 * (2 * 3rem + 0.375rem) / 3)') diff --git a/packages/css/tests/config/functions/calc.test.ts b/packages/css/tests/config/functions/calc.test.ts index e45012db0..7f1aca33b 100644 --- a/packages/css/tests/config/functions/calc.test.ts +++ b/packages/css/tests/config/functions/calc.test.ts @@ -1,10 +1,10 @@ it('calc', () => { expect(new MasterCSS().create('line-height:calc(32-16)')?.text).toBe('.line-height\\:calc\\(32-16\\){line-height:calc(32 - 16)}') expect(new MasterCSS().create('font-size:calc(32-16)')?.text).toBe('.font-size\\:calc\\(32-16\\){font-size:calc(2rem - 1rem)}') - expect(new MasterCSS().create('mt:calc(var(--g-y)*-.1)')?.text).toBe('.mt\\:calc\\(var\\(--g-y\\)\\*-\\.1\\){margin-top:calc(var(--g-y) * -0.1 / 16 * 1rem)}') - expect(new MasterCSS().create('mt:calc(var(--g-y)*(-.1))')?.text).toBe('.mt\\:calc\\(var\\(--g-y\\)\\*\\(-\\.1\\)\\){margin-top:calc(var(--g-y) * (-0.1) / 16 * 1rem)}') - expect(new MasterCSS().create('mt:calc(var(--g-y)--.1)')?.text).toBe('.mt\\:calc\\(var\\(--g-y\\)--\\.1\\){margin-top:calc(var(--g-y) / 16 * 1rem - -0.00625rem)}') - expect(new MasterCSS().create('mr:calc(var(--g-x)/(-2))')?.text).toBe('.mr\\:calc\\(var\\(--g-x\\)\\/\\(-2\\)\\){margin-right:calc(var(--g-x) / (-2) / 16 * 1rem)}') + expect(new MasterCSS().create('mt:calc(var(--g-y)*-.1)')?.text).toBe('.mt\\:calc\\(var\\(--g-y\\)\\*-\\.1\\){margin-top:calc(var(--g-y) * -0.1)}') + expect(new MasterCSS().create('mt:calc(var(--g-y)*(-.1))')?.text).toBe('.mt\\:calc\\(var\\(--g-y\\)\\*\\(-\\.1\\)\\){margin-top:calc(var(--g-y) * (-0.1))}') + expect(new MasterCSS().create('mt:calc(var(--g-y)--.1)')?.text).toBe('.mt\\:calc\\(var\\(--g-y\\)--\\.1\\){margin-top:calc(var(--g-y) - -0.00625rem)}') + expect(new MasterCSS().create('mr:calc(var(--g-x)/(-2))')?.text).toBe('.mr\\:calc\\(var\\(--g-x\\)\\/\\(-2\\)\\){margin-right:calc(var(--g-x) / (-2))}') }) it('calc with variables', () => {