Expose variants from recipe (#1044)

Author: mszczepanczyk

.changeset/mighty-carpets-breathe.md

@@ -0,0 +1,5 @@
+---
+"@vanilla-extract/recipes": minor
+---
+
+Add `variants` function for accessing variant names at runtime

packages/recipes/src/createRuntimeFn.ts

@@ -19,11 +19,10 @@ const shouldApplyCompound = <Variants extends VariantGroups>(
   return true;
 };
 
-export const createRuntimeFn =
-  <Variants extends VariantGroups>(
-    config: PatternResult<Variants>,
-  ): RuntimeFn<Variants> =>
-  (options) => {
+export const createRuntimeFn = <Variants extends VariantGroups>(
+  config: PatternResult<Variants>,
+): RuntimeFn<Variants> => {
+  const runtimeFn: RuntimeFn<Variants> = (options) => {
     let className = config.defaultClassName;
 
     const selections: VariantSelection<Variants> = {
@@ -62,3 +61,8 @@ export const createRuntimeFn =
 
     return className;
   };
+
+  runtimeFn.variants = () => Object.keys(config.variantClassNames);
+
+  return runtimeFn;
+};

packages/recipes/src/types.ts

@@ -32,9 +32,9 @@ export type PatternOptions<Variants extends VariantGroups> = {
   compoundVariants?: Array<CompoundVariant<Variants>>;
 };
 
-export type RuntimeFn<Variants extends VariantGroups> = (
+export type RuntimeFn<Variants extends VariantGroups> = ((
   options?: VariantSelection<Variants>,
-) => string;
+) => string) & { variants: () => (keyof Variants)[] };
 
 export type RecipeVariants<RecipeFn extends RuntimeFn<VariantGroups>> =
   Parameters<RecipeFn>[0];

tests/recipes/recipes-type-tests.ts

@@ -38,8 +38,14 @@ type AssertIsString<S> = S extends string ? true : never;
   const recipeStyles = textRecipes({ size: 'small' });
   const recipeShouldReturnString: AssertIsString<typeof recipeStyles> = true;
 
+  const variants: ReturnType<typeof textRecipes.variants> = ['size'];
+  // @ts-expect-error Type '"foo"' is not assignable to type '"size"'.
+  const invalidVariants: ReturnType<typeof textRecipes.variants> = ['foo'];
+
   noop(invalidVariantValue);
   noop(invalidVariantName);
   noop(validTextVariant);
+  noop(variants);
+  noop(invalidVariants);
   noop(recipeShouldReturnString);
 };

tests/recipes/recipes.test.ts

@@ -64,4 +64,15 @@ describe('recipes', () => {
       `"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1"`,
     );
   });
+
+  it('should expose a function returning list of variants', () => {
+    expect(basic.variants()).toMatchInlineSnapshot(`
+      [
+        "spaceWithDefault",
+        "spaceWithoutDefault",
+        "color",
+        "rounded",
+      ]
+    `);
+  });
 });