`tw` and `css` props don't work in Goober example

[sampotts]

I could be missing something here but I can't get Preact + Goober to work with the tw or css props. Even the example ends up with the same output:

[ben-rogerson]

There's some overly light documentation for Goober + Twin at the moment - sorry about that.

Currently Goober doesn't offer a css prop so you'd need to use styled-components as the example uses.

Works

• styled import
• tw import
• +tw prop
• +css prop
• +tw.div shorthand

~~Doesn’t~~

• ~tw prop~
• ~css prop~
• ~tw.div shorthand~

Edit: I've updated the example so twins general API is now working with Goober.

[sampotts]

All good 👍 I'd love to help out but wouldn't know where to start with it. Goober looks great, being so small. I can work around these limitations for now 👍

[ben-rogerson]

Oh yeah, and when you couple it with Preact then you're cooking 👍

[sampotts]

One more thing, I noticed I get a TypeScript warning/error when using styled. Any ideas?

I have a twin.d.ts containing this:

import 'twin.macro';

import { css as cssImport, styled as styledImport } from 'goober';

declare module 'twin.macro' {
  // The styled and css imports
  const styled: typeof styledImport;
  const css: typeof cssImport;
}

// The 'as' prop on styled components
declare global {
  namespace JSX {
    interface IntrinsicAttributes<T> extends DOMAttributes<T> {
      as?: string;
    }
  }
}

[ben-rogerson]

Hey Sam, I've got no immediate ideas but does the "styled.div" syntax throw the same error?

[sampotts]

I did try that but it throws:

Property 'div' does not exist on type 'StyledFunction'.ts(2339)

The styled('div') syntax works, it just throws a TypeScript error so it probably requires some hacking of the types I think.

[ben-rogerson]

If you come up with anything please let me know :) I'd assist but I'm not great with this topic.

[sampotts]

I'll have a tinker and see what I can come up with.