fix(recipes): applying recipes throws for unknown options

[christoph-fricke]

I recently started to move from class-variance-authority to vanilla-extract with recipes for the additional type safety. So far I am loving it apart from some nit-picks.

I am using both in React components where I find it quite handy to pass the props object to the recipe so it can apply all variants that are provided by the consumer. This works flawlessly with class-variance-authority. However, I noticed that the following code throws a runtime error "TypeError: Cannot read properties of undefined" in vanilla-extract when non-variant properties are applied as well. I would love to avoid having to de-structure and construct a variant options object all the time.

import { text, type TextVariants } from './text.css';

export interface TextProps extends TextVariants, ComponentPropsWithoutRef<"span"> {}

export function Text(props: TextProps) {
  return (
    <span {...props} className={text(props)}>
      {props.children}
    </span>
  );
}

This PR addresses the type error by ignoring unknown options when applying a recipe function. Therefore, recipes no longer throw a runtime error.

[changeset-bot]

🦋 Changeset detected

Latest commit: c39a65e

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	Patch
@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

[kasper573]

Don’t you need to destructure anyway to not pass on variant props to the underlying component, in this case the div?

i also use react and was frustrated by this same thing and realized the leaked variant props to the dom was triggering warnings and sometimes real problems. So i made a library to help create react components derived from recipes: https://www.npmjs.com/package/react-styled-factory

[christoph-fricke]

@kasper573 I noticed that some props appear in the DOM when just spread onto the component, but I haven't seen any warnings, yet. However, I am quite early in the switch, so I might notice them down the line.

Nonetheless, I believe that the recipes function should not throw a runtime error when unknown props are passed in. So I think this PR is still relevant.

[aspirisen]

Looks like I have created a PR with the same fix some time ago #1337