[recipes] Handle option field that doesn't exist in config

[aspirisen]

if you pass object with fields that doesn't exist in the variants (i.e. just pass component props as is) - runtime function will fall with exception.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5d4a9a1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@vanilla-extract/recipes	Minor
@fixtures/recipes	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[askoufis]

While this change makes sense in theory, I'm keen to understand when this would occur/use cases for this. I suppose if you were taking in recipe options at runtime, and were not validating them, or perhaps ignoring a type mismatch for the recipe function? Or I guess if you were using VE in plain JavaScript.

[aspirisen]

@askoufis the types are correct, but the runtime function thinks that all fields in the argument object are variants.
For example you have to use props destructure in your component to use only know recipe fields. It would be much easier to pass props argument as is to recipe runtime function

For example:

// VE file
export type TestStyles = RecipeVariants<typeof test>

export const test = recipe({
    variants: {
        $variant: {
            primary: [],
            'primary-light': [],
            outline: [],

            error: [],
        },

        $round: {
            true: [],
        },

        $size: {
            small: {},
            medium: [],
            large: [],
        },

        // more variants
    },
})

// Component file

export interface ComponentProps extends TestStyles {
    // some more props
}

function Component(props: PropsWithChildren<ComponentProps>) {
    // here you will have runtime error "Cannot read properties of undefined (reading '#<Object>')" because of children field
    // but there are no TS error (what is expected behavior)
    return <div className={test(props)}>{props.children}</div>
}