Replace classnames with clsx (#61138)

* Replace classnames with clsx.

* Fix removeAspectRatioClasses.

* Fix docs.

* Fix test.

* Fix trunk changes.

* Fix removeAspectRatioClasses.

* Undo unwanted PHP changes.

* Add restricted import rule.

* dummy commit

* Update changelogs for all affected packages.

* Remove test stuff 😅

* Make changelog entries internal.

* Try the force flag to fix CI flakiness on Windows.

* Add debug logs to CI task.

* Try to log again.

* Attempt logging again.

Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: desrosj <desrosj@git.wordpress.org>
Co-authored-by: dcalhoun <dpcalhoun@git.wordpress.org>

.eslintrc.js

@@ -76,6 +76,11 @@ const restrictedImports = [
 		message:
 			"edit-widgets is a WordPress top level package that shouldn't be imported into other packages",
 	},
+	{
+		name: 'classnames',
+		message:
+			"Please use `clsx` instead. It's a lighter and faster drop-in replacement for `classnames`.",
+	},
 ];
 
 module.exports = {

.github/setup-node/action.yml

@@ -32,8 +32,15 @@ runs:
 
         - name: Install npm dependencies
           if: ${{ steps.cache-node_modules.outputs.cache-hit != 'true' }}
-          run: npm ci
+          run: |
+              npm ci
           shell: bash
+        - name: Upload npm logs as an artifact on failure
+          uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+          if: failure()
+          with:
+              name: npm-logs
+              path: C:\npm\cache\_logs
 
         # On cache hit, we run the post-install script to match the native `npm ci` behavior.
         # An example of this is to patch `node_modules` using patch-package.

docs/contributors/code/coding-guidelines.md

@@ -39,13 +39,13 @@ Components may be assigned with class names that indicate states (for example, a
 
 **Example:**
 
-Consider again the Notices example. We may want to apply specific styling for dismissible notices. The [`classnames` package](https://www.npmjs.com/package/classnames) can be a helpful utility for conditionally applying modifier class names.
+Consider again the Notices example. We may want to apply specific styling for dismissible notices. The [`clsx` package](https://www.npmjs.com/package/clsx) can be a helpful utility for conditionally applying modifier class names.
 
 ```jsx
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function Notice( { children, onRemove, isDismissible } ) {
-	const classes = classnames( 'components-notice', {
+	const classes = clsx( 'components-notice', {
 		'is-dismissible': isDismissible,
 	} );
 

packages/block-editor/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 12.25.0 (2024-05-02)
 
 ## 12.24.0 (2024-04-19)
@@ -20,7 +24,7 @@
 
 ## 12.18.0 (2024-01-24)
 
-- Deprecated `__experimentalRecursionProvider` and `__experimentalUseHasRecursion` in favor of their new stable counterparts `RecursionProvider` and `useHasRecursion`.
+-   Deprecated `__experimentalRecursionProvider` and `__experimentalUseHasRecursion` in favor of their new stable counterparts `RecursionProvider` and `useHasRecursion`.
 
 ## 12.17.0 (2024-01-10)
 
@@ -251,8 +255,8 @@
 
 ### Breaking Changes
 
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 
 ## 5.3.0 (2021-03-17)
 

packages/block-editor/package.json

@@ -65,7 +65,7 @@
 		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",