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

[ben-rogerson]

Will a Preact + Emotion + TypeScript be available sometime?

I've had issues with previous techniques that add the css prop automatically and I've looked through many issues for the answer. This is the main reason I haven't released a typescript example.

The only way to use the css prop I've found is to add the pragma in the file:

/** @jsx jsx */
import { jsx } from "@emotion/react";

I'll keep this open as someone may be able to help here.

Thanks for the sponsor!