Sprinkles: Support boolean conditional values (#605)

Author: markdalgleish

.changeset/itchy-eyes-protect.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/sprinkles': minor
+---
+
+Support boolean conditional values, e.g. `{ mobile: false, desktop: true }`

packages/sprinkles/src/createUtils.ts

@@ -8,11 +8,15 @@ type ExtractValue<
   Value extends
     | string
     | number
-    | Partial<Record<string, string | number>>
-    | ResponsiveArrayByMaxLength<number, string | number | null>,
-> = Value extends ResponsiveArrayByMaxLength<number, string | number | null>
+    | boolean
+    | Partial<Record<string, string | number | boolean>>
+    | ResponsiveArrayByMaxLength<number, string | number | boolean | null>,
+> = Value extends ResponsiveArrayByMaxLength<
+  number,
+  string | number | boolean | null
+>
   ? NonNullable<Value[number]>
-  : Value extends Partial<Record<string, string | number>>
+  : Value extends Partial<Record<string, string | number | boolean>>
   ? NonNullable<Value[keyof Value]>
   : Value;
 
@@ -32,7 +36,7 @@ type ExtractConditionNames<SprinklesProperties extends Conditions<string>> =
 
 export type ConditionalValue<
   SprinklesProperties extends Conditions<string>,
-  Value extends string | number,
+  Value extends string | number | boolean,
 > =
   | (ExtractDefaultCondition<SprinklesProperties> extends false ? never : Value)
   | Partial<Record<ExtractConditionNames<SprinklesProperties>, Value>>
@@ -48,13 +52,13 @@ export type ConditionalValue<
 type RequiredConditionalObject<
   RequiredConditionName extends string,
   OptionalConditionNames extends string,
-  Value extends string | number,
+  Value extends string | number | boolean,
 > = Record<RequiredConditionName, Value> &
   Partial<Record<OptionalConditionNames, Value>>;
 
 export type RequiredConditionalValue<
   SprinklesProperties extends Conditions<string>,
-  Value extends string | number,
+  Value extends string | number | boolean,
 > = ExtractDefaultCondition<SprinklesProperties> extends false
   ? never
   :
@@ -80,7 +84,7 @@ export function createNormalizeValueFn<
   SprinklesProperties extends Conditions<string>,
 >(
   properties: SprinklesProperties,
-): <Value extends string | number>(
+): <Value extends string | number | boolean>(
   value: ConditionalValue<SprinklesProperties, Value>,
 ) => Partial<Record<ExtractConditionNames<SprinklesProperties>, Value>> {
   const { conditions } = properties;
@@ -90,7 +94,11 @@ export function createNormalizeValueFn<
   }
 
   function normalizeValue(value: any) {
-    if (typeof value === 'string' || typeof value === 'number') {
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+    ) {
       if (!conditions.defaultCondition) {
         throw new Error('No default condition');
       }
@@ -130,14 +138,17 @@ export function createMapValueFn<
   properties: SprinklesProperties,
 ): <
   OutputValue extends string | number | boolean | null | undefined,
-  Value extends ConditionalValue<SprinklesProperties, string | number>,
+  Value extends ConditionalValue<
+    SprinklesProperties,
+    string | number | boolean
+  >,
 >(
   value: Value,
   fn: (
     inputValue: ExtractValue<Value>,
     key: ExtractConditionNames<SprinklesProperties>,
   ) => OutputValue,
-) => Value extends string | number
+) => Value extends string | number | boolean
   ? OutputValue
   : Partial<Record<ExtractConditionNames<SprinklesProperties>, OutputValue>> {
   const { conditions } = properties;
@@ -149,7 +160,11 @@ export function createMapValueFn<
   const normalizeValue = createNormalizeValueFn(properties);
 
   function mapValue(value: any, mapFn: any) {
-    if (typeof value === 'string' || typeof value === 'number') {
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+    ) {
       if (!conditions.defaultCondition) {
         throw new Error('No default condition');
       }

tests/sprinkles/sprinkles-type-tests.ts

@@ -133,7 +133,7 @@ const noop = (...args: Array<any>) => {};
     mobille: '',
   });
 
-  function testGenericNormalizeValue<Key extends string | number>(
+  function testGenericNormalizeValue<Key extends string | number | boolean>(
     value: ResponsiveValue<Key>,
   ): Key | undefined {
     const normalizedValue = normalizeValue(value);
@@ -161,32 +161,45 @@ const noop = (...args: Array<any>) => {};
   // @ts-expect-error - Should force conditional value as no default condition
   mapValueWithoutDefaultCondition('test');
 
-  type ResponsiveValue<Value extends string | number> = ConditionalValue<
-    typeof conditionalProperties,
-    Value
-  >;
+  type ResponsiveValue<Value extends string | number | boolean> =
+    ConditionalValue<typeof conditionalProperties, Value>;
 
-  let responsiveValue: ResponsiveValue<'row' | 'column'>;
+  let responsiveValue: ResponsiveValue<'row' | 'column' | boolean>;
 
   // Valid values
   responsiveValue = 'row';
   responsiveValue = 'column';
   responsiveValue = [null];
   responsiveValue = ['row', 'column'];
   responsiveValue = ['row', null, 'column'];
+  responsiveValue = true;
+  responsiveValue = false;
+  responsiveValue = [false];
+  responsiveValue = [false, null, true];
   responsiveValue = {};
   responsiveValue = { mobile: 'row' };
   responsiveValue = { tablet: 'column' };
   responsiveValue = { desktop: 'column' };
+  responsiveValue = { mobile: true };
+  responsiveValue = { mobile: false };
   responsiveValue = {
     mobile: 'row',
     tablet: 'column',
   };
+  responsiveValue = {
+    mobile: true,
+    tablet: false,
+  };
   responsiveValue = {
     mobile: 'row',
     tablet: 'column',
     desktop: 'row',
   };
+  responsiveValue = {
+    mobile: false,
+    tablet: true,
+    desktop: false,
+  };
 
   // Invalid values
   // @ts-expect-error
@@ -221,17 +234,22 @@ const noop = (...args: Array<any>) => {};
 
   noop(responsiveValue);
 
-  type RequiredResponsiveValue<Value extends string | number> =
-    RequiredConditionalValue<typeof conditionalProperties, Value>;
-
-  let requiredValue: RequiredResponsiveValue<'row' | 'column'>;
+  let requiredValue: RequiredConditionalValue<
+    typeof conditionalProperties,
+    'row' | 'column' | boolean
+  >;
 
   // Valid values
   requiredValue = 'row';
   requiredValue = { mobile: 'row' };
   requiredValue = { mobile: 'row', desktop: 'column' };
+  requiredValue = true;
+  requiredValue = { mobile: false };
+  requiredValue = { mobile: false, desktop: true };
   requiredValue = ['row'];
   requiredValue = ['row', null, 'column'];
+  requiredValue = [false];
+  requiredValue = [false, null, true];
 
   // @ts-expect-error
   requiredValue = [];
@@ -242,9 +260,13 @@ const noop = (...args: Array<any>) => {};
   // @ts-expect-error
   requiredValue = [null, null, 'column'];
   // @ts-expect-error
+  requiredValue = [null, null, true];
+  // @ts-expect-error
   requiredValue = {};
   // @ts-expect-error
   requiredValue = { desktop: 'column' };
+  // @ts-expect-error
+  requiredValue = { desktop: true };
 
   noop(requiredValue);
 

tests/sprinkles/sprinkles.test.ts

@@ -451,13 +451,23 @@ describe('sprinkles', () => {
       `);
     });
 
+    it('should handle unresponsive booleans', () => {
+      const normalizeValue = createNormalizeValueFn(conditionalProperties);
+
+      expect(normalizeValue(false)).toMatchInlineSnapshot(`
+        Object {
+          "mobile": false,
+        }
+      `);
+    });
+
     it('should handle responsive arrays', () => {
       const normalizeValue = createNormalizeValueFn(conditionalProperties);
 
-      expect(normalizeValue(['one', 'two'])).toMatchInlineSnapshot(`
+      expect(normalizeValue([false, true])).toMatchInlineSnapshot(`
         Object {
-          "mobile": "one",
-          "tablet": "two",
+          "mobile": false,
+          "tablet": true,
         }
       `);
     });
@@ -477,10 +487,10 @@ describe('sprinkles', () => {
     it('should handle responsive arrays with nulls', () => {
       const normalizeValue = createNormalizeValueFn(conditionalProperties);
 
-      expect(normalizeValue(['one', null, 'three'])).toMatchInlineSnapshot(`
+      expect(normalizeValue(['mobile', null, true])).toMatchInlineSnapshot(`
         Object {
-          "desktop": "three",
-          "mobile": "one",
+          "desktop": true,
+          "mobile": "mobile",
         }
       `);
     });
@@ -560,24 +570,26 @@ describe('sprinkles', () => {
 
     it('should handle conditional nulls', () => {
       const mapValue = createMapValueFn(conditionalProperties);
-      const value = mapValue({ mobile: 1, tablet: 2, desktop: 3 }, (value) =>
-        value === 2 ? null : value,
+      const value = mapValue(
+        { mobile: 1, tablet: false, desktop: 3 },
+        (value) => value || null,
       );
 
       expect(value).toStrictEqual({ mobile: 1, tablet: null, desktop: 3 });
     });
 
     it('should handle undefined', () => {
       const mapValue = createMapValueFn(conditionalProperties);
-      const value = mapValue(123, () => undefined);
+      const value = mapValue(true, () => undefined);
 
       expect(value).toBe(undefined);
     });
 
     it('should handle conditional undefined', () => {
       const mapValue = createMapValueFn(conditionalProperties);
-      const value = mapValue({ mobile: 1, tablet: 2, desktop: 3 }, (value) =>
-        value === 2 ? undefined : value,
+      const value = mapValue(
+        { mobile: 1, tablet: false, desktop: 3 },
+        (value) => value || undefined,
       );
 
       expect(value).toStrictEqual({ mobile: 1, tablet: undefined, desktop: 3 });
@@ -612,15 +624,15 @@ describe('sprinkles', () => {
     it('should handle responsive arrays', () => {
       const mapValue = createMapValueFn(conditionalProperties);
       const value = mapValue(
-        ['one', 'two', 'three'],
+        [false, true, false],
         (value, key) => `${value}_${key}` as const,
       );
 
       expect(value).toMatchInlineSnapshot(`
         Object {
-          "desktop": "three_desktop",
-          "mobile": "one_mobile",
-          "tablet": "two_tablet",
+          "desktop": "false_desktop",
+          "mobile": "false_mobile",
+          "tablet": "true_tablet",
         }
       `);
     });