Twin.macro: Importing in Typescript errors ts(2614)

[kieran-osgood]

I finally started trying out twin (you recommended it on reddit a few weeks ago!) having issues starting up in typescript however.

I followed the installation guide for CRA, I've made two code sandboxes setting up:
Plain JS (Working): https://codesandbox.io/s/lucid-kapitsa-cjy3y?file=/src/App.js
TS (Errors): https://codesandbox.io/s/busy-moser-yxl7g?file=/src/App.tsx

As you can see the JS works fine, and the TS does display the elements styled but there is a TS error for the imports Module '"../node_modules/twin.macro/types"' has no exported member 'tw'. Did you mean to use 'import tw from "../node_modules/twin.macro/types"' instead?ts(2614) I'm assuming it can't find the type definitions? I know you say you've got them built in, not sure if I missed something in installation.

[rbutera]

tw is the default export, not an exported member IIRC

[rbutera]

We should update the typescript types definition to include {styled} and {css}, thanks for flagging these

[kieran-osgood]

Going off the docs shows a non-default tw export?

import { tw, css } from "twin.macro";

const Input = ({ hasDarkHover }) => (
  <input
    css={[
      ({ hasHover }) => hasHover && tw`hover:border-black`,
      tw`border`,
      css`
        color: white;
      `,
    ]}
  />
);
export default () => <Input hasDarkHover />;

Glad to see I wasn't going totally crazy there though! Thanks

[AlexanderArvidsson]

@KieranO547
To fix this if you need css, css comes from @emotion/core or your css-in-js library of choice.
Had this issue yesterday, all I had to do was this:

import { css } from "@emotion/core";
import tw from "twin.macro"

Although, it would be nice if the typings matched the documentation!

[kieran-osgood]

@AlexanderArvidsson Thanks! Didn't realise the default export was really all I needed lol, appreciate the help :) and thanks @rbutera + I saw the PR you're working on, much appreciated!

[kieran-osgood]

@ben-rogerson Can I confirm if this issue definitely closed? I've just upgraded to v1.3.0 and still see the same error in typescript when importing styled from twin.macro:
import tw, { styled } from 'twin.macro'; gives "has no exported member named styled".

updated sandbox on v1.3.0: https://codesandbox.io/s/busy-moser-yxl7g?file=/src/App.tsx

Since I created this issue I've been following AlexanderArvidsson suggestion of importing it directly from styled-components, but I've just found using the tw='' prop / ${tw``} function within styled-components is meaning some styles are not working properly on ie11 (unfortunately I have to support it for this project...RIP), specifically those with variables (a specific example being opacity variable in rgb colours)

Not sure if this is a separate issue in my setup or not though (FWIW if I put the tailwind classes into className='' the styles apply because it also sets the hex value?)
What I get when using the tw prop:

versus using the className:

In the tailwind.generated.css I can see it creates hex and rgb styles:

.bg-off-black {
  --bg-opacity: 1;
  background-color: #131b20;
  background-color: rgba(19, 27, 32, var(--bg-opacity));
}

Just seems like any of twins APIs for attaching tailwind classes only uses the rgb and doesnt set the hex value?

[rbutera]

@KieranO547

Can I confirm if this issue definitely closed? I've just upgraded to v1.3.0 and still see the same error in typescript when importing styled from twin.macro:
import tw, { styled } from 'twin.macro'; gives "has no exported member named styled".

It appears that you've not followed the guide for annotating the TypeScript types for your chosen CSS-in-JS library:

• TypeScript + Styled-Components
• TypeScript + Emotion

Let us know if this resolves your issue.

---

@ben-rogerson I was worried these instructions would not be visible enough if not linked to from the main readme (which is why I had initially linked them from there!), and this comment here has confirmed these suspicions. I suggest that we link them again from the readme. Thoughts?

[rbutera]

@KieranO547 regarding your hex value issue please create a separate issue as this one is now closed, or feel free to join us on the discord and discuss it there in the #help channel, thanks!

[kieran-osgood]

@rbutera FWIW I didn't realise there was new documentation since I created the issue (I used the same code sandbox and assumed nothing changed) so thats why I hadn't followed the new instruction to add the declaration, I thought it was something you guys had added to the package. This is working for me now, thank you for your help! I'll setup another issue for the hex thing :)

[luknl]

Hey, I added the twin.d.ts file. It solved the error TS errors on css and styled for exemple. But now I have errors on my props (not all for some reason):

Any idea why?