vanilla-extract-recipe-factory
v0.0.11
Published
Create your own [recipe function](https://vanilla-extract.style/documentation/packages/recipes/), but control how styles are compiled.
Downloads
4
Readme
vanilla-extract-recipe-factory
Create your own recipe function, but control how styles are compiled.
// 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
},
},
},
});