Extract variant types from recipe function

[tim-richter]

Hey everyone,

I was trying to extract the types of the variants key in the recipes function but didn't quite like how it turned out. Is there a better way to pass props type safe into the recipe function? The solution I came up with looks something like this:

const variants = {
  size: {
    small: sprinkles({
      fontSize: 0,
    }),
    medium: sprinkles({
      fontSize: 1,
    }),
    large: sprinkles({
      fontSize: 2,
    }),
  },
};

const styledText = recipe({
  base: sprinkles({
    fontWeight: 'regular',
  }),
  variants,
  defaultVariants: {
    size: 'medium',
  },
});

type Props = VariantSelection<typeof variants>;

const Text = ({ size }: Props) => {
  return (
    <p
      className={styledText({
        size,
      })}
    />
  );
};

This works but ideally I would like to define the variants in the recipe function and then just extract those from the return like this:

const styledText = recipe({
  base: sprinkles({
    fontWeight: 'regular',
  }),
  variants: {
    size: {
      small: sprinkles({
        fontSize: 0,
      }),
      medium: sprinkles({
        fontSize: 1,
      }),
      large: sprinkles({
        fontSize: 2,
      }),
    },
  },
  defaultVariants: {
    size: 'medium',
  },
});

type Props = CoolVariantSelectionExtractor<typeof styledText>;

const Text = ({ size }: Props) => {
  return (
    <p
      className={styledText({
        size,
      })}
    />
  );
};

I didn't find any particular docs about this so if anything like this exists or would be possible to implement let me know :)

Thank you in advance!

[timoclsn]

You can do that with type StyledTextVaraints = Parameters<typeof styledText >[0]; at the moment: https://www.typescriptlang.org/docs/handbook/utility-types.html#parameterstype

See: https://twitter.com/mattcompiles/status/1436286990027083776?s=21

[tim-richter]

@timoclsn Ah yeah makes sense, thank you!

[illepic]

Hello, looks like this is built-in as of at least @vanilla-extract/[email protected]:

import { RecipeVariants } from '@vanilla-extract/recipes';

type StyleVariants = RecipeVariants<typeof myRecipeStyle>;
// type StyleVariants = Parameters<typeof myRecipeStyle>[0]; // same as above