Sprinkles: Support mapping values to boolean, null and undefined (#331)

Author: markdalgleish

.changeset/giant-llamas-mix.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/sprinkles': patch
+---
+
+`createMapValueFn`: Support mapping values to `boolean`, `null` and `undefined`

packages/sprinkles/src/createUtils.ts

@@ -123,7 +123,7 @@ export function createNormalizeValueFn<AtomicStyles extends Conditions<string>>(
 export function createMapValueFn<AtomicStyles extends Conditions<string>>(
   atomicStyles: AtomicStyles,
 ): <
-  OutputValue extends string | number,
+  OutputValue extends string | number | boolean | null | undefined,
   Value extends ConditionalValue<AtomicStyles, string | number>,
 >(
   value: Value,

tests/sprinkles/sprinkles.test.ts

@@ -514,6 +514,59 @@ describe('sprinkles', () => {
       expect(value).toMatchInlineSnapshot(`"123_mobile"`);
     });
 
+    it('should handle booleans', () => {
+      const mapValue = createMapValueFn(conditionalAtomicStyles);
+      const value = mapValue(123, () => false);
+
+      expect(value).toBe(false);
+    });
+
+    it('should handle conditional booleans', () => {
+      const mapValue = createMapValueFn(conditionalAtomicStyles);
+      const value = mapValue(
+        { mobile: 1, tablet: 2, desktop: 3 },
+        (value) => value === 2,
+      );
+
+      expect(value).toStrictEqual({
+        mobile: false,
+        tablet: true,
+        desktop: false,
+      });
+    });
+
+    it('should handle nulls', () => {
+      const mapValue = createMapValueFn(conditionalAtomicStyles);
+      const value = mapValue(123, () => null);
+
+      expect(value).toBe(null);
+    });
+
+    it('should handle conditional nulls', () => {
+      const mapValue = createMapValueFn(conditionalAtomicStyles);
+      const value = mapValue({ mobile: 1, tablet: 2, desktop: 3 }, (value) =>
+        value === 2 ? null : value,
+      );
+
+      expect(value).toStrictEqual({ mobile: 1, tablet: null, desktop: 3 });
+    });
+
+    it('should handle undefined', () => {
+      const mapValue = createMapValueFn(conditionalAtomicStyles);
+      const value = mapValue(123, () => undefined);
+
+      expect(value).toBe(undefined);
+    });
+
+    it('should handle conditional undefined', () => {
+      const mapValue = createMapValueFn(conditionalAtomicStyles);
+      const value = mapValue({ mobile: 1, tablet: 2, desktop: 3 }, (value) =>
+        value === 2 ? undefined : value,
+      );
+
+      expect(value).toStrictEqual({ mobile: 1, tablet: undefined, desktop: 3 });
+    });
+
     it('should handle responsive arrays', () => {
       const map = createMapValueFn(conditionalAtomicStyles);
       const value = map(['one'], (value, key) => `${value}_${key}` as const);