New variants api and type fixes

[hadihallak]

What's inside:

• Updated variants api according to Update the variant syntax #85
  We went with a new syntax since the syntax suggested in Update the variant syntax #85 can't be typed unless chained:
  new variant syntax:

const Button = styled("button", {
  // Base styles:
  backgroundColor: "red",
  // Variants are scoped into a variants property:
  variants: {
    variant: {
      red: {},
      black: {},
      blue: {},
      yellow: {},
    },
    size: {
      1: {},
      2: {},
      3: {},
      4: {},
    },
  },
});

• Compound variants Compound variants #80
• Fix forward ref types Typescript error when composing a React Component with forwardRef #71
• Fix: expects children: never when using styled(Component, {}) TS: expects children: never when using styled(Component, {})  #96
• Fix variant values not working when non-string value is provided Typing/usage issue with variants that are keyed by indexed  #47
• Fix refs throwing type errors Error when trying to add a ref to a styled component #110
• Fix value autocomplete isn't working inside variants. value autocomplete isn't working inside variants. #133
• Fixs gigantic type file size when building a ds
• Improve variants types in props so now when you create a variant like with the name true, it will automatically create the corresponding boolean variant in addition to the string one so:

const Button = styled('button', {
  variants: {
    isActive: {
      true: {},
      false: {},
    }
  }
})

// now you will be able to use it like so
<Button isActive={true} />
or
<Button isActive="true" />

with both of the options being strictly typed to the actual values

Please hammer this down with testing for both typing and actual functionality as there was a fair bit of types/functionality was re-written and we currently don't have testing setup for the styled package so play around with it and let me know if you find any bugs

[peduarte]

@christianalfoni would you mind having a look as well, pleeeeease? 🙏

[peduarte]

regarding the variant API, thanks for that, im looking at the codesandbox and doing some tests

So to clarify, in order for types to work properly, the variant calls need to be chained.

const Button = styled('button', {})
  .variant('color', {})
  .variant('size', {})

Instead of the original idea, which was to have completely seperate blocks:

const Button = styled('button', {})
Button.variant('color', {})
Button.variant('size', {})

Personally, Im not a fan of chaining, but I could live with it. What worries me the most is the confusion around the fact that types will not work unless you chain. These things become really hard to document, and will drive people nuts. Because from a technical perspective, you’d think that if you can chain, you can also call Button.variant - which you can, but… types wont work

[peduarte]

typing stuff seems to be working very well though