From cd838b093b8a8a1dcc79a9c48c57e722b1f6a1d6 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Thu, 24 Jul 2025 19:08:49 +0800 Subject: [PATCH 1/7] :sparkles: feat: support antd v6 cssVar BREAKING CHANGES: bump peerDependencies antd >= v6 --- docs/demos/api/createStyles/default.tsx | 16 ++++++++-------- package.json | 4 ++-- src/factories/createStyles/index.ts | 4 +++- src/factories/createStyles/types.ts | 1 + src/hooks/useAntdTheme.ts | 6 +++--- 5 files changed, 17 insertions(+), 14 deletions(-) diff --git a/docs/demos/api/createStyles/default.tsx b/docs/demos/api/createStyles/default.tsx index ca397f24..26f46f35 100644 --- a/docs/demos/api/createStyles/default.tsx +++ b/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}; `, ), }; diff --git a/package.json b/package.json index 76b7150c..045d51e3 100644 --- a/package.json +++ b/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": { diff --git a/src/factories/createStyles/index.ts b/src/factories/createStyles/index.ts index bc178f47..9400b5de 100644 --- a/src/factories/createStyles/index.ts +++ b/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, diff --git a/src/factories/createStyles/types.ts b/src/factories/createStyles/types.ts index 1e3d380f..c3a5482c 100644 --- a/src/factories/createStyles/types.ts +++ b/src/factories/createStyles/types.ts @@ -16,6 +16,7 @@ export interface CreateStylesUtils extends CommonStyleUtils { * 包含 antd 的 token 和所有自定义 token */ token: FullToken; + cssVar: FullToken; stylish: FullStylish; /** * ThemeProvider 下当前的主题模式 diff --git a/src/hooks/useAntdTheme.ts b/src/hooks/useAntdTheme.ts index 03109fd0..d9134b25 100644 --- a/src/hooks/useAntdTheme.ts +++ b/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]); }; From 35732f5d1ccb6dda9a230d31db8f32f2ab43d7c7 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Thu, 24 Jul 2025 20:12:10 +0800 Subject: [PATCH 2/7] :wrench: chore: bump the infra --- package.json | 7 ++++--- src/factories/createThemeProvider/ThemeSwitcher.test.tsx | 4 ++-- tests/components/__snapshots__/ThemeProvider.test.tsx.snap | 4 ++-- tests/functions/__snapshots__/createInstance.test.tsx.snap | 6 +++--- tests/functions/__snapshots__/createStyles.test.tsx.snap | 6 +++--- tests/functions/createGlobalStyle.test.tsx | 4 ++-- tests/functions/createStyles.test.tsx | 7 ++++--- tests/functions/extractStaticStyle.test.tsx | 4 +++- vitest.config.ts | 7 ++++--- 9 files changed, 27 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 045d51e3..d0dcc08a 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ ] }, "dependencies": { - "@ant-design/cssinjs": "^1.21.1", + "@ant-design/cssinjs": "^2.0.0-alpha.5", "@babel/runtime": "^7.24.1", "@emotion/cache": "^11.11.0", "@emotion/css": "^11.11.2", @@ -112,6 +112,7 @@ "framer-motion-3d": "^8.5.5", "fs-extra": "^11.2.0", "gh-pages": "^5.0.0", + "happy-dom": "^18.0.1", "history": "^5.3.0", "husky": "^8.0.3", "jsdom": "^22.1.0", @@ -131,8 +132,8 @@ "three": "^0.148.0", "ts-node": "^10.9.2", "typescript": "^5.4.3", - "vite": "^4.5.2", - "vitest": "0.34.6", + "vite": "^6.3.5", + "vitest": "^3.2.4", "zustand": "^4.5.2" }, "peerDependencies": { diff --git a/src/factories/createThemeProvider/ThemeSwitcher.test.tsx b/src/factories/createThemeProvider/ThemeSwitcher.test.tsx index 47255e84..e4a1422a 100644 --- a/src/factories/createThemeProvider/ThemeSwitcher.test.tsx +++ b/src/factories/createThemeProvider/ThemeSwitcher.test.tsx @@ -52,7 +52,7 @@ describe('', () => { it('should render with default appearance', () => { const { container } = render(); - expect(container.firstChild).toHaveStyle('background-color: #fff'); + expect(container.firstChild).toHaveStyle('background-color: #ffffff'); }); it.skip('should render with dark appearance', () => { @@ -64,7 +64,7 @@ describe('', () => { it('should render with light theme mode', () => { const { container } = render(); - expect(container.firstChild).toHaveStyle('background-color: #fff'); + expect(container.firstChild).toHaveStyle('background-color: #ffffff'); }); it.skip('should render with dark theme mode', () => { diff --git a/tests/components/__snapshots__/ThemeProvider.test.tsx.snap b/tests/components/__snapshots__/ThemeProvider.test.tsx.snap index 89a2d678..e8720f4b 100644 --- a/tests/components/__snapshots__/ThemeProvider.test.tsx.snap +++ b/tests/components/__snapshots__/ThemeProvider.test.tsx.snap @@ -19,7 +19,7 @@ exports[`ThemeProvider > 注入自定义主题 > 自定义 Stylish 1`] = ` exports[`ThemeProvider > 注入自定义主题 > 自定义 Token 1`] = `
#c956df
@@ -44,7 +44,7 @@ exports[`ThemeProvider > 配合 App 实现局部作用域 1`] = `
自定义 prefixCls 时，会采用 instance 的 prefixCls 而不是 CP 的prefixCls 1`] = ` .emotion-0.test-btn { background: lightsteelblue; - border: none; + border: none none; color: royalblue; } @@ -12,7 +12,7 @@ exports[`createInstance > 自定义 prefixCls 时，会采用 instance 的 prefi }