Try: Replace classnames with clsx

[tyxla]

Proposed Changes

This PR attempts to replace classnames with clsx across Calypso, which is a faster and lighter alternative.

Originally brought up by @DaniGuardiola in a recent discussion about merging classes in Gutenberg.

Testing Instructions

• All should be green.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106814

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106814&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106814&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~736 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-browsehappy           -778 B  (-0.5%)     -359 B  (-0.8%)
entry-login                 +381 B  (+0.0%)      -60 B  (-0.0%)
entry-main                  +347 B  (+0.0%)      +17 B  (+0.0%)
entry-domains-landing       -296 B  (-0.0%)     -142 B  (-0.1%)
entry-subscriptions         +191 B  (+0.0%)      -19 B  (-0.0%)
entry-stepper                +93 B  (+0.0%)     -189 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~4047 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
settings                                -813 B  (-0.1%)     -169 B  (-0.1%)
jetpack-cloud-manage-pricing            -669 B  (-0.2%)     -235 B  (-0.2%)
media                                   -622 B  (-0.0%)     -287 B  (-0.1%)
plugins                                 -564 B  (-0.0%)     -322 B  (-0.0%)
settings-podcast                        -433 B  (-0.1%)     -140 B  (-0.1%)
settings-writing                        -411 B  (-0.1%)     -157 B  (-0.1%)
settings-newsletter                     -383 B  (-0.1%)     -134 B  (-0.1%)
backup                                  -380 B  (-0.0%)     -253 B  (-0.1%)
purchases                               -372 B  (-0.0%)      -67 B  (-0.0%)
a8c-for-agencies-sites                  -370 B  (-0.0%)     -294 B  (-0.1%)
earn                                    -365 B  (-0.0%)     -145 B  (-0.1%)
site-purchases                          -354 B  (-0.0%)      -59 B  (-0.0%)
scan                                    -340 B  (-0.0%)     -184 B  (-0.1%)
email                                   -326 B  (-0.0%)     -123 B  (-0.1%)
home                                    -319 B  (-0.0%)     -323 B  (-0.1%)
hosting                                 -316 B  (-0.0%)     -170 B  (-0.0%)
checkout                                -311 B  (-0.0%)      -98 B  (-0.0%)
jetpack-cloud-plugin-management         -304 B  (-0.0%)     -239 B  (-0.1%)
jetpack-cloud-agency-sites-v2           -301 B  (-0.0%)     -355 B  (-0.1%)
posts-custom                            -284 B  (-0.0%)     -128 B  (-0.1%)
posts                                   -284 B  (-0.0%)     -128 B  (-0.1%)
domains                                 -284 B  (-0.0%)     -166 B  (-0.0%)
activity                                -281 B  (-0.0%)     -176 B  (-0.1%)
security                                -278 B  (-0.0%)     -126 B  (-0.0%)
github-deployments                      -268 B  (-0.0%)     -163 B  (-0.1%)
settings-performance                    -267 B  (-0.1%)      -89 B  (-0.1%)
update-design-flow                      +260 B  (+0.0%)      -44 B  (-0.0%)
reader                                  -259 B  (-0.0%)     -263 B  (-0.1%)
settings-security                       -257 B  (-0.1%)     -133 B  (-0.1%)
theme                                   -243 B  (-0.0%)     -137 B  (-0.1%)
people                                  -243 B  (-0.0%)     -159 B  (-0.1%)
jetpack-search                          -239 B  (-0.0%)     -124 B  (-0.1%)
comments                                -237 B  (-0.0%)     -115 B  (-0.1%)
marketing                               -234 B  (-0.0%)     -109 B  (-0.1%)
link-in-bio-tld-flow                    +226 B  (+0.0%)      -76 B  (-0.0%)
account                                 -219 B  (-0.0%)     -127 B  (-0.1%)
settings-jetpack                        -217 B  (-0.0%)     -123 B  (-0.1%)
themes                                  -215 B  (-0.0%)      -90 B  (-0.0%)
jetpack-cloud-settings                  -213 B  (-0.0%)     -108 B  (-0.1%)
settings-discussion                     -209 B  (-0.0%)      -96 B  (-0.1%)
import                                  -207 B  (-0.0%)     -169 B  (-0.1%)
google-my-business                      -207 B  (-0.0%)     -128 B  (-0.1%)
jetpack-connect                         -205 B  (-0.0%)     -150 B  (-0.0%)
jetpack-cloud-overview                  -205 B  (-0.0%)     -118 B  (-0.1%)
jetpack-cloud-features-comparison       -204 B  (-0.0%)     -152 B  (-0.1%)
concierge                               -195 B  (-0.0%)      -83 B  (-0.1%)
notification-settings                   -191 B  (-0.0%)     -110 B  (-0.0%)
sites-dashboard                         -186 B  (-0.0%)     -111 B  (-0.0%)
pages                                   -183 B  (-0.0%)     -115 B  (-0.1%)
subscribers                             -175 B  (-0.0%)      -91 B  (-0.0%)
site-monitoring                         -175 B  (-0.0%)     -105 B  (-0.0%)
settings-reading                        -173 B  (-0.0%)      -78 B  (-0.1%)
account-close                           -173 B  (-0.0%)     -124 B  (-0.1%)
woocommerce-installation                -169 B  (-0.0%)      -48 B  (-0.0%)
export                                  -169 B  (-0.0%)      -88 B  (-0.1%)
migrate                                 -168 B  (-0.0%)      -76 B  (-0.1%)
jetpack-cloud                           -165 B  (-0.0%)      -89 B  (-0.1%)
jetpack-cloud-pricing                   -164 B  (-0.0%)     -114 B  (-0.1%)
jetpack-social                          -160 B  (-0.0%)      -75 B  (-0.1%)
help                                    -150 B  (-0.0%)     -100 B  (-0.0%)
developer                               -150 B  (-0.0%)     -123 B  (-0.1%)
import-flow                             -149 B  (-0.0%)     -213 B  (-0.0%)
site-blocks                             -144 B  (-0.0%)     -102 B  (-0.0%)
privacy                                 -144 B  (-0.0%)     -112 B  (-0.1%)
me                                      -144 B  (-0.0%)     -107 B  (-0.0%)
promote-post-i2                         -137 B  (-0.0%)      -84 B  (-0.1%)
add-ons                                 -137 B  (-0.0%)      -52 B  (-0.0%)
jetpack-cloud-partner-portal            -135 B  (-0.0%)     -202 B  (-0.1%)
customize                               -131 B  (-0.0%)      -51 B  (-0.0%)
a8c-for-agencies-overview               -130 B  (-0.1%)      -61 B  (-0.1%)
preview                                 -125 B  (-0.0%)      -52 B  (-0.0%)
gutenberg-editor                        -125 B  (-0.0%)      -50 B  (-0.0%)
marketplace                             -121 B  (-0.0%)     -100 B  (-0.0%)
a8c-for-agencies-marketplace            -114 B  (-0.0%)      -95 B  (-0.1%)
accept-invite                           -110 B  (-0.1%)      -88 B  (-0.2%)
signup                                  +106 B  (+0.0%)       +7 B  (+0.0%)
woocommerce                             -101 B  (-0.0%)      -47 B  (-0.0%)
a8c-for-agencies-referrals               -98 B  (-0.1%)      -33 B  (-0.1%)
stats                                    -94 B  (-0.0%)     -186 B  (-0.1%)
import-hosted-site-flow                  -94 B  (-0.0%)     -203 B  (-0.1%)
a8c-for-agencies-plugins                 -78 B  (-0.1%)      -28 B  (-0.1%)
jetpack-app                              +74 B  (+0.0%)       -1 B  (-0.0%)
a8c-for-agencies-landing                 -70 B  (-0.1%)      -26 B  (-0.1%)
sensei-flow                              +69 B  (+0.0%)      -27 B  (-0.0%)
a8c-for-agencies-purchases               -65 B  (-0.0%)      -39 B  (-0.0%)
write-flow                               -62 B  (-0.0%)      -47 B  (-0.1%)
build-flow                               -62 B  (-0.0%)      -41 B  (-0.1%)
devdocs                                  -54 B  (-0.0%)       -5 B  (-0.0%)
jetpack-cloud-agency-signup              -48 B  (-0.1%)      -27 B  (-0.1%)
a8c-for-agencies-signup                  -45 B  (-0.1%)      -17 B  (-0.1%)
plans                                    -44 B  (-0.0%)     -159 B  (-0.0%)
purchase-product                         -42 B  (-0.0%)      -22 B  (-0.1%)
domain-user-transfer-flow                -38 B  (-0.0%)      -17 B  (-0.0%)
videopress-flow                          -37 B  (-0.0%)      -72 B  (-0.0%)
copy-site-flow                           +36 B  (+0.0%)      -56 B  (-0.0%)
podcasts-flow                            +25 B  (+0.0%)      -35 B  (-0.0%)
patterns                                 +20 B  (+0.0%)      -18 B  (-0.0%)
newsletter-post-setup-flow               +20 B  (+0.0%)      -19 B  (-0.1%)
link-in-bio-post-setup-flow              +20 B  (+0.0%)      -18 B  (-0.1%)
domain-connect-authorize                 -14 B  (-0.1%)       -7 B  (-0.2%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~942 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-design-blocks                                                               -707 B  (-0.0%)     -388 B  (-0.1%)
async-load-design                                                                      -588 B  (-0.0%)     -301 B  (-0.1%)
async-load-design-playground                                                           -569 B  (-0.0%)     -251 B  (-0.1%)
async-load-calypso-post-editor-editor-media-modal                                      -481 B  (-0.0%)     -265 B  (-0.1%)
async-load-calypso-post-editor-media-modal                                             -391 B  (-0.0%)     -231 B  (-0.1%)
async-load-calypso-components-web-preview-component                                    -181 B  (-0.0%)     -178 B  (-0.1%)
async-load-calypso-my-sites-checkout-modal                                             -174 B  (-0.0%)       -8 B  (-0.0%)
async-load-calypso-reader-site-subscriptions-manager-pending-subscriptions-ma...       -172 B  (-0.3%)      -51 B  (-0.3%)
async-load-calypso-reader-site-subscriptions-manager-comment-subscriptions-ma...       -172 B  (-0.3%)      -51 B  (-0.3%)
async-load-calypso-reader-search-stream                                                -172 B  (-0.2%)      -62 B  (-0.3%)
async-load-purchase-modal-wrapper                                                      -150 B  (-0.0%)     -632 B  (-0.6%)
async-load-calypso-blocks-editor-checkout-modal                                        -132 B  (-0.0%)      -17 B  (-0.0%)
async-load-signup-steps-user                                                           -105 B  (-0.1%)     -102 B  (-0.2%)
async-load-automattic-help-center                                                      +104 B  (+0.0%)      -38 B  (-0.0%)
async-load-calypso-reader-sidebar                                                       -92 B  (-0.0%)      -27 B  (-0.0%)
async-load-store-app-store-stats                                                        -91 B  (-0.0%)      -57 B  (-0.1%)
async-load-signup-steps-plans-theme-preselected                                         +78 B  (+0.0%)      -44 B  (-0.0%)
async-load-signup-steps-plans                                                           +78 B  (+0.0%)      -44 B  (-0.0%)
async-load-calypso-lib-account-settings-helper                                          -70 B  (-0.0%)      -45 B  (-0.1%)
async-load-signup-steps-clone-credentials                                               -64 B  (-0.1%)      -64 B  (-0.3%)
async-load-signup-steps-rewind-form-creds                                               -52 B  (-0.1%)      -44 B  (-0.2%)
async-load-signup-steps-website-content                                                 -50 B  (-0.1%)      -45 B  (-0.1%)
async-load-signup-steps-site                                                            -50 B  (-0.1%)      -35 B  (-0.3%)
async-load-signup-steps-p2-site                                                         -50 B  (-0.1%)      -37 B  (-0.2%)
async-load-signup-steps-emails                                                          -49 B  (-0.1%)      -38 B  (-0.2%)
async-load-store-app-store-stats-listview                                               -48 B  (-0.0%)      -26 B  (-0.0%)
async-load-signup-steps-website-content-section-types                                   -44 B  (-0.1%)      -21 B  (-0.1%)
async-load-calypso-components-sites-popover                                             -43 B  (-0.1%)      -24 B  (-0.1%)
async-load-calypso-my-sites-current-site-notice                                         -42 B  (-0.1%)      -11 B  (-0.1%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                                 -42 B  (-0.1%)      -17 B  (-0.1%)
async-load-calypso-blocks-jitm-templates-notice                                         -42 B  (-0.1%)      -14 B  (-0.1%)
async-load-calypso-blocks-jitm-templates-default                                        -42 B  (-0.1%)      -15 B  (-0.1%)
async-load-calypso-layout-community-translator                                          -40 B  (-0.1%)      -21 B  (-0.3%)
async-load-calypso-jetpack-cloud-sections-sidebar-navigation-manage-selected-...        -40 B  (-0.0%)      -37 B  (-0.1%)
async-load-calypso-components-jetpack-portal-nav                                        -40 B  (-0.1%)      -44 B  (-0.3%)
async-load-signup-steps-site-picker                                                     -39 B  (-0.0%)      -32 B  (-0.1%)
async-load-signup-steps-difm-site-picker                                                -39 B  (-0.0%)      -39 B  (-0.1%)
async-load-signup-steps-site-options                                                    -32 B  (-0.1%)      -43 B  (-0.3%)
async-load-signup-steps-clone-point                                                     -32 B  (-0.0%)      -42 B  (-0.1%)
async-load-masterbar-launchpad-navigator                                                -30 B  (-0.1%)      -14 B  (-0.2%)
async-load-calypso-reader-list-manage                                                   -30 B  (-0.1%)      -10 B  (-0.1%)
async-load-calypso-notifications                                                        +28 B  (+0.0%)       -3 B  (-0.0%)
async-load-signup-steps-social-profiles                                                 -26 B  (-0.1%)      -45 B  (-0.5%)
async-load-signup-steps-new-user-survey                                                 -26 B  (-0.1%)      -29 B  (-0.3%)
async-load-signup-steps-domains                                                         -26 B  (-0.0%)      -77 B  (-0.0%)
async-load-automattic-design-preview                                                    -26 B  (-0.0%)      -33 B  (-0.0%)
async-load-design-wordpress-components-gallery                                          -24 B  (-0.0%)       -8 B  (-0.0%)
async-load-calypso-my-sites-site-settings-seo-settings-form                             -21 B  (-0.0%)      -20 B  (-0.0%)
async-load-signup-steps-store-features                                                  -20 B  (-0.0%)      -31 B  (-0.2%)
async-load-signup-steps-intent                                                          -20 B  (-0.0%)      -27 B  (-0.2%)
async-load-signup-steps-clone-destination                                               -20 B  (-0.1%)      -38 B  (-0.4%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        +20 B  (+0.0%)      -31 B  (-0.0%)
async-load-signup-steps-page-picker                                                     +18 B  (+0.0%)      -34 B  (-0.0%)
async-load-calypso-my-sites-stats-pages-insights                                        +18 B  (+0.0%)       +3 B  (+0.0%)
async-load-calypso-blocks-jitm-templates-home-task                                      -18 B  (-0.1%)       -8 B  (-0.1%)
async-load-calypso-blocks-login-two-factor-authentication-two-factor-content            -16 B  (-0.1%)       -9 B  (-0.2%)
async-load-signup-steps-woocommerce-install-step-store-address                          -14 B  (-0.0%)      -33 B  (-0.2%)
async-load-signup-steps-starting-point                                                  -14 B  (-0.0%)      -29 B  (-0.2%)
async-load-signup-steps-site-or-domain                                                  -14 B  (-0.0%)      -30 B  (-0.2%)
async-load-signup-steps-p2-join-workspace                                               -14 B  (-0.0%)      -29 B  (-0.3%)
async-load-signup-steps-p2-complete-profile                                             -14 B  (-0.0%)      -47 B  (-0.2%)
async-load-signup-steps-new-or-existing-site                                            -14 B  (-0.0%)      -22 B  (-0.1%)
async-load-calypso-my-sites-stats-pages-subscribers                                     -14 B  (-0.0%)      -28 B  (-0.1%)
async-load-signup-steps-theme-selection                                                 -12 B  (-0.0%)      -32 B  (-0.0%)
async-load-signup-steps-new-user-survey-components                                      -12 B  (-0.3%)      -14 B  (-1.0%)
async-load-calypso-layout-masterbar-drafts-popover                                      -12 B  (-0.0%)       +2 B  (+0.0%)
async-load-calypso-layout-masterbar-checkout                                            -12 B  (-0.0%)       +3 B  (+0.0%)
async-load-calypso-components-global-notices                                            -12 B  (-0.2%)       -7 B  (-0.4%)
async-load-calypso-blocks-upload-drop-zone                                              -12 B  (-0.1%)       -6 B  (-0.2%)
async-load-automattic-design-carousel                                                   -12 B  (-0.0%)      -10 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• command-palette-wp-admin
• editing-toolkit
• happy-blocks
• notifications
• o2-blocks
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug try/clsx on your sandbox.

[tyxla]

@jsnajdr and the rest of @Automattic/team-calypso - do you feel like this is worth moving forward with?

[gabrielcaires]

@jsnajdr and the rest of @Automattic/team-calypso - do you feel like this is worth moving forward with?

Can you add a link to the discussion?

Is it possible, at least temporally, to use a webpack alias to replace the modules, so we can easily test and revert if necessary?

[tyxla]

Can you add a link to the discussion?

Sure, it was a Slack discussion though: p1713950904813489-slack-C7YPUHBB2

Is it possible, at least temporally, to use a webpack alias to replace the modules, so we can easily test and revert if necessary?

It's definitely possible, although I'm not convinced is necessary. Why do you think we need it?

[DaniGuardiola]

lgtm

[tyxla]

I'll wait until we make the decision to land it in Gutenberg first. I'm not worried about merge conflicts - this PR took like a few minutes to create, so it will be painless to redo it if necessary.

[DaniGuardiola]

@tyxla FYI the change has landed in Gutenberg so I think we can go ahead and get this PR updated and merged: WordPress/gutenberg#61138

[tyxla]

@tyxla FYI the change has landed in Gutenberg so I think we can go ahead and get this PR updated and merged: WordPress/gutenberg#61138

That's mostly true, but we'll need to wait a bit more: the clsx update will land in the next version of the @wordpress packages (I just updated to the latest versions in #90243 and they still use classnames), and after updating to that, I'll refresh this PR again and move forward with the clsx change.