Twin.macro: Falsy values in tailwind config trigger class not found

[vincent-vieira]

Hello there,

First of all, thanks for this library. Even though it's still young, it is showing promising things and I'm eager to see future releases !

I'm posting due to a weird issue I'm encountering on my GatsbyJS project.
I have setup a project as stated in the docs, and am using Twin with Emotion.

I've customized the "inset" section of my Tailwind theme as is :
inset: { '0': 0, auto: 'auto', 'icon-offset': '19px', }

From time to time, I don't know why it doesn't always occur, I'm getting this error message and my bundle no longer builds :

Generating development JavaScript bundle failed
<hidden location>/frontend/src/mixins/Forms.ts:

✕ inset-y-0 was not found
Did you mean inset-y-0?

File: src/mixins/Forms.ts

I've tried restarting the dev server, clearing the .cache folder inside node_modules, nothing helps. I can sometimes get rid of the error by removing all inset classes from the incriminated file and let livereloading do its job.

Any ideas why this happens ?
Let me know if I can help you with anything by providing you any specific details.

[ben-rogerson]

Great to hear you're enjoying twin! - Aside from the bug you've found anyway 😄

I haven't seen this specific bug before but I am aware of some caching issues, particularly in Gatsby.

I've made a codesandbox attempting to reproduce the issue but haven't succeeded yet.

Perhaps you could verify the tailwind.config.js is the same? Or if there's any other plugins that could be interfering.

Also another thought - is the error still showing after you do a gatsby build?

[vincent-vieira]

I debugged a little, and got the issue.

The inset config for zero value should be '0': '0', not '0': 0. Otherwise, the lookup here will fail as the '0' config value as a number, extracted from the classParts will be evaluated as a falsy value... And because the lookup fails, the _resolve_ function returns an empty object triggering the error even if the class exists in the Tailwind configuration.

This was this dumb lol.

I'll let you close the issue if you don't think it is necessary to add any safeguard 😊

[ben-rogerson]

Hey Vincent, thanks for looking into this and it's great you got to the bottom of it.
I think adding a value of 0 _should_ be allowed so I'll add a fix for this 👍

Were you able to trigger the error consistently?

[vincent-vieira]

Apart from cache issues, yes !
Everytime I switch back from '0' or '0px' to 0 while clearing node_modules/.cache folder and restarting Gatsby server (due to config livereloading issues), the error comes back.

[ben-rogerson]

great, that'll help me out testing a fix - thanks so much for submitting the issue :)

[vincent-vieira]

If I can help you testing your fix, don't hesitate to sollicitate me :)

[ben-rogerson]

This bug was fixed in v1.0.0 🎉