fix: unboxing of 0 values in conditionals (#2212)

fix: unboxing of 0 values
chakra-ui · Feb 16, 2024 · ec93e34 · ec93e34
1 parent 78145d8
commit ec93e34
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 3 deletions.
diff --git a/packages/extractor/__tests__/extract.test.ts b/packages/extractor/__tests__/extract.test.ts
@@ -1759,6 +1759,78 @@ it('extract JsxAttribute > JsxExpression > ConditonalExpression > Identifier|Val
   `)
 })
 
+it('extract JsxAttribute > JsxExpression > ConditionalExpression > when true is a 0', () => {
+  expect(
+    extractFromCode(
+      `
+          <div className={css({ opacity: isHovered ? 1 : 0 })}></div>
+      `,
+      {
+        functionNameList: ['css'],
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+      {
+        "css": [
+          {
+            "conditions": [
+              {
+                "0": {
+                  "opacity": 1,
+                },
+              },
+              {
+                "0": {
+                  "opacity": 0,
+                },
+              },
+            ],
+            "raw": [
+              {},
+            ],
+            "spreadConditions": [],
+          },
+        ],
+      }
+    `)
+})
+
+it('extract JsxAttribute > JsxExpression > ConditionalExpression > when false is a 0', () => {
+  expect(
+    extractFromCode(
+      `
+          <div className={css({ opacity: isHovered ? 1 : 0 })}></div>
+      `,
+      {
+        functionNameList: ['css'],
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+      {
+        "css": [
+          {
+            "conditions": [
+              {
+                "0": {
+                  "opacity": 1,
+                },
+              },
+              {
+                "0": {
+                  "opacity": 0,
+                },
+              },
+            ],
+            "raw": [
+              {},
+            ],
+            "spreadConditions": [],
+          },
+        ],
+      }
+    `)
+})
+
 it('extract JsxAttribute > JsxExpression > ElementAccessExpression', () => {
   expect(
     extractFromCode(`

diff --git a/packages/extractor/__tests__/unbox.test.ts b/packages/extractor/__tests__/unbox.test.ts
@@ -4350,6 +4350,7 @@ test('unbox with conditions', () => {
     const className = css({
       px: 4,
       color: isDark ? 'blue.100' : 'blue.200',
+      opacity: isHovered ? 1 : 0,
       ...(isKnown && {
         backgroundColor: 'red.100',
         padding: false ? 2 : 8,
@@ -4386,6 +4387,12 @@ test('unbox with conditions', () => {
         {
           "color": "blue.200",
         },
+        {
+          "opacity": 1,
+        },
+        {
+          "opacity": 0,
+        },
         {
           "fontSize": "2xl",
         },

diff --git a/packages/extractor/src/unbox.ts b/packages/extractor/src/unbox.ts
@@ -1,7 +1,7 @@
 import { box } from './box'
 import type { BoxNode } from './box-factory'
 import type { LiteralObject, LiteralValue } from './types'
-import { isNotNullish } from './utils'
+import { isNotNullish, isTruthyOrZero } from './utils'
 import { Node } from 'ts-morph'
 
 const makeObjAt = (path: string[], value: unknown) => {
@@ -52,10 +52,10 @@ const getLiteralValue = (node: BoxNode | undefined, ctx: UnboxContext): LiteralV
       return undefined
     }
 
-    if (whenTrue) {
+    if (isTruthyOrZero(whenTrue)) {
       ctx.conditions.push(makeObjAt(path, whenTrue))
     }
-    if (whenFalse) {
+    if (isTruthyOrZero(whenFalse)) {
       ctx.conditions.push(makeObjAt(path, whenFalse))
     }
     return undefined

diff --git a/packages/extractor/src/utils.ts b/packages/extractor/src/utils.ts
@@ -5,6 +5,7 @@ type Nullable<T> = T | null | undefined
 
 export const isNotNullish = <T>(element: Nullable<T>): element is T => element != null
 export const isNullish = <T>(element: Nullable<T>): element is null | undefined => element == null
+export const isTruthyOrZero = <T>(element: T): element is T => !!element || element === 0
 
 /** Returns true if typeof value is object && not null */
 export const isObject = (value: any): value is object => value != null && typeof value === 'object'