Replace classnames with clsx

[DaniGuardiola]

PR originally started as a test, see: #61091 (comment)

Then it replaced #61091, see: #61091 (comment)

There are no significant changes in this PR that weren't already part of the previous PR, I only synced with trunk and ensured that all usage of classnames was still consistently replaced with cslx.

[desrosj]

It looks like this PR is the first one making a change to the package.json file since #61211, which means it's the first one running the npm ci step.

I tried rolling that back the update to actions/setup-node, and and it worked for me (#61289). I also moved the debugging steps we added above to that PR to keep this one specific to the task at hand.

[DaniGuardiola]

Thanks @desrosj, I'm gonna remove the unrelated CI debug changes in order to merge the PR.

[tbradsha]

Noting that this replaced at least five instances of classnames/dedupe with clsx, so may have some unintended consequences.

[DaniGuardiola]

@tbradsha thanks for the heads up, but this was accounted for so nothing to worry about, see previous PR as mentioned in the description here: #61091

[tbradsha]

this was accounted for so nothing to worry about

At least this change introduces an unintentional side effect:

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 1fc1519f47f94..c5fe140e8fe23 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -10,7 +10,7 @@ import {
 	Platform,
 } from 'react-native';
 import Video from 'react-native-video';
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -298,7 +298,7 @@ const Cover = ( {
 
 		// Ensure that "is-light" is removed from "className" attribute if cover background is dark.
 		if ( isCoverDark && attributes.className?.includes( 'is-light' ) ) {
-			const className = classnames( attributes.className, {
+			const className = clsx( attributes.className, {
 				'is-light': false,
 			} );
 			setAttributes( {

Assuming attributes.className is set to "some-class is-light":

classes = 'some-class is-light';
dedupe(classes,{'is-light': false}; // 'some-class'
classnames(classes,{'is-light': false}) // 'some-class is-light'
clsx(classes,{'is-light': false}) // 'some-class is-light'

• classnames.dedupe() would remove is-light
• clsx (and the standard classnames) would not remove is-light. In this case, the second argument does nothing, since it's always set to false.

[DaniGuardiola]

Good catch, thanks. Will fix.