Fix compound variants not applying when default variants get undefined (#704)

Author: mattcompiles

.changeset/quiet-games-explain.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/recipes': patch
+---
+
+Fix compound variants not applying when default variants get passed undefined

packages/recipes/src/createRuntimeFn.ts

@@ -8,9 +8,10 @@ import type {
 const shouldApplyCompound = <Variants extends VariantGroups>(
   compoundCheck: VariantSelection<Variants>,
   selections: VariantSelection<Variants>,
+  defaultVariants: VariantSelection<Variants>,
 ) => {
   for (const key of Object.keys(compoundCheck)) {
-    if (compoundCheck[key] !== selections[key]) {
+    if (compoundCheck[key] !== (selections[key] ?? defaultVariants[key])) {
       return false;
     }
   }
@@ -52,7 +53,9 @@ export const createRuntimeFn =
     }
 
     for (const [compoundCheck, compoundClassName] of config.compoundVariants) {
-      if (shouldApplyCompound(compoundCheck, selections)) {
+      if (
+        shouldApplyCompound(compoundCheck, selections, config.defaultVariants)
+      ) {
         className += ' ' + compoundClassName;
       }
     }

tests/recipes/recipes.test.ts

@@ -45,6 +45,14 @@ describe('recipes', () => {
     );
   });
 
+  it('should return compound variants via defaultVariants, even when undefined is passed', () => {
+    expect(
+      basic({ color: 'red', spaceWithDefault: undefined }),
+    ).toMatchInlineSnapshot(
+      `"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1 recipes_basic_color_red__niwegb5 recipes_basic_compound_0__niwegb8"`,
+    );
+  });
+
   it('should return boolean variants', () => {
     expect(basic({ rounded: true })).toMatchInlineSnapshot(
       `"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1 recipes_basic_rounded_true__niwegb7"`,