[Feature] Simple way to require a variant

[kylemh]

Is your feature request related to a problem? Please describe.
If I use a component with variants, I may not wish to provide a default value. In that instance, the variant prop should be required in TypeScript environments.

Describe the solution you'd like
If a stitches item uses variants and is missing defaultVariants, all variant keys should be required props.

[peduarte]

Hey, interesting.. Im gonna convert to a discussion, let's see where this goes

[sakarisson]

I think this is a great idea. Coming from Styled Component, the idea of required variants would be invaluable to me. The only potential downside is that it could be backwards breaking.

[kylemh]

Alternatively, this idea could instead be adding a new field requiredVariants. This is a non-breaking change which provides the same power to users of Stitches.

[gabro]

See also a very similar discussion here vanilla-extract-css/vanilla-extract#468 (comment)

[prichodko]

I was surprised it is not supported, to be honest. I would expect, that when the user does not define defaultVariants, the variant would become required.

[dzek69]

Hey, I'm here just for a "me too" story. I need that, I'm converting my library to stitches and previously I had manually created variants that had no default value - it was required.

With Stitches variants became optional.

Currently I'm doing this as a workaround:

const StyledMessage = styled("div", {
  variants: {
    type: {
      success: {}, // styles goes here
      error: {},
    }
  }
}); 

type StitchesProps = ComponentProps<typeof StyledMessage>;

interface Props extends StitchesProps {
    type: NonNullable<StitchesProps["type"]>;
}

export const Message = StyledMessage as unknown as StyledComponent<"div", Props, Media, CSS>;

I had to import StyledComponent like that:

import type { StyledComponent } from "@stitches/react/types/styled-component";

and of course I had exported Media and CSS types as well.

Today I'm trying to simplify my life and in my main stitches file I created a little helper:

type OverwriteProps<
    // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-use-before-define
    T extends StyledComponent<Type, OldProps, Media, TheCSS>,
    Props, Type = any, OldProps = any, Media = any, TheCSS = any,
> = StyledComponent<Type, Props, Media, TheCSS>;

and I use it like that:

const Message = StyledMessage as unknown as OverwriteProps<typeof StyledMessage, Props>;

I don't have to repeat myself, deal with Media/CSS types ... but this is still super ugly