diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index d71ea6d5..d1825982 100644 --- a/.github/workflows/preview.yml +++ b/.github/workflows/preview.yml @@ -6,12 +6,17 @@ jobs: preview: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Install pnpm - uses: pnpm/action-setup@v2 + uses: pnpm/action-setup@v4 with: - version: 7 + version: 10 + + - name: Setup Node.js environment + uses: actions/setup-node@v4 + with: + node-version: '22' - uses: afc163/surge-preview@v1 with: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 2bc2b2f4..8ce8f4aa 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -12,17 +12,17 @@ jobs: name: Test runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Install pnpm - uses: pnpm/action-setup@v2 + uses: pnpm/action-setup@v4 with: - version: 7 + version: 10 - name: Setup Node.js environment - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version: '16' + node-version: '22' - name: Install deps run: pnpm install @@ -35,17 +35,17 @@ jobs: name: Release runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Install pnpm - uses: pnpm/action-setup@v2 + uses: pnpm/action-setup@v4 with: - version: 7 + version: 10 - name: Setup Node.js environment - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version: '16' + node-version: '22' - name: Install deps run: pnpm install diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 3edee65b..75df3fcc 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -5,17 +5,17 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Install pnpm - uses: pnpm/action-setup@v2 + uses: pnpm/action-setup@v4 with: - version: 8 + version: 10 - name: Setup Node.js environment - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version: '18' + node-version: '22' - name: Install deps run: pnpm install diff --git a/CHANGELOG.md b/CHANGELOG.md index f6f56d98..61975f82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # Changelog +# [4.0.0-alpha.1](https://github.com/ant-design/antd-style/compare/v3.7.1...v4.0.0-alpha.1) (2025-07-24) + +### ✨ Features + +- Support antd v6 cssVar ([cd838b0](https://github.com/ant-design/antd-style/commit/cd838b0)) + +### 💥 BREAKING CHANGES + +- bump peerDependencies antd >= v6 + ## [3.7.1](https://github.com/ant-design/antd-style/compare/v3.7.0...v3.7.1) (2024-10-22) ### 🐛 Bug Fixes 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..6f7f206f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd-style", - "version": "3.7.1", + "version": "4.0.0-alpha.1", "description": "css-in-js solution for application combine with antd v5 token system and emotion", "keywords": [ "antd", @@ -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", @@ -95,8 +95,8 @@ "@types/react-dom": "^18.2.22", "@types/testing-library__jest-dom": "^5.14.9", "@umijs/lint": "^4.1.5", - "@vitest/coverage-v8": "0.34.6", - "antd": "^5.21.1", + "@vitest/coverage-v8": "^3.2.4", + "antd": "^6.0.0-alpha.1", "babel-plugin-antd-style": "^1.0.4", "chalk": "^4.1.2", "classnames": "^2.5.1", @@ -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,12 +132,12 @@ "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": { - "antd": ">=5.8.1", + "antd": ">= 6.0.0-alpha.1", "react": ">=18" }, "publishConfig": { diff --git a/src/factories/createStyleProvider/index.tsx b/src/factories/createStyleProvider/index.tsx index 324bef2d..15ee0b2b 100644 --- a/src/factories/createStyleProvider/index.tsx +++ b/src/factories/createStyleProvider/index.tsx @@ -12,7 +12,7 @@ export interface StyleProviderProps extends Partial< Pick< AntdStyleProviderProps, - 'autoClear' | 'cache' | 'hashPriority' | 'ssrInline' | 'transformers' | 'linters' + 'cache' | 'hashPriority' | 'ssrInline' | 'transformers' | 'linters' > > { /** 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/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/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]); }; 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 的 prefi }