Why are so many things broken at once?

In a create-react-app project using TypeScript and styled-components

After update to 1.1.0

import tw, {TwStyle} from 'twin.macro';

=> console

✕ Twin doesn't recognize { TwStyle }

Try one of these imports:
import { tw, styled, css } from twin.macro

2.a.

import 'twin.macro';
...
<button
   type="button"
   tw="hover:bg-teal-500 hover:text-white flex items-center block px-6 py-4 mr-2 font-bold text-teal-500 border border-teal-500 rounded-sm">
  	Previous page
</button>

OR

2.b.

import tw from 'twin.macro';
import {css} from 'styled-components';

<button
   type="button"
   css={[
          tw`hover:text-white hover:bg-teal-500 flex items-center block px-6 py-4 mr-2 font-bold text-teal-500 border border-teal-500 rounded-sm`,
        ]}
   >
   Previous page
</button>

3

import 'twin.macro';

<button type="button" tw="hover:text-white">
        Previous page
</button>

with autoCssProp: true, in babel-plugin-macros.config.js

@ben-rogerson

[ben-rogerson]

@abhijithvijayan Thanks for the raising these issues. We’ve just added a fix in 1.1.1 to allow TwStyle to be imported

[abhijithvijayan]

@rbutera indeed.

@ben-rogerson I use strict-typing and some other rules that won’t allow building unless I typesafe every return function.

I used thr TwStyle as the styled block return type.

It was fine in 1.0.0 btw.