fix(native-recipe): accept slot styles whose slot names are not known in base and compound variants

A slot style recipe accepts variants typed as SlotStyleRecipeVariants,
whose slot names are not known at compile time, but rejected such styles
elsewhere: a `base` typed as SlotStyles<string> failed, since TypeScript
removed the type from both sides of `Base & SlotStyles<string>` before
inferring Base, and the compound variants' check lacked the guard that
the variants' check has, so it rejected every slot.

`Base` is now constrained to slot styles instead of intersected with
them, as it already was in createSlotStyleRecipe and now is in the
themed creator too, and the compound check accepts styles whose slot
names are not known. Arrays, numbers, and undeclared slots are still
rejected.

Where I looked: the base, variant, and compound checks of
createSlotStyleRecipe and the themed creator, createStyleRecipe (a base
typed as NativeStyle is accepted), sva of class-recipe, and the engine
(neither infers its base).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: timphandev

api/native-recipe.d.ts

@@ -1,4 +1,4 @@
-import { ComposableKindRecipe, ComposableKindRecipe as ComposableKindRecipe$1, ComposableKindSlotRecipe, ComposableKindSlotRecipe as ComposableKindSlotRecipe$1, ComposedDefaultedName, ComposedSlot, ComposedSlot as ComposedSlot$1, ComposedVariants, ComposedVariants as ComposedVariants$1, CompoundCondition, DefaultVariants, KindRecipe, KindRecipe as KindRecipe$1, KindVariants, RecipeComposition, RecipeComposition as RecipeComposition$1, RecipeFunction, VariantOption, VariantSelection, VariantsOf as VariantsOf$1 } from "@lynstack/recipe";
+import { ComposableKindRecipe, ComposableKindRecipe as ComposableKindRecipe$1, ComposableKindSlotRecipe, ComposableKindSlotRecipe as ComposableKindSlotRecipe$1, ComposedDefaultedName, ComposedSlot, ComposedVariants, ComposedVariants as ComposedVariants$1, CompoundCondition, DefaultVariants, KindRecipe, KindRecipe as KindRecipe$1, KindVariants, RecipeComposition, RecipeComposition as RecipeComposition$1, RecipeFunction, VariantOption, VariantSelection, VariantsOf as VariantsOf$1 } from "@lynstack/recipe";
 import { ImageStyle, TextStyle, ViewStyle } from "react-native";
 //#region src/types.d.ts
 type NativeStyle = ViewStyle | TextStyle | ImageStyle;
@@ -16,7 +16,7 @@ type SlotStyles<Slot extends string> = Readonly<Partial<Record<Slot, NativeStyle
 type NoUnknownSlotStyles<Styles, Slot extends string, Inherited extends string = never> = string extends keyof Styles ? unknown : { readonly [Name in keyof Styles]: Name extends Slot ? NoUnknownProperties<NonNullable<Styles[Name]>> : Name extends Inherited ? NoUnknownProperties<NonNullable<Styles[Name]>> : never; };
 type NoUnknownVariantStyles<Variants, Slot extends string, Inherited extends string = never> = { readonly [Name in keyof Variants]: { readonly [Option in keyof Variants[Name]]: NoUnknownSlotStyles<Variants[Name][Option], Slot, Inherited>; }; };
 type InheritedSlot<Composed extends readonly ComposableKindSlotRecipe$1<NativeStyle>[]> = NonNullable<Composed[number]["~composition"]>["slots"][number];
-type NoUnknownCompoundStyles<Styles, Slot extends string, Inherited extends string = never> = Readonly<Partial<Record<Exclude<Exclude<KeyOfEach<Styles>, Slot>, Inherited>, never>>> & { readonly [Name in Slot | Inherited]?: NoUnknownProperties<DeclaredStyle$1<Styles, Name>>; };
+type NoUnknownCompoundStyles<Styles, Slot extends string, Inherited extends string = never> = string extends KeyOfEach<Styles> ? SlotStyles<string> : Readonly<Partial<Record<Exclude<Exclude<KeyOfEach<Styles>, Slot>, Inherited>, never>>> & { readonly [Name in Slot | Inherited]?: NoUnknownProperties<DeclaredStyle$1<Styles, Name>>; };
 type DeclaredStyle$1<Styles, Slot> = Styles extends unknown ? Slot extends keyof Styles ? Exclude<Styles[Slot], undefined> : never : never;
 type DeclaredSlotStyles<Variants, Base, Compounds, Composed> = Base | OptionValue<Variants> | CompoundStyles<Compounds> | ComposedStyle<Composed>;
 type CompoundStyles<Compounds> = Compounds extends readonly (infer Compound)[] ? Compound extends {
@@ -37,7 +37,7 @@ interface SlotStyleCompoundVariant<Variants, Styles = SlotStyles<string>> {
 interface SlotStyleRecipeConfig<Slot extends string, Variants, Base, Compounds, DefaultedName extends keyof ComposedVariants$1<Composed, Variants>, Composed extends readonly ComposableKindSlotRecipe$1<NativeStyle>[] = readonly []> {
   readonly composes?: Composed | undefined;
   readonly slots: readonly Slot[];
-  readonly base?: (Base & SlotStyles<string> & NoUnknownSlotStyles<Base, NoInfer<Slot>, InheritedSlot<Composed>>) | undefined;
+  readonly base?: (Base & NoUnknownSlotStyles<Base, NoInfer<Slot>, InheritedSlot<Composed>>) | undefined;
   readonly variants: Variants & SlotStyleRecipeVariants & NoUnknownVariantStyles<Variants, NoInfer<Slot>, InheritedSlot<Composed>>;
   readonly compoundVariants?: (Compounds & readonly SlotStyleCompoundVariant<NoInfer<ComposedVariants$1<Composed, Variants>>, NoUnknownCompoundStyles<CompoundStyles<Compounds>, NoInfer<Slot>, InheritedSlot<Composed>>>[]) | undefined;
   readonly defaultVariants?: DefaultVariants<ComposedVariants$1<Composed, Variants>, DefaultedName> | undefined;
@@ -104,7 +104,7 @@ type ThemedRecipe<Theme, Props, Result, Composition = unknown> = ThemedRecipeFun
 type ComposedThemedRecipe<Theme, Variants, DefaultedName extends keyof Variants, Result, Slots> = ThemedRecipe<Theme, VariantSelection<Variants, DefaultedName>, Result, RecipeComposition$1<Variants, DefaultedName, NativeStyle, Slots>>;
 interface ThemedRecipeCreators<Theme extends object> {
   readonly createStyleRecipe: <const Variants, const Base = never, const Compounds = readonly [], const DefaultedName extends keyof ComposedVariants$1<Composed, Variants> = never, const Composed extends readonly ComposableKindRecipe$1<NativeStyle>[] = readonly []>(config: (theme: Theme) => StyleRecipeConfig<Variants, Base, Compounds, DefaultedName, Composed>) => ComposedThemedRecipe<Theme, ComposedVariants$1<Composed, Variants>, NoInfer<DefaultedName> | InheritedDefaultedName<Composed, Variants>, RecipeStyle<Variants, Base, Compounds, Composed>, undefined>;
-  readonly createSlotStyleRecipe: <const Slot extends string, const Variants, const Base = never, const Compounds = readonly [], const DefaultedName extends keyof ComposedVariants$1<Composed, Variants> = never, const Composed extends readonly ComposableKindSlotRecipe$1<NativeStyle>[] = readonly []>(config: (theme: Theme) => SlotStyleRecipeConfig<Slot, Variants, Base, Compounds, DefaultedName, Composed>) => ComposedThemedRecipe<Theme, ComposedVariants$1<Composed, Variants>, NoInfer<DefaultedName> | InheritedDefaultedName<Composed, Variants>, RecipeSlotStyles<Slot | Exclude<Composed[number]["~composition"], undefined>["slots"][number], Variants, Base, Compounds, Composed>, readonly (Slot | Exclude<Composed[number]["~composition"], undefined>["slots"][number])[]>;
+  readonly createSlotStyleRecipe: <const Slot extends string, const Variants, const Base extends SlotStyles<string> = never, const Compounds = readonly [], const DefaultedName extends keyof ComposedVariants$1<Composed, Variants> = never, const Composed extends readonly ComposableKindSlotRecipe$1<NativeStyle>[] = readonly []>(config: (theme: Theme) => SlotStyleRecipeConfig<Slot, Variants, Base, Compounds, DefaultedName, Composed>) => ComposedThemedRecipe<Theme, ComposedVariants$1<Composed, Variants>, NoInfer<DefaultedName> | InheritedDefaultedName<Composed, Variants>, RecipeSlotStyles<Slot | Exclude<Composed[number]["~composition"], undefined>["slots"][number], Variants, Base, Compounds, Composed>, readonly (Slot | Exclude<Composed[number]["~composition"], undefined>["slots"][number])[]>;
 }
 declare function createThemedRecipes<Theme extends object>(): ThemedRecipeCreators<Theme>;
 //#endregion

packages/native-recipe/CHANGELOG.md

@@ -7,6 +7,11 @@ published on npm and as a
 
 ## Unreleased
 
+- A slot style recipe, plain or themed, accepts styles whose slot names
+  are not known at compile time, such as a `base` typed
+  `SlotStyles<string>`, in `base` and in compound variants, as it already
+  did in its variants. They were rejected as "not assignable to type
+  'undefined'".
 - A function generic over the slot recipe that a slot style recipe
   composes, plain or themed, can name its own slots.
 - The recipe creators warn, once, with `console.warn`, about a default, a

packages/native-recipe/src/slot-style-recipe.ts

@@ -82,9 +82,7 @@ interface SlotStyleRecipeConfig<
   readonly slots: readonly Slot[];
   /** The style of each slot whatever the variants. */
   readonly base?:
-    | (Base &
-        SlotStyles<string> &
-        NoUnknownSlotStyles<Base, NoInfer<Slot>, InheritedSlot<Composed>>)
+    | (Base & NoUnknownSlotStyles<Base, NoInfer<Slot>, InheritedSlot<Composed>>)
     | undefined;
   /** For each variant name, the style of each slot for each of its options. */
   readonly variants: Variants &

packages/native-recipe/src/themed-recipes.ts

@@ -10,6 +10,7 @@ import type {
   InheritedDefaultedName,
   NativeStyle,
   RecipeSlotStyles,
+  SlotStyles,
   VariantSelection,
 } from "./types.js";
 import type {
@@ -145,7 +146,7 @@ interface ThemedRecipeCreators<Theme extends object> {
   readonly createSlotStyleRecipe: <
     const Slot extends string,
     const Variants,
-    const Base = never,
+    const Base extends SlotStyles<string> = never,
     const Compounds = readonly [],
     const DefaultedName extends keyof ComposedVariants<Composed, Variants> =
       never,

packages/native-recipe/src/types.ts

@@ -123,19 +123,25 @@ type InheritedSlot<
 
 /**
  * Rejects the slots and style properties of the compound variants' styles,
- * given as a union, that the slot recipe does not have.
+ * given as a union, that the slot recipe does not have, unless the slot
+ * names of the styles are not known at compile time.
  */
 type NoUnknownCompoundStyles<
   Styles,
   Slot extends string,
   Inherited extends string = never,
-> = Readonly<
-  Partial<Record<Exclude<Exclude<KeyOfEach<Styles>, Slot>, Inherited>, never>>
-> & {
-  readonly [Name in Slot | Inherited]?: NoUnknownProperties<
-    DeclaredStyle<Styles, Name>
-  >;
-};
+> =
+  string extends KeyOfEach<Styles>
+    ? SlotStyles<string>
+    : Readonly<
+        Partial<
+          Record<Exclude<Exclude<KeyOfEach<Styles>, Slot>, Inherited>, never>
+        >
+      > & {
+        readonly [Name in Slot | Inherited]?: NoUnknownProperties<
+          DeclaredStyle<Styles, Name>
+        >;
+      };
 
 /** Every style that a slot recipe's config declares for `Slot`, as a union. */
 type DeclaredStyle<Styles, Slot> = Styles extends unknown

packages/native-recipe/src/wide-slot-styles.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+
+import type { SlotStyles } from "./types.js";
+import { createSlotStyleRecipe } from "./slot-style-recipe.js";
+import { createThemedRecipes } from "./themed-recipes.js";
+
+const wide: SlotStyles<string> = { root: { gap: 4 } };
+
+describe("a slot style recipe given styles whose slot names are not known", () => {
+  it("accepts them as its base", () => {
+    const recipe = createSlotStyleRecipe({
+      slots: ["root", "label"],
+      base: wide,
+      variants: {},
+    });
+
+    expect(recipe()).toStrictEqual({ root: { gap: 4 }, label: {} });
+  });
+
+  it("accepts them in a compound variant", () => {
+    const recipe = createSlotStyleRecipe({
+      slots: ["root", "label"],
+      variants: { size: { sm: {} } },
+      compoundVariants: [{ variants: { size: "sm" }, styles: wide }],
+    });
+
+    expect(recipe({ size: "sm" })).toStrictEqual({
+      root: { gap: 4 },
+      label: {},
+    });
+  });
+
+  it("accepts them in a themed recipe", () => {
+    const themed = createThemedRecipes<{ readonly gap: number }>();
+    const recipe = themed.createSlotStyleRecipe(() => ({
+      slots: ["root", "label"],
+      base: wide,
+      variants: { size: { sm: {} } },
+      compoundVariants: [{ variants: { size: "sm" }, styles: wide }],
+    }));
+
+    expect(recipe({ gap: 4 }, { size: "sm" })).toStrictEqual({
+      root: { gap: 4 },
+      label: {},
+    });
+  });
+});