vanilla-extract-recipe-factory

Create your own recipe function, but control how styles are compiled.

Try it on StackBlitz

1// design-tokens.ts
2import { createRecipeFactory } from "vanilla-extract-recipe-factory";
3
4export const recipe = createRecipeFactory(yourStyleCompiler);

1// my-style.css.ts
2import { recipe } from "./design-tokens";
3
4export const yourRecipe = recipe({
5  // Accepts the same interface as regular recipes,
6  // but with the style inputs supported by your compiler
7});

Designed (but not limited) to be used with @vanilla-extract/sprinkles or vanilla-extract-constrained:

1// design-tokens.ts
2import { createRecipeFactory } from "vanilla-extract-recipe-factory";
3import { sprinkles } from "./sprinkles.css.ts";
4
5export const recipe = createRecipeFactory(sprinkles);

1// my-style.css.ts
2import { recipe } from "./design-tokens";
3export const yourRecipe = recipe({
4  base: {
5    // sprinkles
6  },
7  variants: {
8    foo: {
9      bar: {
10        // sprinkles
11      },
12    },
13  },
14});