Problems using twin.macro

Get Help and Help Others
1

Hello! :wave: My first post although I’ve lurked for a while. I’m picking up a Redwood side project again after a couple of months and am running into a couple of fairly opaque issues that I’m wondering if anyone has any advice on.

I’m using twin.macro for styling, which (before v0.35) has worked a treat up until I try to add a prerender prop to one of my routes. Twin is a Babel macro which allows for writing Tailwind classes within (in my case) styled-components. I’ll separate out the two issues below:

with Redwood 0.35

As soon as I import tw from 'twin.macro', the dev process can suddenly no longer render the page, failing with the error:

Failed to compile.

../node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/readFile.js
Module not found: Error: Can't resolve 'fs' in '/Users/me/sandbox/rw-twin/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist'

This works absolutely fine in Redwood 0.34, so I was suspecting some sort of version mismatch nested in the dependency tree. I tried pinning cosmiconfig to 6.0.0 via the resolutions field in package.json, but to no avail (this was a bit of a shot in the dark anyway).

This is the bigger of my two issues as without a solution, the only workaround I can see would be to stop using twin.macro and rewrite all of my existing styles!

with Redwood 0.34

Back on 0.34, running yarn rw dev or yarn rw build both presented no problems until I added the prerender prop to one of my routes. The build command then failed with an error from twin.macro noting that it couldn’t find one of the custom styles from my Tailwind config:

---------- Error rendering path "/" ----------
MacroError: /Users/me/sandbox/rw-twin/web/src/pages/HomePage/HomePage.js: 

✕ text-customColor was not found

Try one of these classes:
[there follows a long list of similar inbuilt class names, omitted for brevity]

Note that this is thrown in the ‘prerender’ phase of the process - the ‘build’ phase completes successfully.

Interestingly, no such error is thrown if I simply don’t reference any of my custom styles. Using only Tailwind’s predefined styles allows the build and the prerender to complete successfully.

Reproduction

It’s entirely possible that whatever’s causing the issues is something needing fixed on twin’s side, but I thought I’d post here first to see if anyone had any experience with this sort of problem, or could even help me narrow down what to put in a bug report. I’m certainly no expert on configuring Babel and other aspects of the build process (which is one of the things I appreciate Redwood taking care of!) but in this case that does seem to be where the problem lies.

I’ve created a Git repository with a minimal reproduction of the issue, currently using Redwood 0.35. I can push up a version with 0.34 too if that becomes useful.

Any thoughts would be very much appreciated!

2

@Chris is using twin.macro on Everfund, not sure if he’s run into the same issue but he’d be the first one to poke.

Also thanks for the super detailed explanation and reproduction. Very, very helpful!

1 Like
3

After consulting with Chris and Danny who has also experimented with twin.marco the consensus I got was that twin.macro is unfortunately a semi-dumpster fire to work with and both are planning on migrating away from it.

Wondering exactly what you are looking to get from the package and if there are other ways to achieve a similar goal of doing a Tailwind-in-JS style architecture.

4

Thanks so much for asking around! I really appreciate those opinions particularly from a Redwood point of view. I had previously run into a couple of sticking points with twin.macro that gave me cause to think about its staying power, so all in all it’s probably a sign to think more concretely about migrating away from it too.

In terms of what I was getting from twin, it was mainly just a way of encapsulating styles and avoiding massive strings of Tailwind classes in the JSX. I had been eyeing up Twind as a potential alternative (although it takes quite a different approach technically), so I’ve taken the opportunity to try it out on my minimal reproduction, and it doesn’t throw up any of the same issues - no crashes with v0.35, and prerendering :sparkles: just works :sparkles:.

There’s probably some more poking around for me to do in determining whether I want to use that in the larger app, or just fully commit to pure Tailwind and make liberal use of the @apply directive. Either way, I think I’ll have a better route forward though, so thanks again.

A side note: in the process of trying out Twind, I discovered that I needed to manually configure purging for unused Tailwind classes, but I see this will be taken care of automatically in the next Redwood release :rocket: Kudos to the team for continuing to improve this experience!

1 Like
5

Awesome, good to know. I also find it hilarious there’s multiple Tailwind-in-JS solutions.

6

Yeah! And not only that, there’s at least one more Babel macro for it. Gotta give the people what they want I guess :joy:

1 Like