Skip to content

perf: uninstall classnames, install clsx #67

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.

Sign up for GitHub

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

Merged
li-jia-nan merged 2 commits into from
Sep 28, 2025
+48 −86
Merged

perf: uninstall classnames, install clsx #67

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e56c28
perf: uninstall classnames, install clsx
li-jia-nan Sep 27, 2025
30be981
perf: uninstall classnames, install clsx
li-jia-nan Sep 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ lib
es
yarn.lock
package-lock.json
pnpm-lock.yaml
coverage/
.doc

Expand Down
11 changes: 4 additions & 7 deletions docs/examples/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import classNames from 'classnames';
import { clsx } from 'clsx';
import CSSMotion from 'rc-motion';
import React from 'react';
import './basic.less';
Expand Down Expand Up @@ -164,7 +164,7 @@ class App extends React.Component<{}, DemoState> {
{({ style, className }, ref) => (
<Div
ref={ref}
className={classNames('demo-block', className)}
className={clsx('demo-block', className)}
style={style}
/>
)}
Expand All @@ -182,10 +182,7 @@ class App extends React.Component<{}, DemoState> {
onLeaveActive={this.styleGreen}
>
{({ style, className }) => (
<div
className={classNames('demo-block', className)}
style={style}
/>
<div className={clsx('demo-block', className)} style={style} />
)}
</CSSMotion>
</div>
Expand All @@ -209,7 +206,7 @@ class App extends React.Component<{}, DemoState> {
>
{({ style, className }) => (
<div
className={classNames('demo-block', className)}
className={clsx('demo-block', className)}
style={style}
/>
)}
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/deadline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import classNames from 'classnames';
import { clsx } from 'clsx';
import CSSMotion from 'rc-motion';
import React from 'react';
import './basic.less';
Expand Down Expand Up @@ -52,7 +52,7 @@ class App extends React.Component<{}, DemoState> {
{({ style, className }, ref) => (
<div
ref={ref}
className={classNames('demo-block', className)}
className={clsx('demo-block', className)}
style={style}
/>
)}
Expand Down
9 changes: 3 additions & 6 deletions docs/examples/list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import classNames from 'classnames';
import { clsx } from 'clsx';
import { CSSMotionList } from 'rc-motion';
import React from 'react';
import './list.less';
Expand Down Expand Up @@ -104,11 +104,8 @@ class App extends React.Component<{}, DemoState> {
{({ key, background, className, style }) => {
return (
<div
className={classNames('list-demo-block', className)}
style={{
...style,
background,
}}
className={clsx('list-demo-block', className)}
style={{ ...style, background }}
>
<span>{key}</span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import classNames from 'classnames';
import { clsx } from 'clsx';
import CSSMotion, { Provider } from 'rc-motion';
import React from 'react';
import './basic.less';
Expand Down Expand Up @@ -38,7 +38,7 @@ export default () => {
<>
<div
ref={ref}
className={classNames('demo-block', className)}
className={clsx('demo-block', className)}
style={style}
/>
<ul>
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/ssr.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import classNames from 'classnames';
import { clsx } from 'clsx';
import CSSMotion from 'rc-motion';
import { genCSSMotion } from 'rc-motion/es/CSSMotion';
import React from 'react';
Expand Down Expand Up @@ -27,7 +27,7 @@ const MotionAppear = ({ supportMotion }: MotionAppearProps) => {
{({ style, className }, ref) => (
<div
ref={ref}
className={classNames('demo-block', className)}
className={clsx('demo-block', className)}
style={style}
/>
)}
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,15 @@
},
"dependencies": {
"@rc-component/util": "^1.2.0",
"classnames": "^2.2.1"
"clsx": "^2.1.1"
},
"devDependencies": {
"@rc-component/father-plugin": "^2.0.1",
"@rc-component/np": "^1.0.3",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^15.0.7",
"@types/classnames": "^2.2.9",
"@types/jest": "^26.0.8",
"@types/node": "^24.5.2",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@umijs/fabric": "^2.0.8",
Expand Down
4 changes: 2 additions & 2 deletions src/CSSMotion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
import { getNodeRef, supportRef } from '@rc-component/util/lib/ref';
import classNames from 'classnames';
import { clsx } from 'clsx';
import * as React from 'react';
import { useRef } from 'react';
import { Context } from './context';
Expand Down Expand Up @@ -228,7 +228,7 @@ export function genCSSMotion(config: CSSMotionConfig) {
motionChildren = children(
{
...mergedProps,
className: classNames(getTransitionName(motionName, status), {
className: clsx(getTransitionName(motionName, status), {
[motionCls]: motionCls && statusSuffix,
[motionName as string]: typeof motionName === 'string',
}),
Expand Down
75 changes: 21 additions & 54 deletions tests/CSSMotion.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
react/prefer-stateless-function, react/no-multi-comp
*/
import { act, fireEvent, render } from '@testing-library/react';
import classNames from 'classnames';
import { clsx } from 'clsx';
import React from 'react';
import ReactDOM from 'react-dom';
import type { CSSMotionProps } from '../src';
Expand Down Expand Up @@ -94,7 +94,7 @@ describe('CSSMotion', () => {
return (
<div
style={style}
className={classNames('motion-box', className)}
className={clsx('motion-box', className)}
/>
);
}}
Expand Down Expand Up @@ -173,10 +173,7 @@ describe('CSSMotion', () => {
>
{({ style, className }) => {
return (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
);
}}
</CSSMotion>
Expand Down Expand Up @@ -219,10 +216,7 @@ describe('CSSMotion', () => {
const genMotion = (props?: CSSMotionProps) => (
<CSSMotion motionName="transition" visible {...props}>
{({ style, className }) => (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
);
Expand All @@ -248,10 +242,7 @@ describe('CSSMotion', () => {
const genMotion = (props?: CSSMotionProps) => (
<CSSMotion motionName="transition" {...props}>
{({ style, className }) => (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
);
Expand Down Expand Up @@ -307,7 +298,7 @@ describe('CSSMotion', () => {
<Component
ref={ref}
style={style}
className={classNames('motion-box', className)}
className={clsx('motion-box', className)}
/>
)}
</CSSMotion>,
Expand Down Expand Up @@ -362,10 +353,7 @@ describe('CSSMotion', () => {
motionLeave={true}
>
{({ style, className }) => (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
</React.StrictMode>
Expand Down Expand Up @@ -440,10 +428,7 @@ describe('CSSMotion', () => {
{...props}
>
{({ style, className }) => (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
);
Expand Down Expand Up @@ -481,7 +466,7 @@ describe('CSSMotion', () => {
const genMotion = (props?: CSSMotionProps) => (
<CSSMotion visible {...props}>
{({ style, className }) => (
<div style={style} className={classNames('motion-box', className)} />
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
);
Expand Down Expand Up @@ -513,10 +498,7 @@ describe('CSSMotion', () => {
visible={false}
>
{({ style, className }) => (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>,
);
Expand Down Expand Up @@ -547,7 +529,7 @@ describe('CSSMotion', () => {
onAppearPrepare={() => new Promise(() => {})}
>
{({ style, className }) => (
<div style={style} className={classNames('motion-box', className)} />
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>,
);
Expand Down Expand Up @@ -584,10 +566,7 @@ describe('CSSMotion', () => {
onAppearStart={onAppearStart}
>
{({ style, className }) => (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
</Provider>
Expand Down Expand Up @@ -617,7 +596,7 @@ describe('CSSMotion', () => {
const { container } = render(
<NoCSSTransition motionName="transition">
{({ style, className }) => (
<div style={style} className={classNames('motion-box', className)} />
<div style={style} className={clsx('motion-box', className)} />
)}
</NoCSSTransition>,
);
Expand All @@ -636,7 +615,7 @@ describe('CSSMotion', () => {
<div
ref={ref}
style={style}
className={classNames('motion-box', className)}
className={clsx('motion-box', className)}
/>
)}
</RefCSSMotion>,
Expand Down Expand Up @@ -704,10 +683,7 @@ describe('CSSMotion', () => {
motionName="bamboo"
>
{({ style, className }) => (
<Component
style={style}
className={classNames('motion-box', className)}
/>
<Component style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
);
Expand Down Expand Up @@ -747,7 +723,7 @@ describe('CSSMotion', () => {
const { container } = render(
<CSSMotion visible motionName="bamboo" onAppearPrepare={onAppearPrepare}>
{({ style, className }) => (
<div style={style} className={classNames('motion-box', className)} />
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>,
);
Expand Down Expand Up @@ -780,7 +756,7 @@ describe('CSSMotion', () => {
const genMotion = (props?: CSSMotionProps) => (
<CSSMotion forceRender motionName="bamboo" visible={false} {...props}>
{({ style, className }) => (
<div style={style} className={classNames('motion-box', className)} />
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
);
Expand All @@ -806,7 +782,7 @@ describe('CSSMotion', () => {
{...props}
>
{({ style, className }) => (
<div style={style} className={classNames('motion-box', className)} />
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
);
Expand Down Expand Up @@ -938,10 +914,7 @@ describe('CSSMotion', () => {
onVisibleChanged={onVisibleChanged}
>
{({ style, className }) => (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>,
);
Expand All @@ -964,10 +937,7 @@ describe('CSSMotion', () => {
onVisibleChanged={onVisibleChanged}
>
{({ style, className }) => (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>,
);
Expand All @@ -990,10 +960,7 @@ describe('CSSMotion', () => {
onVisibleChanged={onVisibleChanged}
>
{({ style, className }) => (
<div
style={style}
className={classNames('motion-box', className)}
/>
<div style={style} className={clsx('motion-box', className)} />
)}
</CSSMotion>
);
Expand Down
Loading
Loading