stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
https://stitches.dev
MIT License
7.73k stars 249 forks source link

Typescript error when sharing styles across components that have variant attributes #841

Open MichaelDM opened 2 years ago

MichaelDM commented 2 years ago

Bug report

Describe the bug

I am creating a variable called sharedTypo using the css function, to share styles across components. It has variant called variant with a value of h1. I am following this part of the documentation: https://stitches.dev/docs/typescript#type-a-css-object

const sharedTypo = css({
  variants: {
    variant: {
      h1: {
        fontSize: "30px"
      }
    }
  }
});

When I apply my sharedTypo to a styled component, like const Text = styled("p", sharedTypo, {..., my styled component has a Typescript error saying that it does not recognize the variants variant: h1 coming from my sharedTypo.

const Text = styled("p", sharedTypo, {
  variants: {
    color: {
      red: {
        color: "red"
      }
    }
  },
  compoundVariants: [
    {
      // TYPESCRIPT ERROR HERE SAYING VARIANT DOES NOT EXIST
      variant: "h1",
      color: "red",
      css: {
        padding: "20px"
      }
    }
  ]
});

The css is computed as expected though (it recognized the variant), which suggest that it is indeed a Typescript error versus Stitches not supporting this feature. Note: this worked with version 1.0.0, but stopped starting 1.0.1

To Reproduce

https://codesandbox.io/s/zen-boyd-v0myz?file=/src/App.tsx

Expected behavior

I expected Typescript to not display any errors.

Screenshots

Screen Shot 2021-10-11 at 11 23 19 AM Screen Shot 2021-10-11 at 11 23 41 AM

System information

Additional context

Add any other context about the problem here.

lukemorales commented 2 years ago

Experienced the same thing trying to use shared variants but changing the defaultVariants value for another component

peduarte commented 2 years ago

We reached a TS limitation to compose variants from other components. It's quite complex. We'll need to try again, or eventually wait for TS to get better - currently there are lots of limitations we need to work around.

However, we should be able to at least prevent the error.

Related: https://github.com/modulz/stitches/issues/848

MichaelDM commented 2 years ago

@peduarte, might this error prevention make it in the next release?

peduarte commented 2 years ago

@MichaelDM we'll look into this 🙏

atMari commented 1 year ago

Any updates on this? This is something that would really help our team.