[Feature Request] Allow arbitrary variants for the recipe api

[joseDaKing]

Allow arbitrary variants for the recipe API. This can only work if an object is returned, the object will have the className prop and also the style prop, the style prop will contain the variables that are set dynamically

import { assignVars, createVar, CSSProperties } from "@vanilla-extract/css";

import { recipe } from "@vanilla-extract/recipes";



const marginVars = {
    marginLeft: createVar("marginLeft"),
    marginRight: createVar("marginRight"),
    marginTop: createVar("marginTop"),
    marginBottom: createVar("marginBottom"),
    marginInlineStart: createVar("marginInlineStart"),
    marginInlineEnd: createVar("marginInlineEnd"),
    marginBlockStart: createVar("marginBlockStart"),
    marginBlockEnd: createVar("marginBlockEnd"),
}

recipe({
    base: {
        vars: assignVars(marginVars, {
            marginLeft: "0px",
            marginRight: "0px",
            marginTop: "0px",
            marginBottom: "0px",
            marginInlineStart: "0px",
            marginInlineEnd: "0px",
            marginBlockStart: "0px",
            marginBlockEnd: "0px",
        }),
        marginLeft: marginVars.marginLeft,
        marginRight: marginVars.marginRight,
        marginTop: marginVars.marginTop,
        marginBottom: marginVars.marginBottom,
        marginInlineStart: marginVars.marginInlineStart,
        marginInlineEnd: marginVars.marginInlineEnd,
        marginBlockStart: marginVars.marginBlockStart,
        marginBlockEnd: marginVars.marginBlockEnd,
    },
    variants: {
        margin: (value: CSSProperties["marginLeft"]) => ({
            vars: {
                [marginVars.marginLeft]: value,
                [marginVars.marginRight]: value,
                [marginVars.marginTop]: value,
                [marginVars.marginBottom]: value
            }
        }),
        marginY: (value: CSSProperties["marginLeft"]) => ({
            vars: {
                [marginVars.marginTop]: value,
                [marginVars.marginBottom]: value
            }
        }),
        marginX: (value: CSSProperties["marginLeft"]) => ({
            vars: {
                [marginVars.marginLeft]: value,
                [marginVars.marginRight]: value
            }
        }),
        marginLeft: (value: CSSProperties["marginLeft"]) => ({
            vars: {
                [marginVars.marginLeft]: value
            }
        }),
        marginRight: (value: CSSProperties["marginRight"]) => ({
            vars: {
                [marginVars.marginRight]: value
            }
        }),
        marginTop: (value: CSSProperties["marginTop"]) => ({
            vars: {
                [marginVars.marginTop]: value
            }
        }),
        marginBottom: (value: CSSProperties["marginBottom"]) => ({
            vars: {
                [marginVars.marginBottom]: value
            }
        }),
        marginInlineStart: (value: CSSProperties["marginInlineStart"]) => ({
            vars: {
                [marginVars.marginInlineStart]: value
            }
        }),
        marginInlineEnd: (value: CSSProperties["marginInlineEnd"]) => ({
            vars: {
                [marginVars.marginInlineEnd]: value
            }
        }),
        marginBlockStart: (value: CSSProperties["marginBlockStart"]) => ({
            vars: {
                [marginVars.marginBlockStart]: value
            }
        }),
        marginBlockEnd: (value: CSSProperties["marginBlockEnd"]) => ({
            vars: {
                [marginVars.marginBlockEnd]: value
            }
        }),
    }
});

[graup]

Seems related to #550

Since this only works by changing the return type of recipe, we'd probably need a new API, like dynamicRecipe?