Sprinkles: Ignore undefined values in conditional objects (#139)

Co-authored-by: Mark Dalgleish <[email protected]>

Author: mattcompiles

.changeset/dull-seahorses-cough.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/sprinkles': patch
+---
+
+Ignore undefined values in conditional objects

packages/sprinkles/src/createAtomsFn.ts

@@ -141,14 +141,16 @@ export function createAtomsFn<Args extends ReadonlyArray<AtomicStyles>>(
             // Conditional style
             const value = propValue[conditionName];
 
-            if (process.env.NODE_ENV !== 'production') {
-              if (!atomicProperty.values[value].conditions[conditionName]) {
-                throw new Error();
+            if (value != null) {
+              if (process.env.NODE_ENV !== 'production') {
+                if (!atomicProperty.values[value].conditions[conditionName]) {
+                  throw new Error();
+                }
               }
+              classNames.push(
+                atomicProperty.values[value].conditions[conditionName],
+              );
             }
-            classNames.push(
-              atomicProperty.values[value].conditions[conditionName],
-            );
           }
         }
       } catch (e) {
@@ -235,20 +237,22 @@ export function createAtomsFn<Args extends ReadonlyArray<AtomicStyles>>(
               for (const conditionName in propValue) {
                 const value = propValue[conditionName];
 
-                if (!atomicProperty.values[value]) {
-                  invalidPropValue(prop, value, atomicProperty.values);
-                }
+                if (value != null) {
+                  if (!atomicProperty.values[value]) {
+                    invalidPropValue(prop, value, atomicProperty.values);
+                  }
 
-                if (!atomicProperty.values[value].conditions[conditionName]) {
-                  throw new SprinklesError(
-                    `"${prop}" has no condition named ${format(
-                      conditionName,
-                    )}. Possible values are ${Object.keys(
-                      atomicProperty.values[value].conditions,
-                    )
-                      .map(format)
-                      .join(', ')}`,
-                  );
+                  if (!atomicProperty.values[value].conditions[conditionName]) {
+                    throw new SprinklesError(
+                      `"${prop}" has no condition named ${format(
+                        conditionName,
+                      )}. Possible values are ${Object.keys(
+                        atomicProperty.values[value].conditions,
+                      )
+                        .map(format)
+                        .join(', ')}`,
+                    );
+                  }
                 }
               }
             }

packages/sprinkles/src/createUtils.ts

@@ -126,7 +126,9 @@ export function createMapValueFn<AtomicStyles extends Conditions<string>>(
     const mappedObject: Record<string, string> = {};
 
     for (const key in normalizedObject) {
-      mappedObject[key] = mapFn(normalizedObject[key], key);
+      if (normalizedObject[key] != null) {
+        mappedObject[key] = mapFn(normalizedObject[key], key);
+      }
     }
 
     return mappedObject;

tests/sprinkles/sprinkles.test.ts

@@ -31,6 +31,17 @@ describe('sprinkles', () => {
       );
     });
 
+    it('should ignore undefined values', () => {
+      const atoms = createAtomsFn(conditionalAtomicStyles);
+
+      expect(
+        atoms({
+          display: 'block',
+          paddingTop: undefined,
+        }),
+      ).toMatchInlineSnapshot(`"sprinkles_display_block_mobile__1kw4brej"`);
+    });
+
     it('should handle falsey values on conditional styles', () => {
       const atoms = createAtomsFn(conditionalAtomicStyles);
 
@@ -85,6 +96,25 @@ describe('sprinkles', () => {
       );
     });
 
+    it('should ignore undefined conditional values', () => {
+      const atoms = createAtomsFn(
+        atomicWithShorthandStyles,
+        conditionalAtomicStyles,
+      );
+
+      expect(
+        atoms({
+          paddingTop: {
+            mobile: 'medium',
+            tablet: undefined,
+            desktop: 'large',
+          },
+        }),
+      ).toMatchInlineSnapshot(
+        `"sprinkles_paddingTop_medium_mobile__1kw4brev sprinkles_paddingTop_large_desktop__1kw4bre10"`,
+      );
+    });
+
     it('should handle responsive arrays', () => {
       const atoms = createAtomsFn(
         atomicWithShorthandStyles,
@@ -450,6 +480,20 @@ describe('sprinkles', () => {
         }
       `);
     });
+
+    it('should handle conditional objects with undefined', () => {
+      const normalizeValue = createNormalizeValueFn(conditionalAtomicStyles);
+
+      expect(
+        normalizeValue({ mobile: 'one', tablet: undefined, desktop: 'three' }),
+      ).toMatchInlineSnapshot(`
+        Object {
+          "desktop": "three",
+          "mobile": "one",
+          "tablet": undefined,
+        }
+      `);
+    });
   });
 
   describe('createMapValueFn', () => {
@@ -551,6 +595,21 @@ describe('sprinkles', () => {
         }
       `);
     });
+
+    it('should handle conditional objects with undefined', () => {
+      const mapValue = createMapValueFn(conditionalAtomicStyles);
+      const value = mapValue(
+        { mobile: 'one', tablet: undefined, desktop: 'three' } as const,
+        (value, key) => `${value}_${key}` as const,
+      );
+
+      expect(value).toMatchInlineSnapshot(`
+        Object {
+          "desktop": "three_desktop",
+          "mobile": "one_mobile",
+        }
+      `);
+    });
   });
 
   it('should create atomic styles', () => {