chore: move rc-util to @rc-componet/util and move classnames to clsx

docs/examples/components/Button.tsx

@@ -1,12 +1,6 @@
-import type {
-  CSSInterpolation,
-  CSSObject} from '@ant-design/cssinjs';
-import {
-  unit,
-  useCSSVarRegister,
-  useStyleRegister,
-} from '@ant-design/cssinjs';
-import classNames from 'classnames';
+import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import { unit, useCSSVarRegister, useStyleRegister } from '@ant-design/cssinjs';
+import { clsx } from 'clsx';
 import React from 'react';
 import type { DerivativeToken } from './theme';
 import { useToken } from './theme';
@@ -166,7 +160,7 @@ const Button = ({ className, type, ...restProps }: ButtonProps) => {
 
   return (
     <button
-      className={classNames(prefixCls, typeCls, hashId, className, cssVarKey)}
+      className={clsx(prefixCls, typeCls, hashId, className, cssVarKey)}
       {...restProps}
     />
   );

docs/examples/components/Spin.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import type { DerivativeToken } from './theme';
 import { useToken } from './theme';
@@ -41,14 +41,11 @@ const Spin = ({ className, ...restProps }: SpinProps) => {
   const [theme, token, hashId] = useToken();
 
   // 全局注册，内部会做缓存优化
-  useStyleRegister(
-    { theme, token, hashId, path: [prefixCls] },
-    () => [genSpinStyle(prefixCls, token)],
-  );
-
-  return (
-    <div className={classNames(prefixCls, hashId, className)} {...restProps} />
-  );
+  useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+    genSpinStyle(prefixCls, token),
+  ]);
+
+  return <div className={clsx(prefixCls, hashId, className)} {...restProps} />;
 };
 
 export default Spin;

docs/examples/diff-salt.tsx

@@ -1,6 +1,6 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import type { DerivativeToken } from './components/theme';
 import { DesignTokenContext, useToken } from './components/theme';
@@ -49,10 +49,7 @@ const genComponent = (genStyle: typeof genStyle1) => {
     ]);
 
     return (
-      <div
-        className={classNames(prefixCls, hashId, className)}
-        {...restProps}
-      />
+      <div className={clsx(prefixCls, hashId, className)} {...restProps} />
     );
   };
 };

docs/examples/layer.tsx

@@ -1,5 +1,5 @@
 import { StyleProvider, Theme, useStyleRegister } from '@ant-design/cssinjs';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 
 const theme = new Theme([() => ({})]);
@@ -49,7 +49,7 @@ const Div = ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
     }),
   );
 
-  return <div className={classNames(className, 'layer-div')} {...rest} />;
+  return <div className={clsx(className, 'layer-div')} {...rest} />;
 };
 
 export default function App() {

package.json

@@ -45,9 +45,9 @@
     "@babel/runtime": "^7.11.1",
     "@emotion/hash": "^0.8.0",
     "@emotion/unitless": "^0.7.5",
-    "classnames": "^2.3.1",
+    "@rc-component/util": "^1.4.0",
+    "clsx": "^2.1.1",
     "csstype": "^3.1.3",
-    "rc-util": "^5.35.0",
     "stylis": "^4.3.4"
   },
   "devDependencies": {
@@ -56,7 +56,6 @@
     "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^14.0.0",
-    "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.11",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

src/StyleContext.tsx

@@ -1,5 +1,5 @@
-import useMemo from 'rc-util/lib/hooks/useMemo';
-import isEqual from 'rc-util/lib/isEqual';
+import useMemo from '@rc-component/util/lib/hooks/useMemo';
+import isEqual from '@rc-component/util/lib/isEqual';
 import * as React from 'react';
 import CacheEntity from './Cache';
 import type { Linter } from './linters/interface';

src/hooks/useCSSVarRegister.ts

@@ -1,4 +1,4 @@
-import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
+import { removeCSS, updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
 import { useContext } from 'react';
 import StyleContext, {
   ATTR_MARK,
@@ -101,7 +101,7 @@ export const extract: ExtractStyle<CSSVarCacheValue<any>> = (
   const order = -999;
 
   // ====================== Style ======================
-  // Used for rc-util
+  // Used for @rc-component/util
   const sharedAttrs = {
     'data-rc-order': 'prependQueue',
     'data-rc-priority': `${order}`,

src/hooks/useCacheToken.tsx

@@ -1,5 +1,5 @@
 import hash from '@emotion/hash';
-import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
+import { updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
 import { useContext } from 'react';
 import StyleContext, {
   ATTR_MARK,
@@ -96,7 +96,7 @@ function cleanTokenStyle(tokenKey: string, instanceId: string) {
   const cleanableKeyList = new Set<string>();
   tokenKeys.forEach((value, key) => {
     if (value <= 0) cleanableKeyList.add(key);
-  })
+  });
 
   // Should keep tokens under threshold for not to insert style too often
   if (tokenKeys.size - cleanableKeyList.size > TOKEN_THRESHOLD) {
@@ -252,7 +252,7 @@ export const extract: ExtractStyle<TokenCacheValue<any>> = (
   const order = -999;
 
   // ====================== Style ======================
-  // Used for rc-util
+  // Used for @rc-component/util
   const sharedAttrs = {
     'data-rc-order': 'prependQueue',
     'data-rc-priority': `${order}`,

src/hooks/useEffectCleanupRegister.ts

@@ -1,6 +1,6 @@
-import { warning } from 'rc-util/lib/warning';
-import { useEffect } from 'react';
+import { warning } from '@rc-component/util/lib/warning';
 import type { DependencyList } from 'react';
+import { useEffect } from 'react';
 
 // DO NOT register functions in useEffect cleanup function, or functions that registered will never be called.
 const useEffectCleanupRegister = (deps?: DependencyList) => {

src/hooks/useStyleRegister.tsx

@@ -1,6 +1,6 @@
 import hash from '@emotion/hash';
+import { removeCSS, updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
 import type * as CSS from 'csstype';
-import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 import * as React from 'react';
 // @ts-ignore
 import unitless from '@emotion/unitless';
@@ -357,8 +357,6 @@ export function uniqueHash(path: (string | number)[], styleStr: string) {
   return hash(`${path.join('%')}${styleStr}`);
 }
 
-
-
 export const STYLE_PREFIX = 'style';
 
 type StyleCacheValue = [
@@ -536,7 +534,7 @@ export const extract: ExtractStyle<StyleCacheValue> = (
   let keyStyleText = styleStr;
 
   // ====================== Share ======================
-  // Used for rc-util
+  // Used for @rc-component/util
   const sharedAttrs = {
     'data-rc-order': 'prependQueue',
     'data-rc-priority': `${order}`,

src/linters/utils.ts

@@ -1,4 +1,4 @@
-import devWarning from 'rc-util/lib/warning';
+import devWarning from '@rc-component/util/lib/warning';
 import type { LinterInfo } from './interface';
 
 export function lintWarning(message: string, info: LinterInfo) {

src/theme/Theme.ts

@@ -1,4 +1,4 @@
-import { warning } from 'rc-util/lib/warning';
+import { warning } from '@rc-component/util/lib/warning';
 import type { DerivativeFunc, TokenType } from './interface';
 
 let uuid = 0;

src/util/cacheMapUtil.ts

@@ -1,4 +1,4 @@
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
 import { ATTR_MARK } from '../StyleContext';
 
 export const ATTR_CACHE_MAP = 'data-ant-cssinjs-cache-path';

src/util/index.ts

@@ -1,8 +1,8 @@
 import hash from '@emotion/hash';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
-import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
-import { ATTR_MARK, ATTR_TOKEN } from '../StyleContext';
+import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
+import { removeCSS, updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
 import type { HashPriority } from '../StyleContext';
+import { ATTR_MARK, ATTR_TOKEN } from '../StyleContext';
 import { Theme } from '../theme';
 
 // Create a cache for memo concat

tests/css-variables.spec.tsx

@@ -1,6 +1,6 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import { render } from '@testing-library/react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 import { expect } from 'vitest';
@@ -72,8 +72,8 @@ const DesignTokenContext = React.createContext<DesignTokenProviderProps>({
   token: defaultDesignToken,
   hashed: false,
   cssVar: {
-    key: 'css-var-root'
-  }
+    key: 'css-var-root',
+  },
 });
 
 const DesignTokenProvider: React.FC<
@@ -190,7 +190,7 @@ const useStyle = () => {
 const Box = (props: { className?: string }) => {
   const cls = useStyle();
 
-  return <div className={classNames(cls, 'box', props.className)} />;
+  return <div className={clsx(cls, 'box', props.className)} />;
 };
 
 describe('CSS Variables', () => {
@@ -338,7 +338,7 @@ describe('CSS Variables', () => {
             key: 'apple',
             prefix: 'app',
           },
-          hashed: true
+          hashed: true,
         }}
       >
         <Box className="target" />
@@ -362,7 +362,7 @@ describe('CSS Variables', () => {
             key: 'apple',
             prefix: 'bank',
           },
-          hashed: true
+          hashed: true,
         }}
       >
         <Box className="target" />

tests/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { ReactElement, ReactNode } from 'react';
 import * as React from 'react';
 import { StrictMode } from 'react';
@@ -237,7 +237,7 @@ describe('csssinjs', () => {
         genHashStyle(),
       ]);
 
-      return <div className={classNames('box', hashId)} />;
+      return <div className={clsx('box', hashId)} />;
     };
 
     const { unmount } = render(<Holder />);
@@ -337,7 +337,7 @@ describe('csssinjs', () => {
         () => [genDemoStyle(token)],
       );
 
-      return <div className={classNames('box', hashId)} />;
+      return <div className={clsx('box', hashId)} />;
     };
 
     const { rerender } = render(<Demo />);
@@ -409,7 +409,7 @@ describe('csssinjs', () => {
         () => [{ '&': genStyle1(token) }, { '': genStyle2() }],
       );
 
-      return <div className={classNames('box')} />;
+      return <div className={clsx('box')} />;
     };
 
     render(<Demo />);
@@ -532,7 +532,7 @@ describe('csssinjs', () => {
 
       return (
         <StyleProvider cache={cache}>
-          <div className={classNames('box', hashId)} />
+          <div className={clsx('box', hashId)} />
         </StyleProvider>
       );
     };
@@ -578,7 +578,7 @@ describe('csssinjs', () => {
         () => [genDemoStyle()],
       );
 
-      return <div className={classNames('box', hashId)} />;
+      return <div className={clsx('box', hashId)} />;
     };
 
     render(<Demo />);
@@ -606,7 +606,7 @@ describe('csssinjs', () => {
         () => [genDemoStyle()],
       );
 
-      return <div className={classNames('box', hashId)} />;
+      return <div className={clsx('box', hashId)} />;
     };
 
     render(<Demo />);
@@ -653,7 +653,7 @@ describe('csssinjs', () => {
         () => [genDemoStyle(token)],
       );
 
-      return <div className={classNames('box', hashId)} />;
+      return <div className={clsx('box', hashId)} />;
     };
 
     const { rerender } = render(<Demo myToken="test" />);
@@ -727,7 +727,7 @@ describe('csssinjs', () => {
         return (
           <>
             <Style token={token} hashId={hashId} />
-            <div className={classNames('box', hashId)}>{children}</div>
+            <div className={clsx('box', hashId)}>{children}</div>
           </>
         );
       };
@@ -807,7 +807,7 @@ describe('csssinjs', () => {
           }),
         );
 
-        return <div className={classNames('box', hashId)}>{children}</div>;
+        return <div className={clsx('box', hashId)}>{children}</div>;
       };
 
       const { rerender } = render(wrapper(<Demo myToken="token1" />));
@@ -857,7 +857,7 @@ describe('csssinjs', () => {
         genHashStyle(),
       ]);
 
-      return <div className={classNames('box', hashId)} />;
+      return <div className={clsx('box', hashId)} />;
     };
 
     const { unmount } = render(<Holder />);
@@ -905,7 +905,7 @@ describe('csssinjs', () => {
         () => [genHashStyle(token)],
       );
 
-      return <div className={classNames('box', hashId)} />;
+      return <div className={clsx('box', hashId)} />;
     };
 
     const { rerender } = render(<Demo salt="test" />);