perf: uninstall classnames, install clsx (#583)

li-jia-nan · web-flow · commit 081fcf6b7cd2 · 2025-09-28T14:43:42.000+08:00
* perf: uninstall classnames, install clsx

* perf: uninstall classnames, install clsx
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ es
 coverage
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 bun.lockb
 .vscode
 
diff --git a/package.json b/package.json
@@ -45,14 +45,13 @@
     "@rc-component/portal": "^2.0.0",
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/util": "^1.2.1",
-    "classnames": "^2.3.2"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.0",
     "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^16.0.0",
-    "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.2",
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.2",
diff --git a/src/Popup/Arrow.tsx b/src/Popup/Arrow.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
 
@@ -57,7 +57,7 @@ export default function Arrow(props: ArrowProps) {
   return (
     <div
       ref={arrowRef}
-      className={classNames(`${prefixCls}-arrow`, className)}
+      className={clsx(`${prefixCls}-arrow`, className)}
       style={{ ...alignStyle, ...style }}
     >
       {content}
diff --git a/src/Popup/Mask.tsx b/src/Popup/Mask.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import CSSMotion from '@rc-component/motion';
 import * as React from 'react';
@@ -36,7 +36,7 @@ export default function Mask(props: MaskProps) {
       {({ className }) => (
         <div
           style={{ zIndex }}
-          className={classNames(
+          className={clsx(
             `${prefixCls}-mask`,
             mobile && `${prefixCls}-mobile-mask`,
             className,
diff --git a/src/Popup/index.tsx b/src/Popup/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import CSSMotion from '@rc-component/motion';
 import ResizeObserver, {
@@ -266,7 +266,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
                 { className: motionClassName, style: motionStyle },
                 motionRef,
               ) => {
-                const cls = classNames(prefixCls, motionClassName, className, {
+                const cls = clsx(prefixCls, motionClassName, className, {
                   [`${prefixCls}-mobile`]: isMobile,
                 });
 
diff --git a/src/UniqueProvider/UniqueContainer.tsx b/src/UniqueProvider/UniqueContainer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import useOffsetStyle from '../hooks/useOffsetStyle';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
 import type { CSSMotionProps } from '@rc-component/motion';
 import type { AlignType, ArrowPos } from '../interface';
@@ -86,9 +86,12 @@ const UniqueContainer = (props: UniqueContainerProps) => {
       }}
     >
       {({ className: motionClassName, style: motionStyle }) => {
-        const cls = classNames(containerCls, motionClassName, uniqueContainerClassName, {
-          [`${containerCls}-visible`]: motionVisible,
-        });
+        const cls = clsx(
+          containerCls,
+          motionClassName,
+          uniqueContainerClassName,
+          { [`${containerCls}-visible`]: motionVisible },
+        );
 
         return (
           <div
diff --git a/src/UniqueProvider/index.tsx b/src/UniqueProvider/index.tsx
@@ -13,7 +13,7 @@ import { useEvent } from '@rc-component/util';
 import useTargetState from './useTargetState';
 import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 import UniqueContainer from './UniqueContainer';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { getAlignPopupClassName } from '../util';
 
 export interface UniqueProviderProps {
@@ -128,7 +128,7 @@ const UniqueProvider = ({
       false, // alignPoint is false for UniqueProvider
     );
 
-    return classNames(
+    return clsx(
       baseClassName,
       mergedOptions.getPopupClassNameFromAlign?.(alignInfo),
     );
@@ -186,7 +186,7 @@ const UniqueProvider = ({
             portal={Portal}
             prefixCls={prefixCls}
             popup={mergedOptions.popup}
-            className={classNames(
+            className={clsx(
               mergedOptions.popupClassName,
               alignedClassName,
               `${prefixCls}-unique-controlled`,
@@ -239,7 +239,7 @@ const UniqueProvider = ({
               }}
               popupSize={popupSize}
               motion={mergedOptions.popupMotion}
-              uniqueContainerClassName={classNames(
+              uniqueContainerClassName={clsx(
                 mergedOptions.uniqueContainerClassName,
                 alignedClassName,
               )}
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,5 @@
 import Portal from '@rc-component/portal';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import ResizeObserver from '@rc-component/resize-observer';
 import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
@@ -511,7 +511,7 @@ export function generateTrigger(
         alignPoint,
       );
 
-      return classNames(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
+      return clsx(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
     }, [
       alignInfo,
       getPopupClassNameFromAlign,
@@ -804,10 +804,7 @@ export function generateTrigger(
               ref={setPopupRef}
               prefixCls={prefixCls}
               popup={popup}
-              className={classNames(
-                popupClassName,
-                !isMobile && alignedClassName,
-              )}
+              className={clsx(popupClassName, !isMobile && alignedClassName)}
               style={popupStyle}
               target={targetEle}
               onMouseEnter={onPopupMouseEnter}
diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Trigger, { UniqueProvider, type UniqueProviderProps } from '../src';
 import { awaitFakeTimer } from './util';
 import type { TriggerProps } from '../src';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 // Mock UniqueContainer to check if open props changed
 global.openChangeLog = [];
@@ -185,21 +185,30 @@ describe('Trigger.Unique', () => {
   });
 
   it('should apply uniqueContainerClassName to UniqueContainer component', async () => {
-    await setupAndOpenPopup({ uniqueContainerClassName: 'custom-container-class' });
+    await setupAndOpenPopup({
+      uniqueContainerClassName: 'custom-container-class',
+    });
 
     // Check that UniqueContainer has the custom container className
-    const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container');
+    const uniqueContainer = document.querySelector(
+      '.rc-trigger-popup-unique-container',
+    );
     expect(uniqueContainer).toBeTruthy();
     expect(uniqueContainer.className).toContain('custom-container-class');
   });
 
   it('should apply uniqueContainerStyle to UniqueContainer component', async () => {
     await setupAndOpenPopup({
-      uniqueContainerStyle: { backgroundColor: 'red', border: '1px solid blue' },
+      uniqueContainerStyle: {
+        backgroundColor: 'red',
+        border: '1px solid blue',
+      },
     });
 
     // Check that UniqueContainer has the custom container style
-    const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container');
+    const uniqueContainer = document.querySelector(
+      '.rc-trigger-popup-unique-container',
+    );
     expect(uniqueContainer).toBeTruthy();
     expect(uniqueContainer).toHaveStyle({
       backgroundColor: 'red',
@@ -211,7 +220,9 @@ describe('Trigger.Unique', () => {
     await setupAndOpenPopup();
 
     // Check that UniqueContainer exists but does not have custom container className
-    const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container');
+    const uniqueContainer = document.querySelector(
+      '.rc-trigger-popup-unique-container',
+    );
     expect(uniqueContainer).toBeTruthy();
     expect(uniqueContainer.className).not.toContain('undefined');
   });
@@ -246,12 +257,14 @@ describe('Trigger.Unique', () => {
     );
 
     expect(document.querySelector('.rc-trigger-popup')).toHaveClass('bamboo');
-    expect(document.querySelector('.rc-trigger-popup-unique-container')).toHaveClass(
-      'bamboo',
-    );
+    expect(
+      document.querySelector('.rc-trigger-popup-unique-container'),
+    ).toHaveClass('bamboo');
 
     // Check that arrow position CSS variables are set
-    const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container');
+    const uniqueContainer = document.querySelector(
+      '.rc-trigger-popup-unique-container',
+    );
     const computedStyle = getComputedStyle(uniqueContainer);
     expect(computedStyle.getPropertyValue('--arrow-x')).not.toBe('');
     expect(computedStyle.getPropertyValue('--arrow-y')).not.toBe('');
@@ -262,10 +275,7 @@ describe('Trigger.Unique', () => {
       options,
     ) => ({
       ...options,
-      popupClassName: classNames(
-        options.popupClassName,
-        'custom-post-options-class',
-      ),
+      popupClassName: clsx(options.popupClassName, 'custom-post-options-class'),
     });
 
     render(
@@ -293,7 +303,7 @@ describe('Trigger.Unique', () => {
     // Mock useAlign to return our mock onAlign function
     const useAlignModule = require('../src/hooks/useAlign');
     const originalUseAlign = useAlignModule.default;
-    
+
     jest.spyOn(useAlignModule, 'default').mockImplementation((...args) => {
       const originalResult = originalUseAlign(...args);
       // Replace onAlign with our mock
@@ -319,7 +329,7 @@ describe('Trigger.Unique', () => {
 
       return (
         <div>
-          <button 
+          <button
             className="switch-trigger-btn"
             onClick={() => {
               // Switch which trigger is open - this changes the target
