Sprinkles: Optionally return RequiredConditionalValue from utils (#158)

Author: markdalgleish

.changeset/sweet-crews-kiss.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/sprinkles': patch
+---
+
+Ensure `normalizeConditionalValue` and `mapConditionalValue` return `RequiredConditionalValue` types when a `RequiredConditionalValue` type is provided

packages/sprinkles/src/createUtils.ts

@@ -78,9 +78,20 @@ export type RequiredConditionalValue<
 
 export function createNormalizeValueFn<AtomicStyles extends Conditions<string>>(
   atomicStyles: AtomicStyles,
-): <Value extends string | number>(
-  value: ConditionalValue<AtomicStyles, Value>,
-) => Partial<Record<ExtractConditionNames<AtomicStyles>, Value>> {
+): <Value extends ConditionalValue<AtomicStyles, string | number>>(
+  value: Value,
+) => Value extends RequiredConditionalValue<AtomicStyles, infer PrimitiveValue>
+  ? RequiredConditionalObject<
+      Exclude<ExtractDefaultCondition<AtomicStyles>, false>,
+      Exclude<
+        ExtractConditionNames<AtomicStyles>,
+        Exclude<ExtractDefaultCondition<AtomicStyles>, false>
+      >,
+      PrimitiveValue
+    >
+  : Value extends ConditionalValue<AtomicStyles, infer PrimitiveValue>
+  ? Partial<Record<ExtractConditionNames<AtomicStyles>, PrimitiveValue>>
+  : never {
   const { conditions } = atomicStyles;
 
   if (!conditions) {
@@ -135,6 +146,15 @@ export function createMapValueFn<AtomicStyles extends Conditions<string>>(
   ) => OutputValue,
 ) => Value extends string | number
   ? OutputValue
+  : Value extends RequiredConditionalValue<AtomicStyles, string | number>
+  ? RequiredConditionalObject<
+      Exclude<ExtractDefaultCondition<AtomicStyles>, false>,
+      Exclude<
+        ExtractConditionNames<AtomicStyles>,
+        Exclude<ExtractDefaultCondition<AtomicStyles>, false>
+      >,
+      OutputValue
+    >
   : Partial<Record<ExtractConditionNames<AtomicStyles>, OutputValue>> {
   const { conditions } = atomicStyles;
 

tests/sprinkles/spinkles-type-tests.ts

@@ -20,6 +20,12 @@ import {
 // @ts-expect-error Unused args
 const noop = (...args: Array<any>) => {};
 
+// @ts-expect-error Unused args
+const isString = (arg: string) => {};
+
+// @ts-expect-error Unused args
+const isNumber = (arg: number) => {};
+
 () => {
   const atoms = createAtomsFn(
     atomicWithShorthandStyles,
@@ -128,6 +134,18 @@ const noop = (...args: Array<any>) => {};
   // @ts-expect-error - Too many responsive array options
   normalizeValue(['one', 'two', 'three', 'four']);
 
+  // Valid value - default condition is provided
+  isString(normalizeValue({ mobile: 'hello' }).mobile);
+
+  // Valid value - default condition is provided
+  isString(normalizeValue({ mobile: 'hello', tablet: 'world' }).mobile);
+
+  // @ts-expect-error - condition is potentially undefined when not default condition
+  isString(normalizeValue({ tablet: 'hello' }).tablet);
+
+  // @ts-expect-error - condition is potentially undefined when not default condition
+  isString(normalizeValue({ mobile: 'hello', tablet: 'world' }).tablet);
+
   normalizeValue({
     // @ts-expect-error - Incorrect conditional keys
     mobille: '',
@@ -139,6 +157,27 @@ const noop = (...args: Array<any>) => {};
   // @ts-expect-error - Numbers shouldn't map to objects
   mapValue(3, () => 4).mobile;
 
+  isString(mapValue({ mobile: 123 }, () => 'abc').mobile);
+  isNumber(mapValue({ mobile: 'abc' }, () => 123).mobile);
+
+  // @ts-expect-error - Mobile should be potentially undefined since it wasn't provided
+  isString(mapValue({ tablet: 123 }, () => 'abc').mobile);
+
+  // @ts-expect-error - Tablet should be potentially undefined since it's not the default condition
+  isString(mapValue({ tablet: 123 }, () => 'abc').tablet);
+
+  // @ts-expect-error - Tablet should be potentially undefined since it's not the default condition
+  isString(mapValue({ mobile: 123, tablet: 456 }, () => 'abc').tablet);
+
+  // @ts-expect-error - Mobile should be potentially undefined since it wasn't provided
+  isNumber(mapValue({ tablet: 'abc' }, () => 123).mobile);
+
+  // @ts-expect-error - Tablet should be potentially undefined since it's not the default condition
+  isNumber(mapValue({ tablet: 'abc' }, () => 123).tablet);
+
+  // @ts-expect-error - Tablet should be potentially undefined since it's not the default condition
+  isNumber(mapValue({ mobile: 'abc', tablet: 'def' }, () => 123).tablet);
+
   const mapValueWithoutDefaultCondition = createMapValueFn(
     conditionalStylesWithoutDefaultCondition,
   );
@@ -149,6 +188,9 @@ const noop = (...args: Array<any>) => {};
   // @ts-expect-error - Should force conditional value as no default condition
   normalizeValueWithoutDefaultCondition('test');
 
+  // @ts-expect-error - Should potentially be undefined
+  isString(normalizeValueWithoutDefaultCondition({ active: 'yo' }).active);
+
   // @ts-expect-error - Should force conditional value as no default condition
   mapValueWithoutDefaultCondition('test');