Type hinting for default variants in composed component.

[VaibhavAcharya]

I have a TextPrimitive which I use to create all other text components.
It looks like this ↓

export const TextPrimitive = css({
  textRendering: "optimizeSpeed",

  variants: {
    font: {
      heading: {
        fontFamily: "$heading",
      },
      body: {
        fontFamily: "$body",
      },
      code: {
        fontFamily: "$code",
      }
    },
    // more variants...
  }
});

Now I create new text components by using this primitive & setting default variants for it.
Like this ↓

export const Paragraph = styled("p", TextPrimitive, {
  defaultVariants: {
    font: "body",
    weight: "medium",
    // etc...
  }
});

This is indeed working as expected but I am not getting any type hinting in the defaultVariants of Paragraph like I get in TextPrimitive.

Am I doing something wrong?

[peduarte]

Yes, we havent added that in.

We ran into some TypeScript limitations there. The composition is quite deep, and TS doesn't know what to do.

We will keep trying