Handle undefined in recipes, improve recipe debug IDs (#380)

Author: mattcompiles

.changeset/early-baboons-serve.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/recipes': patch
+---
+
+Add variant group names to debug IDs

.changeset/rude-actors-obey.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/recipes': patch
+---
+
+Return default variants when selection is `undefined`

packages/recipes/src/createRuntimeFn.ts

@@ -25,13 +25,13 @@ export const createRuntimeFn =
   (options) => {
     let className = config.defaultClassName;
 
-    // @ts-expect-error
     const selections: VariantSelection<Variants> = {
       ...config.defaultVariants,
       ...options,
     };
     for (const variantName in selections) {
-      const variantSelection = selections[variantName];
+      const variantSelection =
+        selections[variantName] ?? config.defaultVariants[variantName];
 
       if (variantSelection) {
         className += ` ${

packages/recipes/src/index.ts

@@ -12,12 +12,12 @@ import type {
 
 function mapValues<Input extends Record<string, any>, OutputValue>(
   input: Input,
-  fn: (value: Input[keyof Input]) => OutputValue,
+  fn: (value: Input[keyof Input], key: keyof Input) => OutputValue,
 ): Record<keyof Input, OutputValue> {
   const result: any = {};
 
   for (const key in input) {
-    result[key] = fn(input[key]);
+    result[key] = fn(input[key], key);
   }
 
   return result;
@@ -29,7 +29,7 @@ export function recipe<Variants extends VariantGroups>(
 ): RuntimeFn<Variants> {
   const {
     variants = {},
-    defaultVariants,
+    defaultVariants = {},
     compoundVariants = [],
     base = '',
   } = options;
@@ -39,12 +39,12 @@ export function recipe<Variants extends VariantGroups>(
 
   // @ts-expect-error
   const variantClassNames: PatternResult<Variants>['variantClassNames'] =
-    mapValues(variants, (variantGroup) =>
+    mapValues(variants, (variantGroup, variantGroupName) =>
       styleVariants(
         variantGroup,
         (styleRule) =>
           typeof styleRule === 'string' ? [styleRule] : styleRule,
-        debugId,
+        debugId ? `${debugId}_${variantGroupName}` : variantGroupName,
       ),
     );
 

packages/recipes/src/types.ts

@@ -16,7 +16,7 @@ export type PatternResult<Variants extends VariantGroups> = {
   variantClassNames: {
     [P in keyof Variants]: { [P in keyof Variants[keyof Variants]]: string };
   };
-  defaultVariants?: VariantSelection<Variants>;
+  defaultVariants: VariantSelection<Variants>;
   compoundVariants: Array<[VariantSelection<Variants>, string]>;
 };
 

tests/recipes/recipes.css.ts

@@ -0,0 +1,31 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+export const basic = recipe({
+  base: {},
+
+  variants: {
+    spaceWithDefault: {
+      small: {},
+      large: {},
+    },
+    spaceWithoutDefault: {
+      small: {},
+      large: {},
+    },
+    color: {
+      red: {},
+      blue: {},
+    },
+  },
+
+  defaultVariants: {
+    spaceWithDefault: 'small',
+  },
+
+  compoundVariants: [
+    {
+      variants: { color: 'red', spaceWithDefault: 'small' },
+      style: {},
+    },
+  ],
+});

tests/recipes/recipes.test.ts

@@ -0,0 +1,47 @@
+import { basic } from './recipes.css';
+
+describe('recipes', () => {
+  it('should return default variants for no options', () => {
+    expect(basic()).toMatchInlineSnapshot(
+      `"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1"`,
+    );
+  });
+
+  it('should return default variants for empty options', () => {
+    expect(basic({})).toMatchInlineSnapshot(
+      `"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1"`,
+    );
+  });
+
+  it('should return default variants for undefined options', () => {
+    expect(basic({ spaceWithDefault: undefined })).toMatchInlineSnapshot(
+      `"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1"`,
+    );
+  });
+
+  it('should return requested variants', () => {
+    expect(
+      basic({
+        spaceWithDefault: 'large',
+        spaceWithoutDefault: 'small',
+        color: 'blue',
+      }),
+    ).toMatchInlineSnapshot(
+      `"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_large__niwegb2 recipes_basic_spaceWithoutDefault_small__niwegb3 recipes_basic_color_blue__niwegb6"`,
+    );
+  });
+
+  it('should return requested compound variants', () => {
+    expect(
+      basic({ spaceWithDefault: 'small', color: 'red' }),
+    ).toMatchInlineSnapshot(
+      `"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1 recipes_basic_color_red__niwegb5 recipes_basic_compound_0__niwegb7"`,
+    );
+  });
+
+  it('should return compound variants via defaultVariants', () => {
+    expect(basic({ color: 'red' })).toMatchInlineSnapshot(
+      `"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1 recipes_basic_color_red__niwegb5 recipes_basic_compound_0__niwegb7"`,
+    );
+  });
+});