ben-rogerson / twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

rc5 does not recognize md: prefix, using emotion

FranciscoKloganB opened this issue · comments

  1. When using twin.macro@rc5 the code snippet below yields a "MacroError: Variant 44 md not found, did you mean md:?"
  2. Using emotion
<div tw="w-44 md:w-80 lg:w-64">
    <AppSearchBar screenReaderDescription="Search events">
        <SearchIcon tw="h-5 w-5 text-gray-400" aria-hidden="true" />
    </AppSearchBar>
</div>

If I pin to twin.macro@rc.4, the code starts executing properly again. For it to work on twin.macro@rc.5, I found out I had an invalid, hidden, character in the first line of the snippet above. After re-writing the same code to deal with that, the issue appears to have vanished. I am not quite sure if this is a twin issue or a babel one.

image

Hidden characters are part of some of the worst errors 😮‍💨

Yeah that error message isn't right here.
Looks like the usual way of splitting up the string at the spaces failed.
Right now I'm not quite sure what to check for to fix this error as the character is filtered from the code block above.

V3 is now out - let me know if you see this again 👍