Fix: Prevent % or indeterminate CSS variables from converting units

master-co · Dec 19, 2023 · 51f4118 · 51f4118
1 parent 9c0937d
commit 51f4118
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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', () => {