Twin.macro: Why are so many things broken at once?

[abhijithvijayan]

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

After update to 1.1.0

1.

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

[abhijithvijayan]

OKAY. I figured it out.

There were breaking changes after 1.0.0

the option styled changed to preset in https://github.com/ben-rogerson/twin.macro/commit/235f6152aee6fe7f8eb9af43f8ebc324eedc21da#diff-04c6e90faac2675aa89e2176d2eec7d8L452

[ben-rogerson]

Hey just wondering, did your build break after the update?

Also whats TwStyle? Is that something you usually import?

In v1.1.0, styled _didn't_ change to preset - I just added a new preset option 👍
There should be no breaking changes unless I'm overlooking something here.

[rbutera]

@ben-rogerson TwStyle is the Twin typescript type

[abhijithvijayan]

@ben-rogerson Then, I am pretty sure it broke somewhere.

When I switched to preset from styled, it worked.

The build broke(partially) even in 1.0.0
By partial I mean, it worked initially with css={[twsome-class]} (styled in babel-config-macros.config.js)

But somehow failed when I use tw="abc", and that too in 1.1.0

I had no issues whatsoever in 1.0.0 in next.js version

Now, I migrated both to use preset, and it's back to normal in CRA version.

Also, I imported the mentioned type in 1.0.0 but it now(in 1.1.0) shows the error that its not a valid import.

[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.

[abhijithvijayan]

I will attach a reproducible example(if it still pops up) to this issue later.

[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]

@ben-rogerson Nice.