Recipes: ignore unknown config options

[a-type]

I was hoping to create a simple HOC to quickly whip up components with applied VE classes, including automatically adding variant config to the props. Something like this:

const heading = recipe({
  base: { margin: 0 },
  variants: {
    gutter: { true: { marginBottom: 16 } }
  }
});

// ...

export const H1 = withClassName('h1', heading);

// ...

<H1 gutter>Hello world</H1>

import { ComponentType, ElementType, forwardRef } from 'react';
import { clsx } from 'clsx';
import {
	RecipeVariants,
} from 'node_modules/@vanilla-extract/recipes';
import { RuntimeFn } from 'node_modules/@vanilla-extract/recipes/dist/declarations/src/types.js';

type VariantProps<V extends string | RuntimeFn<any>> = V extends RuntimeFn<any>
	? RecipeVariants<V>
	: {};

export function withClassName<
	T extends ComponentType<any> | ElementType<any>,
	V extends string | RuntimeFn<any>,
>(
	Component: T,
	cs: V,
): ComponentType<React.ComponentProps<T> & VariantProps<V>> {
	const WithClassName = forwardRef<any, any>((props, ref) => {
		const { className, ...rest } = props;
		const c = typeof cs === 'function' ? cs(props) : cs;
		return <Component {...rest} ref={ref} className={clsx(c, className)} />;
	});
	return WithClassName as any;
}

The functionality and TypeScript typings seem to work well. However, if I just pass props to a recipe class generator, it will crash on unknown props, like children:

var createRuntimeFn = config => options => {
  var className = config.defaultClassName;

  var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);

  for (var variantName in selections) {
    var _selections$variantNa;

    var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];

    if (variantSelection != null) {
      var selection = variantSelection;

      if (typeof selection === 'boolean') {
        // @ts-expect-error
        selection = selection === true ? 'true' : 'false';
      }

      var selectionClassName = // @ts-expect-error
      // 🚩🚩🚩 Cannot read property "X" of undefined
      config.variantClassNames[variantName][selection];

      if (selectionClassName) {
        className += ' ' + selectionClassName;
      }
    }
  }

  for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
    if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
      className += ' ' + compoundClassName;
    }
  }

  return className;
};

(from production source)

Could this function instead use config.variantClassNames[variantName]?.[selection]? I know the actual TypeScript typings of a recipe function would normally guarantee this as unnecessary, but it would be convenient for my purposes above.

Alternatively, if VE could make the variant names easily runtime introspectable (e.g. heading.variantNames), I could filter the props by those keys before passing them in.

[a-type]

On further reflection I'd actually love just the last bit - runtime introspectable variant names. That way I could also remove the names from the rest of the props to avoid passing them down to React's primitives as unrecognized attributes.

[mszczepanczyk]

It's now possible with #1044