Factory abstraction for recipes / Atomic recipes

[kasper573]

I'd love to be able to combine the strict conventions of atomic css (Sprinkles) with the flexibility of variants (Recipes). I believe we're very close to be able to do it as well. If we could refactor the internals of the recipes package to allow us to customize how a recipe's style is compiled, it would unlock very powerful composition abilities. Here's some pseudo code to illustrate what I'm imagining:

// cssFramework.ts
import { createRecipeFactory } from "@vanilla-extract/recipes"; // The new imagined API
import { createSprinkles } from "@vanilla-extract/sprinkles";

export const sprinkles = createSprinkles(...); // Arguments omitted for brevity

// Instead of directly importing the `recipe` function from @vanilla-extract/recipes,
// we can now instead create our own `recipe` function, but customize the style compiler.
// For example, to create an atomic recipe function, we pass in the sprinkles factory,
// which tells @vanilla-extract/recipes to use that instead of the built-in css compiling logic.
export const atomicRecipe = createRecipeFactory(sprinkles); 

// button.css.ts
import { atomicRecipe } from "./cssFramework.ts"
export const button = atomicRecipe({
  base: {
    background: "blue-50" // Now restricted to only use atoms, both in runtime and typesafety
  }
});

This approach would only make Recipes more flexible and still be backwards compatible. Sprinkles and Recipes would still be unaware of each other, but Recipes would become flexible enough to be able to compose them together.

Here's how you can recreate the built-in recipe function using this new factory:

import { createRecipeFactory } from "@vanilla-extract/recipes";
import { style } from "@vanilla-extract/css";

export const recipe = createRecipeFactory(style); // `recipe` behaves exactly like today

I created a POC for this factory approach here, where I tested both using sprinkles and style as input for the factory, and it works great so far: https://github.com/ksandin/yas/blob/master/tools/vanilla-extract-recipe-factory/src/index.ts

I could publish this as a new package, but I really think it would be super addition to @vanilla-extract/recipes out of the box. It would also be less brittle if it was integrated in the core package, since my POC demonstrates that building something like this requires assuming a lot of both runtime and type implementation details.

[kasper573]

I have now created a package for this!

https://www.npmjs.com/package/vanilla-extract-recipe-factory