Typescript error when composing components with boolean variants

[St3Ko]

Bug report

Describe the bug

typescript throws an error, when you compose a component with boolean variants

similar to #384

To Reproduce

https://codesandbox.io/s/happy-chaplygin-157mi?file=/src/App.tsx line: 71 and 79

System information

• Version of Stitches: [e.g. 0.1.4]

[peduarte]

Thanks, we'll look into this.

Meanwhile, if you need a quick fix, changing this:

defaultVariants: {
  icon: "download",
- outlined: true
+ outlined: "true"
}

will get rid of the errors

[cpakken]

The problem is that the parent variance types are not being inferred in defaultVariance in the composing config.

In @stitches/react 0.1.7 (same behavior in 0.1.6)

const Box = styled('div', {
  variants: {
    mode: {
      filled: {},
      outlined: {}
    }    
    },
  },
})

const AwesomeBox = styled(Box, {
  defaultVariants: {
    mode: 'filled', //No autocompletion here. No type inference
  },
})
  

The variance types are inferred correctly when using it in a react component

const App = () => <AwesomeBox mode="filled"/> //type autocompletion appears here

I think just using the same type of inference method for props in defaultVariance would fix this, but I'm not familiar with the typing internals so it's just a guess.

The typescript inference in stitches is amazing. Whoever did the implementation must be a magician. How did you guys make the autocompletion so performant?

[jonathantneal]

This should be working in #659 —

import * as Stitches from '@stitches/react'
import { createCss } from '@stitches/react'

const { styled } = createCss()

const Button = styled('button', {
  padding: '12px 24px',
  background: 'transparent',
  borderRadius: '9999px',
  fontSize: 18,
  color: 'black',
  border: 'none',
  transition: 'all 0.3s ease',
  display: 'inline-flex',
  alignItems: 'center',
  minHeight: 48,
  outline: 'none',
  cursor: 'pointer',
  variants: {
    color: {
      primary: {
        'background': 'indianred',
        'color': 'white',
        '&:hover': {
          background: 'blueviolet',
        },
      },
      secondary: {
        'background': 'seagreen',
        'color': 'white',
        '&:hover': {
          background: 'yellowgreen',
        },
      },
    },
    outlined: {
      true: {
        'boxShadow': '0 0 0 1.5px black',
        'color': 'black',
        'background': 'transparent',
        '&:hover': {
          color: 'white',
          background: 'black',
        },
      },
    },
  },
  defaultVariants: {
    color: 'primary',
  },
})

const AnotherButton = styled(Button, {
  display: 'inline-flex',
  alignItems: 'center',
  minHeight: 48,
  variants: {
    icon: {
      download: {
        '&:after': {
          content: '""',
          width: 24,
          height: 24,
          marginLeft: 12,
          background: 'red',
        },
      },
    },
    outlined: {
      true: {},
    },
  },
  compoundVariants: [
    {
      icon: 'download',
      outlined: true,
      css: {
        // stuff
      },
    },
  ],
  defaultVariants: {
    icon: 'download',
    outlined: true,
  },
})

interface IProps {
  headline: string
  copy: string
  uuid: string
}

export default function HeadlineCopy(props: IProps) {
  return (
    <>
      <Button color="primary">button</Button>
      <AnotherButton color="primary" icon="download">
        another button
      </AnotherButton>
    </>
  )
}

[peduarte]

Fixed in V1. Please refer to migration guide and changelog