matchAll Polyfill

[schonfeld]

We've been seeing some client side error logs re .matchAll() calls evaluating to undefined. After a bit of digging, we realized that all of those exceptions originate on older-ish browsers. Nonetheless, this is an issue for us (and I suspect others, too). Specifically, the issue stems from this line:

tailwind-merge/src/lib/merge-classlist.ts

Line 83 in a703309

for (const match of className.matchAll(/[:[\]]/g)) {

I'm curious if you've given thought to adding a matchAll polyfill, or using a different approach to matching?

[charkour]

For a workaround, you could consider using the npm package string.prototype.matchall to polyfill.

It provides a shim, so at the start of your app, I think you could call const matchAll = require('string.prototype.matchall'); matchAll.shim(); to polyfill.

Which browser are you using?

[schonfeld]

Right -- I've impl'd that polyfill and it seems to work for us. But it took us an hour to realize this was the issue. Figured I'd post here to save others some time.

I'm able to reproduce this on Chrome 70.x on Mac. It's difficult to run multiple Chrome versions on the same machine, but you can download an old build of Chromium and easily run that side-by-side. Here's the version I'm using: version: 70.0.3538.124

Here's a sample stacktrace, although, the issue is rather straight forward:

[dcastil]

Just checked on caniuse and matchAll is available for 93.59% of global users. I'd say for a library like tailwind-merge that probably isn't enough, especially since I think I should be able to replace the functionality easily. I'll implement a fix for this.

@schonfeld out of curiosity, what browsers do you need to support? Do you have a defined policy for that?

[schonfeld]

Just checked on caniuse and matchAll is available for 93.59% of global users. I'd say for a library like tailwind-merge that probably isn't enough, especially since I think I should be able to replace the functionality easily. I'll implement a fix for this.

@schonfeld out of curiosity, what browsers do you need to support? Do you have a defined policy for that?

I don't really a policy, per se. We typically try to not be bothered by older/out-dated browsers, but this issue seemed to affect a non-negligible portion of our daily users, somewhere in the 200 uniques per day... It seems to affect mostly mobile browsers. I suspect because those are usually tied to OS updates, and some folks are unable to upgrade on older devices...

[dcastil]

Okay, that makes sense. Thanks for the info!

[dcastil]

@schonfeld you can now <my-favorite-package-manager> add tailwind-merge@dev where matchAll isn't used anymore, so you should be able to remove your matchAll polyfill as well. A v1.6.0 will come in the coming days.

[github-actions]

This was addressed in release v1.6.0.

[schonfeld]

Confirmed working on latest v1.6.0. Thanks so much, @dcastil !