Transpile lib to more modern JS

[dcastil]

Note If you are affected by this, please let me know in a comment.

Currently the library is transpiled with the default browserslist config which means it is transpiled to ES5.

I played around with some more modern configs like last 3 years and > 0.1%, maintained node versions and could reduce the minified library size by 1 kB and the gzipped size by 0.5 kB. Additionally, I expect some minor performance improvements because e.g. rest/spread isn't polyfilled anymore.

Transpiling to more modern JS could be a breaking change for some users of tailwind-merge, so this would need to go into a v2 release of tailwind-merge.

I could also provide an additional legacy build (import { twMerge } from 'tailwind-merge/legacy') which stays transpiled to ES5 since everything in tailwind-merge can be polyfilled. But I guess that's not necessary since devs who need to support ES5 probably transpile their dependencies anyway these days.

[dcastil]

Related: https://github.com/dcastil/tailwind-merge/issues/132

[jzxhuang]

Just showing some support for this — any efforts to lower the bundle size is much appreciated! 22kB minified is a pretty big bundle for this simple (but necessary) utility

[dcastil]

Thanks @jzxhuang!

I'm also looking for more opportunities to reduce the bundle size. The default config has by far the biggest impact on bundle size (75% of gzipped lib), so the biggest improvement could be to create that automatically based on the Tailwind classes actually used in the codebase. I have an open discussion about this in the Tailwind repo. But so far no movement there.

[yuuk]

I found that optional chaining not transformed to es5, so it cannot support chrome version less than 80

e?.substring(0,e.indexOf(":")

[dcastil]

@yuuk True, I see it as well. Is this causing an issue for you?

Note to myself:

• Documentation on browserslist behavior in @babel/preset-env: https://babeljs.io/docs/babel-preset-env#browserslist-integration
• browserslist of Radix: https://github.com/radix-ui/primitives/blob/3e0642e40038386d58da9fb1d812c2fbfe9f67c1/babel.config.js#L30-L31
• browserslist of match-sorter: https://github.com/kentcdodds/kcd-scripts/blob/9e20489a87ffa1d21d0be1da824b96301621faa3/src/config/babelrc.js#L44C14-L46

[yuuk]

@yuuk True, I see it as well. Is this causing an issue for you?

Note to myself:

• Documentation on browserslist behavior in @babel/preset-env: https://babeljs.io/docs/babel-preset-env#browserslist-integration
• browserslist of Radix: https://github.com/radix-ui/primitives/blob/3e0642e40038386d58da9fb1d812c2fbfe9f67c1/babel.config.js#L30-L31
• browserslist of match-sorter: https://github.com/kentcdodds/kcd-scripts/blob/9e20489a87ffa1d21d0be1da824b96301621faa3/src/config/babelrc.js#L44C14-L46

Yes, Some app's build-in browser may use low version Chrome core, like Alipay、WhatsApp, The problem I have encountered is that I open my project in Alipay Android build-in browser it causing an error.

[dcastil]

@yuuk I added a new issue to add an ES5-compatible build to tailwind-merge: https://github.com/dcastil/tailwind-merge/issues/283

I will probably be able to ship it next weekend or so.

[dcastil]

Wrote down some thoughts on how to improve bundling in https://github.com/dcastil/tailwind-merge/issues/283#issuecomment-1680086721 which I could do as part of this as well.

[github-actions[bot]]

This was addressed in release v2.0.0.