[Performance]: Replace classnames usage with clsx

[nefeline]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Replace classnames with clsx across WooCommerce, which is a faster and lighter alternative.

This is aligned with the equivalent recent change made on Gutenberg on WordPress/gutenberg#61138

Closes #47602

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

No visible changes should be observed to the end user.

1. Make sure all tests on this PR pass.
2. Do a quick smoketest with a few Woo blocks & confirm there are no visual regressions.
3. Do a quick smoketest by accessing WooCommerce > Home > Customize Your Store and confirm there are no visual regressions.

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Replaced classnames package with the faster and smaller clsx package.

Comment

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[github-actions]

Hi @kmanijak, @woocommerce/woo-fse

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[samueljseay]

Just a heads up, something we should do on all these PRs (we dont have automation yet for, but should) is run pnpm analyze-bundles and compare against trunk, specifically we're most interested in frontend and main bundles I believe it should be smaller but we really should validate just in case 😄 I think its also worth mentioning that classnames is only 360B gzipped in both of our bundles right now, so it's not really very big. Would be good to compare the gzipped size of clsx in the bundle for confirmation

[samueljseay]

Oh and you'll also be able to validate if classnames was actually removed as a dependency :) because there might be underlying deps relying on it it might not change bundle size (or could increase it, although if clsx runtime perf is better it might be worth!)

[samueljseay]

Ah yeah confirmed my suspicion that classnames is not gone. So this will increase the bundle size (for now). I can't speak for runtime perf so I'll leave that up to you. this is a very small impact, it just won't reduce bundle size right now.

EDIT, looked at the runtime perf link, looks good to me and worth the change imho!

[nerrad]

Likely, won't be completely gone until the upstream WP packages that include it are also released with the changes.

With that said, along with what Sam mentioned, it'd be good to identify what external packages are pulling in classnames in case there are any that have updates (or might need alternative if we want to eliminate usage). It's likely it'll just be WP packages needing updated though (when they are released).

[nefeline]

@samueljseay @nerrad @danielwrobert thanks for the reviews & my apologies for the slight delay as I had to switch focus to other higher priorities + had an AFK this week :)

Just a heads up, something we should do on all these PRs (we dont have automation yet for, but should) is run pnpm analyze-bundles and compare against trunk, specifically we're most interested in frontend and main bundles I believe it should be smaller but we really should validate just in case 😄 I think its also worth mentioning that classnames is only 360B gzipped in both of our bundles right now, so it's not really very big. Would be good to compare the gzipped size of clsx in the bundle for confirmation

@samueljseay thanks for the suggestion! I see you already opened a PR for the automation so that's great: #47880 looking forward to seeing it in place 🎉 .

I did compare the bundle sizes on trunk versus on this branch and it is slightly bigger indeed:

This branch (with clsx)	Trunk
Parsed size: 236.65	Parsed size: 236.25
Gzipped size: 76.64	Gzipped size: 76.52
Stat size: 783.79	Stat size: 783.42

Given that:

this is a very small impact, it just won't reduce bundle size right now.
looked at the runtime perf link, looks good to me and worth the change IMHO!

How about we merge the changes here and work on additional PRs/steps to investigate reducing the size of the build separately? This PR is already rather big and the runtime performance improvement is worth the change, not to mention it is aligned with what Gutenberg is doing.

[samueljseay]

@nefeline more than happy to merge this based on runtime perf benefits alone! 🚢