Composable Recipes

[p7gg]

First of, I found some similar discussions but I don't think any of them were asking for a feature like this.

It would be nice if there was a way to compose recipes, just like you can in @stitches/*, which inspired the recipes API.

Heres a codesandbox:
https://codesandbox.io/p/sandbox/busy-star-et52e6

For example, thats valid stitches;

import { css } from "@stitches/core";

export const focusStyles = css({
  WebkitTapHighlightColor: "transparent",

  "&:focus": {
    outlineOffset: 2,
    outline: `2px solid $$focusRingColor`,
  },

  variants: {
    colorScheme: {
      blue: { $$focusRingColor: "blue" },
      red: { $$focusRingColor: "red" },
    },
  },
});

export const button = css(
  {
    color: "white",
    variants: {
      colorScheme: {
        blue: { backgroundColor: "blue" },
        red: { backgroundColor: "red" },
      },
    },
  },
  focusStyles
);

[rothsandro]

Until this is implemented by VE, here's a custom recipes() function that accepts a list of recipes and merges them at compile time. Not battle-tested but should work (more or less).

// ./recipes.ts
import { recipe } from "@vanilla-extract/recipes";
import { addFunctionSerializer } from "@vanilla-extract/css/functionSerializer";

type RecipeRuntimeFn = ReturnType<typeof recipe>;
type VariantsArg<R> = R extends RecipeRuntimeFn ? Parameters<R>[0] : never;
type RecipeMeta = {
  importPath: string;
  importName: string;
  args: [
    {
      defaultClassName: string;
      variantClassNames: Record<string, Record<string, string>>;
      defaultVariants: Record<string, string>;
      compoundVariants: Array<[Record<string, string>, string]>;
    }
  ];
};

function mergeRecipes(metaList: RecipeMeta[]) {
  const recipes = metaList.map((r) => r.args[0]);

  return {
    importPath: metaList[0].importPath,
    importName: metaList[0].importName,
    args: [
      {
        defaultClassName: recipes
          .map((r) => r.defaultClassName)
          .filter(Boolean)
          .join(" "),
        variantClassNames: recipes.reduce((acc, r) => {
          Object.entries(r.variantClassNames).forEach(
            ([variantName, variants]) => {
              acc[variantName] ??= {};
              Object.entries(variants).forEach(([variantValue, className]) => {
                if (acc[variantName][variantValue]) {
                  acc[variantName][variantValue] += ` ${className}`;
                } else {
                  acc[variantName][variantValue] = className;
                }
              });
            }
          );
          return acc;
        }, {} as any),
        defaultVariants: Object.assign(
          {},
          ...recipes.map((r) => r.defaultVariants)
        ),
        compoundVariants: recipes.flatMap((r) => r.compoundVariants),
      },
    ],
  };
}

export const recipes = <R extends RecipeRuntimeFn[]>(...recipes: R) => {
  type Variants = VariantsArg<R[number]>;
  return addFunctionSerializer(
    (_?: Variants) => "",
    mergeRecipes(
      (recipes as unknown as Array<{ __recipe__: RecipeMeta }>).map(
        (recipe) => recipe.__recipe__
      )
    )
  );
};

// ./component.css.ts
import { recipe } from "@vanilla-extract/recipes";
import { recipes } from "./recipes";

export const recipe1 = recipe({ ... });
export const recipe2 = recipe({ ... });

export const bothRecipes  = recipes(recipe1, recipe2);

[p7gg]

thats actually pretty neat, imma test it out right now. Thanks.

Lets just home something like gets the enough traction so they implement it.