vanilla-extract-recipe-factory

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

Try it on StackBlitz

// design-tokens.ts
import { createRecipeFactory } from "vanilla-extract-recipe-factory";

export const recipe = createRecipeFactory(yourStyleCompiler);

// my-style.css.ts
import { recipe } from "./design-tokens";

export const yourRecipe = recipe({
  // Accepts the same interface as regular recipes,
  // but with the style inputs supported by your compiler
});

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

// design-tokens.ts
import { createRecipeFactory } from "vanilla-extract-recipe-factory";
import { sprinkles } from "./sprinkles.css.ts";

export const recipe = createRecipeFactory(sprinkles);

// my-style.css.ts
import { recipe } from "./design-tokens";
export const yourRecipe = recipe({
  base: {
    // sprinkles
  },
  variants: {
    foo: {
      bar: {
        // sprinkles
      },
    },
  },
});