Preact / Emotion / TypeScript example

[antoniobrandao]

This is not a bug report, more of a request. Will a Preact + Emotion + TypeScript be available sometime?

I'm hoping it would be helpful as I'm trying to set one up, but struggling to get the tw attribute to work on elements.

Although I get no errors, this: <div tw="underline">Text</div> Renders like this: <div css="[object Object]" data-tw="underline">Text</div>

I created a slimmed-down repo if you would like to check the config: https://github.com/antoniobrandao/preact-twin-typescript-test

Using tw in the styled element works fine but not as a custom attribute:

import tw, { styled } from 'twin.macro'

const StyledElement = styled.p(() => [
  tw`underline`,
])

const App: FunctionalComponent = () => {
  return (
    <>
      <StyledElement>
        Underline styled element (this works, text renders underlined)
      </StyledElement>
      <br />
      <div tw='underline'>
        Div with with tw property 'underline' (doesn't work, text doesn't renders underlined)
      </div>
    </>
  );
};

Thank you for the great work on twin.macro, I'm a proud sponsor