chore: rm antd internal func

README.md

@@ -2,8 +2,7 @@
 
 ## About
 
-🚨 Sample code in `styles/` use antd internal `genComponentStyleHook` to generate style hook.
-It's only to simplify the dependency of this repo which is **not recommend** to use internal API in real world.
+Sample code in `styles/styleUtil` copy the antd `genComponentStyleHook` function.
 You can use any other css-in-js solution to generate style hook like `Emotion` or `styled-components`.
 
 ## Usage

package.json

@@ -40,7 +40,7 @@
     "@types/react-dom": "^16.9.0"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.16.1",
+    "@ant-design/cssinjs": "^1.17.0",
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.6.0",
     "classnames": "^2.3.2",

src/Text/style.ts

@@ -2,7 +2,7 @@ import {
   type GenerateStyle,
   genComponentStyleHook,
   type FullToken,
-} from 'antd/es/theme/internal';
+} from '../styles/styleUtil';
 
 import { background } from '../styles/gradientUtil';
 import { DOT_PREFIX } from '../constant';

src/styles/buttonStyle.ts

@@ -2,7 +2,7 @@ import {
   type GenerateStyle,
   genComponentStyleHook,
   type FullToken,
-} from 'antd/es/theme/internal';
+} from './styleUtil';
 
 import {
   getAnimationBackground,

src/styles/cardStyle.ts

@@ -2,7 +2,7 @@ import {
   type GenerateStyle,
   genComponentStyleHook,
   type FullToken,
-} from 'antd/es/theme/internal';
+} from './styleUtil';
 
 import { getBorderStyle } from './gradientUtil';
 import { DOT_PREFIX } from '../constant';

src/styles/checkboxStyle.ts

@@ -2,7 +2,7 @@ import {
   type GenerateStyle,
   genComponentStyleHook,
   type FullToken,
-} from 'antd/es/theme/internal';
+} from './styleUtil';
 
 import { background, getBorderStyle } from './gradientUtil';
 import { DOT_PREFIX } from '../constant';

src/styles/dividerStyle.ts

@@ -2,7 +2,7 @@ import {
   type GenerateStyle,
   genComponentStyleHook,
   type FullToken,
-} from 'antd/es/theme/internal';
+} from './styleUtil';
 
 import { background } from './gradientUtil';
 import { DOT_PREFIX } from '../constant';

src/styles/radioStyle.ts

@@ -1,4 +1,4 @@
-import { genComponentStyleHook } from 'antd/es/theme/internal';
+import { genComponentStyleHook } from './styleUtil';
 
 import { genStyle } from './checkboxStyle';
 

src/styles/spinStyle.ts

@@ -2,7 +2,7 @@ import {
   type GenerateStyle,
   genComponentStyleHook,
   type FullToken,
-} from 'antd/es/theme/internal';
+} from './styleUtil';
 
 import { background } from './gradientUtil';
 import { DOT_PREFIX } from '../constant';

src/styles/styleUtil.ts

@@ -0,0 +1,51 @@
+export * from 'antd/es/theme/internal';
+import { theme as Theme, ConfigProvider, GlobalToken } from 'antd';
+import { CSSInterpolation, useStyleRegister } from '@ant-design/cssinjs';
+import {
+  FullToken,
+  OverrideComponent,
+} from 'antd/es/theme/util/genComponentStyleHook';
+import React from 'react';
+
+// Copy from antd `genComponentStyleHook`, you can use any other CSS-in-JS library instead.
+export function genComponentStyleHook<ComponentName extends OverrideComponent>(
+  componentNames: [ComponentName, string],
+  styleFn: (token: GlobalToken) => CSSInterpolation,
+) {
+  const concatComponent = componentNames.join('-');
+
+  return (prefixCls: string): void => {
+    const { theme, token, hashId } = Theme.useToken();
+    const { getPrefixCls, iconPrefixCls } = React.useContext(
+      ConfigProvider.ConfigContext,
+    );
+    const rootPrefixCls = getPrefixCls();
+
+    // Shared config
+    const sharedConfig: Omit<Parameters<typeof useStyleRegister>[0], 'path'> = {
+      theme,
+      token,
+      hashId,
+    };
+
+    useStyleRegister(
+      { ...sharedConfig, path: [concatComponent, prefixCls, iconPrefixCls] },
+      () => {
+        const componentCls = `.${prefixCls}`;
+
+        const mergedToken = {
+          ...token,
+          componentCls,
+          prefixCls,
+          iconCls: `.${iconPrefixCls}`,
+          antCls: `.${rootPrefixCls}`,
+        };
+
+        const styleInterpolation = styleFn(
+          mergedToken as any as FullToken<ComponentName>,
+        );
+        return styleInterpolation;
+      },
+    );
+  };
+}

src/styles/switchStyle.ts

@@ -2,7 +2,7 @@ import {
   type GenerateStyle,
   genComponentStyleHook,
   type FullToken,
-} from 'antd/es/theme/internal';
+} from './styleUtil';
 
 import { background } from './gradientUtil';
 import { DOT_PREFIX } from '../constant';

src/styles/tagStyle.ts

@@ -2,7 +2,7 @@ import {
   type GenerateStyle,
   genComponentStyleHook,
   type FullToken,
-} from 'antd/es/theme/internal';
+} from './styleUtil';
 
 import { getBackground, getBorderStyle } from './gradientUtil';