Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace classnames with clsx #61138

Merged
merged 21 commits into from
May 3, 2024
Merged

Replace classnames with clsx #61138

merged 21 commits into from
May 3, 2024

Conversation

DaniGuardiola
Copy link
Contributor

@DaniGuardiola DaniGuardiola commented Apr 26, 2024

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.

@DaniGuardiola DaniGuardiola enabled auto-merge (squash) May 1, 2024 10:48
packages/block-editor/CHANGELOG.md Show resolved Hide resolved
.github/setup-node/action.yml Outdated Show resolved Hide resolved
@desrosj
Copy link
Contributor

desrosj commented May 1, 2024

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
Copy link
Contributor Author

DaniGuardiola commented May 3, 2024

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

@DaniGuardiola DaniGuardiola changed the title Try: Replace classnames with clsx Replace classnames with clsx May 3, 2024
@DaniGuardiola DaniGuardiola added Needs Dev Note Requires a developer note for a major WordPress release cycle and removed Needs Dev Note Requires a developer note for a major WordPress release cycle labels May 3, 2024
@DaniGuardiola DaniGuardiola merged commit c566725 into trunk May 3, 2024
63 of 65 checks passed
@DaniGuardiola DaniGuardiola deleted the ignore/clsx-size-test branch May 3, 2024 20:04
@github-actions github-actions bot added this to the Gutenberg 18.4 milestone May 3, 2024
@tbradsha
Copy link

tbradsha commented Jun 5, 2024

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

@DaniGuardiola
Copy link
Contributor Author

@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
Copy link

tbradsha commented Jun 5, 2024

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
Copy link
Contributor Author

Good catch, thanks. Will fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants