Recipe's runtime functions do not accept `undefined` as valid values for variants at the type level (`exactOptionalPropertyTypes`)

[Dominik Russo]

Describe the bug

With TypeScript's exactOptionalPropertyTypes enabled, recipe's runtime functions do not accept undefined as valid values for variants at the type level.

Reproduction

• Add "exactOptionalPropertyTypes": true to compilerOptions in tsconfig.json.
• Copy the code below into a typescript file.
• Observe the error in your editor or run pnpm lint:tsc.

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

const r = recipe({
	variants: {
		color: {
			neutral: { background: "whitesmoke" },
		},
	},
});

const color: "neutral" | undefined = undefined as "neutral" | undefined;

r({ color });

Without exactOptionalPropertyTypes r's type is
(options?: { color?: "neutral" | undefined; } | undefined) => string.
With it enabled the type changes to
(options?: { color?: "neutral"; } | undefined) => string,
therefore the example above doesn't satisfy the type checker.

tests/recipes/test.ts:13:3 - error TS2379: Argument of type '{ color: "neutral" | undefined; }' is not assignable to parameter of type '{ color?: "neutral"; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Types of property 'color' are incompatible.
    Type '"neutral" | undefined' is not assignable to type '"neutral"'.
      Type 'undefined' is not assignable to type '"neutral"'.

r({ color });

System Info

I'm using typescript 5.5.3, though the problem should affect all typescript versions since 4.4.0.

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[Dominik Russo]

Fixed in #1443