TypeScript support

[otbe]

Hi,

I discovered astrotruf via twitter some hours ago and Im very impressed! Great work! 👍

I wonder what would be the best way to add TypeScript definitions. Its somehow different compared to styled-components.

I guess for the component API something like this would be fine:

const Button = styled<{primary?: boolean; color: 'green'}>('button')`
  color: black;
  border: 1px solid black;
  background-color: white;

  &.primary {
    color: blue;
    border: 1px solid blue;
  }

  &.color-green {
    color: green;
  }
` // JSX.IntrinsicElements.button & {primary?: boolean; color: 'green'};

But the css API gives me a headache:

const styles = css<{box: string; footer: string}>`
  .box {
    height: ${height}px;
    margin-bottom: ${margin}px;
  }

  .footer {
    position: absolute;
    top: ${bottom}px;
  }
`;

Both way are somehow error prone (what is if I forgot to rename the class inside the tagged string literal?)....

Would be great to start some discussion here :)

Any ideas?

[sonhanguyen]

in development, you could make the styles object a proxy that throws everytime you read a prop and the value is undefined.