Sprinkles: Support resolving falsey values for conditional atoms (#64)

Author: michaeltaranto

.changeset/dirty-beans-dance.md

@@ -0,0 +1,23 @@
+---
+'@vanilla-extract/sprinkles': patch
+---
+
+Support resolving falsey values for conditional atoms
+
+Fixes bug where falsey values such as `opacity: 0` would not resolve classes via the conditional object or responsive array syntax.
+
+```ts
+export const atoms = createAtomicStyles({
+  defaultCondition: 'mobile',
+  conditions: {
+    mobile: {},
+    desktop: {
+      '@media': 'screen and (min-width: 786px)'
+    }
+  },
+  responsiveArray: ['mobile', 'desktop'],
+  properties: {
+    opacity: [0, 1]
+  }
+});
+```

packages/sprinkles/src/createAtomsFn.ts

@@ -137,7 +137,11 @@ export function createAtomsFn<Args extends ReadonlyArray<AtomicStyles>>(
       } else if (Array.isArray(propValue)) {
         for (const responsiveIndex in propValue) {
           const responsiveValue = propValue[responsiveIndex];
-          if (responsiveValue) {
+
+          if (
+            typeof responsiveValue === 'string' ||
+            typeof responsiveValue === 'number'
+          ) {
             const conditionName =
               atomicProperty.responsiveArray[responsiveIndex];
             classNames.push(
@@ -150,7 +154,7 @@ export function createAtomsFn<Args extends ReadonlyArray<AtomicStyles>>(
           // Conditional style
           const value = propValue[conditionName];
 
-          if (value) {
+          if (typeof value === 'string' || typeof value === 'number') {
             classNames.push(
               atomicProperty.values[value].conditions[conditionName],
             );

tests/sprinkles/index.css.ts

@@ -49,6 +49,7 @@ export const conditionalAtomicStyles = createAtomicStyles({
     display: ['block', 'none', 'flex'],
     paddingTop: spacing,
     paddingBottom: spacing,
+    opacity: [0, 1],
   },
   shorthands: {
     paddingY: ['paddingBottom', 'paddingTop'],

tests/sprinkles/sprinkles.test.ts

@@ -25,6 +25,26 @@ describe('sprinkles', () => {
       );
     });
 
+    it('should handle falsey values on conditional styles', () => {
+      const atoms = createAtomsFn(conditionalAtomicStyles);
+
+      expect(
+        atoms({ display: 'block', opacity: { mobile: 0, desktop: 1 } }),
+      ).toMatchInlineSnapshot(
+        `"sprinkles_display_block_mobile__1kw4brej sprinkles_opacity_0_mobile__1kw4bre1a sprinkles_opacity_1_desktop__1kw4bre1f"`,
+      );
+    });
+
+    it('should handle falsey values from responsive array on conditional styles', () => {
+      const atoms = createAtomsFn(conditionalAtomicStyles);
+
+      expect(
+        atoms({ display: 'block', opacity: [0, 1] }),
+      ).toMatchInlineSnapshot(
+        `"sprinkles_display_block_mobile__1kw4brej sprinkles_opacity_0_mobile__1kw4bre1a sprinkles_opacity_1_tablet__1kw4bre1e"`,
+      );
+    });
+
     it('should handle conditional styles with different variants', () => {
       const atoms = createAtomsFn(conditionalAtomicStyles);
 
@@ -203,7 +223,7 @@ describe('sprinkles', () => {
           padding: 'large',
         }),
       ).toMatchInlineSnapshot(
-        `"sprinkles_paddingTop_small__1kw4bre1q sprinkles_paddingBottom_medium__1kw4bre1u sprinkles_paddingLeft_small__1kw4bre1k sprinkles_paddingRight_small__1kw4bre1n"`,
+        `"sprinkles_paddingTop_small__1kw4bre1w sprinkles_paddingBottom_medium__1kw4bre20 sprinkles_paddingLeft_small__1kw4bre1q sprinkles_paddingRight_small__1kw4bre1t"`,
       );
     });
 
@@ -216,7 +236,7 @@ describe('sprinkles', () => {
           padding: 'large',
         }),
       ).toMatchInlineSnapshot(
-        `"sprinkles_paddingTop_large__1kw4bre1s sprinkles_paddingBottom_large__1kw4bre1v sprinkles_paddingLeft_small__1kw4bre1k sprinkles_paddingRight_small__1kw4bre1n"`,
+        `"sprinkles_paddingTop_large__1kw4bre1y sprinkles_paddingBottom_large__1kw4bre21 sprinkles_paddingLeft_small__1kw4bre1q sprinkles_paddingRight_small__1kw4bre1t"`,
       );
     });
   });
@@ -315,6 +335,31 @@ describe('sprinkles', () => {
             },
           },
         },
+        "opacity": Object {
+          "responsiveArray": Array [
+            "mobile",
+            "tablet",
+            "desktop",
+          ],
+          "values": Object {
+            "0": Object {
+              "conditions": Object {
+                "desktop": "sprinkles_opacity_0_desktop__1kw4bre1c",
+                "mobile": "sprinkles_opacity_0_mobile__1kw4bre1a",
+                "tablet": "sprinkles_opacity_0_tablet__1kw4bre1b",
+              },
+              "defaultClass": "sprinkles_opacity_0_mobile__1kw4bre1a",
+            },
+            "1": Object {
+              "conditions": Object {
+                "desktop": "sprinkles_opacity_1_desktop__1kw4bre1f",
+                "mobile": "sprinkles_opacity_1_mobile__1kw4bre1d",
+                "tablet": "sprinkles_opacity_1_tablet__1kw4bre1e",
+              },
+              "defaultClass": "sprinkles_opacity_1_mobile__1kw4bre1d",
+            },
+          },
+        },
         "paddingBottom": Object {
           "responsiveArray": Array [
             "mobile",