Typescript error when extending from another base component

[junagao]

Bug report

Describe the bug

I have a component that extends from a base component, example:

const BaseText = styled("div", {
  fontSize: "$1",
  variants: {
    variant: {
      blueberry: {
        color: "$purple"
      }
    }
  }
});

const Text = styled(BaseText, {
  variants: {
    variant: {
      tomato: {
        color: "$tomato"
      }
    }
  }
});

<Text variant="tomato">tomato</Text> // ok
<Text variant="blueberry">blueberry</Text> // typescript error

But when using the Text component with the variant in the BaseText, it returns the following Typescript error:
No overload matches this call.

Shouldn't variants from the base component be inherited? It seems to be a Typescript error because it gets rendered correctly.

To Reproduce

1. Go to https://codesandbox.io/s/crazy-mcnulty-kjjri
2. Hover over variant in `blueberry
3. See error

Expected behavior

Don't display any Typescript error.

System information

• Version of Stitches: 1.2.5

Additional context

One workaround that made the error go away was adding an empty variant with the same name of the base component into the composed component:

const Text = styled(BaseText, {
  variants: {
    variant: {
      blueberry: {}, // <----- variant from base component but empty
      tomato: {
        color: "$tomato"
      }
    }
  }
});

Is there another solution without having to replicate all the base variants like so?

[peduarte]

Hmm. This looks like a regression. Thanks for raising it!

[hadihallak]

This is a duplicate of #749 which is now fixed under a canary release.
could you please upgrade to the latest canary1.2.7-0 and test again?

[junagao]

Hi @hadihallak, just tested it with the 1.2.7-0 and also 1.2.7 version but still not working. Check out the same codesandbox at: https://codesandbox.io/s/crazy-mcnulty-kjjri