Gatsby caching issue

[r6203]

Hey!

I'm using twin.macro within a Gatsby site.

My setup is basically the same as in the readme.

I've created a custom tailwind.config.js and changed a few colors.

However, the new colors are only picked up after I manually delete the node_modules/.cache folder.

I've got no experience in using Babel macros but shouldn't the cache be cleared -- at least -- when I restart my dev server?

Or how is changing the tailwind config supposed to work?

Thank you for your amazing work!

[ben-rogerson]

Hey Robin
You're right, the cache should be cleared when you restart your server.

And ideally, you shouldn't have to restart during development. This will be tackled in one of the next versions of Twin. I'll be sure to test in gatsby to see if it resolves the same problem you're experiencing.

Check this thread for some workarounds.

Cheers for giving twin a try :)

[kamontat]

Actually, This problem is come from babel macro itself, learn more babel-cache-problem

[ben-rogerson]

You're right, that's an issue that we can't solve right now.
tailwind.macro - the package twin was forked from, has the ability to pick up live tailwind.config.js changes without a build script restart.

[talohana]

Any updates on this?

[ben-rogerson]

Not great news but I hit some major roadblocks and backed out. Without major structural code changes, I'm unsure if it's accomplishable. Firmly in the 'too hard' bucket for now.

[mosesoak]

Hi @ben-rogerson -- just wanted to say hello and thanks for Twin, it's such a cool angle and gives our team everything we want.

The DEFAULT thing isn't a huge blocker, this one is a bummer though for sure -- I feel your pain. It looks like it might be the end of the Babel era, they're underwater.

For posterity I followed this thread to the underlying problem in this order:
kentcdodds/babel-plugin-preval#19
babel/babel#8497
babel/babel#11741 (A potential fix, but now in a merge-conflict state and left hanging... Babel has 500 open issues... they're in the ditch it seems)

I haven't tried the Nodemon workaround mentioned in the first link, but it's from 2017 so not getting my hopes up.

Anyway, we really want Twin as a team, so we're going to just go ahead and use it, despite the fact that we'll have to modify our develop script to run rm -rf ./node_modules/.cache/babel-loader, and then the fact that we'll have to restart the dev server a bunch during theme development. Hoping it's not a deal-breaker.

Let us know if you come up with any other workarounds to get this solved without waiting for the Babel team! For example, maybe it would be possible to cut a branch of Twin that installs Babel from that PR's branch, to see if it fixes it...

[ben-rogerson]

Awesome to hear you're using twin 👍

I remember that thread tunnel - not too much at the end of it eh.

Next project, I'll be looking at defeating the babel cache. In our discord back in March, Hippo took a deep dive and scouted out some potential fixes for Next.js, so I've got a good start point.

[ben-rogerson]

Looks like babel is implementing a feature in v7.17.0 that allows plugins to indicate dependencies on external files.
See babel/babel#11741

Closing this issue for now due to age - I'll create a new issue soon when this update is testable across all frameworks.