On the topic of prefixes

[z0nekill]

Just want to ask a question around this test:

tailwind-merge/tests/prefixes.test.ts

Line 9 in 54737fb

expect(twMerge('tw:block tw:hidden')).toBe('tw:hidden')

If you don't pass a prefix to extendTailwindMerge these tests still pass - is this because they're still valid tailwind classes somehow? 🤔

[dcastil]

Hey @z0nekill! The reason why these work even without prefixes enabled is that tailwind-merge treats these as modifiers like hover:. tailwind-merge allows any modifiers because there are so many that adding this info would significantly increase its bundle size.

Did you run into any issues with this?

[z0nekill]

Ah, I thought that might be the case - just wanted to check in with you to confirm.

I'm actually investigating another issue related to the tailwind-merge LRU Cache when used by the library tailwind-variants we've got some hectic mount/patching performance issues in Vue 3. When twMerge is disabled we get a big boost in mount and patch time, when for all intents and purposes we should only be paying that cost on mount. So I started writing unit and performance tests around our use of tailwind-merge in my own library and found the behavior above.

Haven't managed to figure out why we're paying the patch penalty yet though - debugging the source of tailwind-variants shows that the LRU is definitely being set in their unit test suite.

[dcastil]

Oh yeah the LRU could be a reason. You could check whether you hit the inside of this if statement https://github.com/dcastil/tailwind-merge/blob/v3.3.1/src/lib/lru-cache.ts#L25-L29, e.g. by adding a console.log into it. When you hit it often, it means that half of the cache gets thrown away repeatedly, causing cache misses.