✨ feat: support antd v6 cssVar

BREAKING CHANGES: bump peerDependencies antd >= v6

Author: arvinxx

docs/demos/api/createStyles/default.tsx

@@ -6,29 +6,29 @@ import { SmileOutlined } from '@ant-design/icons';
 import { Button, Space } from 'antd';
 import { createStyles } from 'antd-style';
 
-const useStyles = createStyles(({ token, css, cx }) => {
+const useStyles = createStyles(({ cssVar, css, cx }) => {
   const commonCard = css`
-    border-radius: ${token.borderRadiusLG}px;
-    padding: ${token.paddingLG}px;
+    border-radius: ${cssVar.borderRadiusLG};
+    padding: ${cssVar.paddingLG};
   `;
 
   return {
     container: css`
-      background-color: ${token.colorBgLayout};
+      background-color: ${cssVar.colorBgLayout};
       padding: 24px;
     `,
 
     defaultCard: css`
       ${commonCard};
-      background: ${token.colorBgContainer};
-      color: ${token.colorText};
+      background: ${cssVar.colorBgContainer};
+      color: ${cssVar.colorText};
     `,
 
     primaryCard: cx(
       commonCard,
       css`
-        background: ${token.colorPrimary};
-        color: ${token.colorTextLightSolid};
+        background: ${cssVar.colorPrimary};
+        color: ${cssVar.colorTextLightSolid};
       `,
     ),
   };

package.json

@@ -96,7 +96,7 @@
     "@types/testing-library__jest-dom": "^5.14.9",
     "@umijs/lint": "^4.1.5",
     "@vitest/coverage-v8": "0.34.6",
-    "antd": "^5.21.1",
+    "antd": "^6.0.0-alpha.1",
     "babel-plugin-antd-style": "^1.0.4",
     "chalk": "^4.1.2",
     "classnames": "^2.5.1",
@@ -136,7 +136,7 @@
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
-    "antd": ">=5.8.1",
+    "antd": ">= 6.0.0-alpha.1",
     "react": ">=18"
   },
   "publishConfig": {

src/factories/createStyles/index.ts

@@ -57,7 +57,8 @@ export const createStylesFactory =
 
         // 函数场景
         if (styleOrGetStyle instanceof Function) {
-          const { stylish, appearance, isDarkMode, prefixCls, iconPrefixCls, ...token } = theme;
+          const { stylish, appearance, isDarkMode, prefixCls, iconPrefixCls, cssVar, ...token } =
+            theme;
 
           // 创建响应式断点选择器的工具函数
           // @ts-ignore
@@ -74,6 +75,7 @@ export const createStylesFactory =
               isDarkMode,
               prefixCls,
               iconPrefixCls,
+              cssVar,
               // 工具函数们
               cx,
               css: serializeCSS,

src/factories/createStyles/types.ts

@@ -16,6 +16,7 @@ export interface CreateStylesUtils extends CommonStyleUtils {
    * 包含 antd 的 token 和所有自定义 token
    */
   token: FullToken;
+  cssVar: FullToken;
   stylish: FullStylish;
   /**
    * ThemeProvider 下当前的主题模式

src/hooks/useAntdTheme.ts

@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 
 import { AntdTheme } from '@/types';
+import { theme } from 'antd';
 import { useAntdStylish } from './useAntdStylish';
-import { useAntdToken } from './useAntdToken';
 
 export const useAntdTheme = (): AntdTheme => {
-  const token = useAntdToken();
+  const { token, cssVar } = theme.useToken();
   const stylish = useAntdStylish();
 
-  return useMemo(() => ({ ...token, stylish }), [token, stylish]);
+  return useMemo(() => ({ ...token, stylish, cssVar }), [token, stylish, cssVar]);
 };