antd-style icon indicating copy to clipboard operation
antd-style copied to clipboard

Published 20 hours ago • verified publisher icon ant-design

:sparkles: feat: support antd v6 cssVar

Open arvinxx opened this issue 4 months ago • 3 comments

BREAKING CHANGES: bump peerDependencies antd >= v6

Summary by CodeRabbit

  • 新功能

    • 样式系统现已支持通过 cssVar 提供的 CSS 变量，提升了主题灵活性和自定义能力。

  • 依赖更新

    • 升级了 antd 依赖至 6.0.0-alpha.1 预发布版本。
    • 更新了测试环境为 happy-dom，提升测试兼容性和稳定性。
    • 其他相关依赖如 vite 和 vitest 也进行了版本升级。

  • 文档

    • 示例代码已同步更新以展示新的样式变量用法。

  • 测试

    • 优化了部分测试用例中的样式断言，增强测试的准确性和一致性。

  • 构建与配置

    • 更新了 GitHub Actions 工作流，采用新版 Node.js 和 pnpm 版本，提升构建与发布效率。
    • 调整了测试配置，使用绝对路径别名，优化模块解析。

arvinxx avatar Jul 24 '25 11:07 arvinxx

📝 Walkthrough

Walkthrough

本次变更将样式相关逻辑从依赖 token 切换为使用 cssVar，并在样式工厂与主题 Hook 之间传递 cssVar。Ant Design 依赖升级至 6.0.0-alpha.1，并同步调整类型定义和样式工厂工具，保证 cssVar 在各层级正确传递和使用。测试断言中的颜色格式也进行了统一调整，测试环境配置改为 happy-dom，路径别名改为绝对路径。GitHub Actions 工作流升级了关键动作版本和 Node.js 版本。StyleProviderProps 接口移除了 autoClear 属性。

Changes

文件/路径分组 变更摘要
docs/demos/api/createStyles/default.tsx useStyles 钩子中样式逻辑由 token 切换为 cssVar，去除 px 后缀。
package.json antd 依赖升级至 6.0.0-alpha.1，@ant-design/cssinjs、vite、vitest 版本升级，新增 happy-dom 依赖。
src/factories/createStyles/index.ts createStylesFactory 中解构和传递 theme.cssVar。
src/factories/createStyles/types.ts CreateStylesUtils 接口新增 cssVar: FullToken 属性。
src/hooks/useAntdTheme.ts useAntdTheme 用 antd 的 theme.useToken()，返回 token 和 cssVar。
src/factories/createStyleProvider/index.tsx StyleProviderProps 接口移除 autoClear 属性。
src/factories/createThemeProvider/ThemeSwitcher.test.tsx 测试断言中背景色由 #fff 改为 #ffffff。
tests/functions/createGlobalStyle.test.tsx 测试断言中颜色由大写十六进制改为小写十六进制（#1677FF → #1677ff）。
tests/functions/createStyles.test.tsx 测试断言调整：背景色断言注释，颜色由大写十六进制改为小写，RGB 改为命名色。
tests/functions/extractStaticStyle.test.tsx 测试断言中 data-antd-version 由匹配模式改为固定字符串 "6.0.0-alpha.1"。
vitest.config.ts 测试环境由 jsdom 改为 happy-dom，路径别名改为绝对路径，新增 node:path resolve 导入。
.github/workflows/{preview,release,test}.yml GitHub Actions 工作流升级 checkout、pnpm、setup-node 等动作版本，Node.js 版本升级。
CHANGELOG.md 新增 4.0.0-alpha.1 版本，支持 Ant Design 6 CSS 变量，peer 依赖升级。

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant useStyles
    participant createStylesFactory
    participant useAntdTheme
    participant antdTheme

    App->>useStyles: 调用 useStyles()
    useStyles->>createStylesFactory: 获取样式工具（含 cssVar）
    createStylesFactory->>useAntdTheme: 获取主题（token, cssVar）
    useAntdTheme->>antdTheme: 调用 theme.useToken()
    antdTheme-->>useAntdTheme: 返回 { token, cssVar }
    useAntdTheme-->>createStylesFactory: 返回 { token, cssVar }
    createStylesFactory-->>useStyles: 返回样式工具（含 cssVar）
    useStyles-->>App: 返回样式对象

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰
变量新添 cssVar，
主题升级步步夸。
antd 六代初登场，
代码清新无繁杂。
小兔审阅乐开花，
未来样式更优雅！
🌿✨🐇

✨ Finishing Touches
  • [ ] 📝 Generate Docstrings
🧪 Generate unit tests
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
  • [ ] Commit unit tests in branch alpha

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot] avatar Jul 24 '25 11:07 coderabbitai[bot]

🎊 PR Preview b922a9405f5c7db884208c8f53387468c7384b63 has been successfully built and deployed to https://ant-design-antd-style-preview-pr-198.surge.sh

🕐 Build time: 99.196s

🤖 By surge-preview

github-actions[bot] avatar Jul 24 '25 11:07 github-actions[bot]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security		 Vulnerability Quality Maintenance License
Updated@​vitest/​coverage-v8@​0.34.6 ⏵ 3.2.49910070 +599100
Updatedvitest@​0.34.6 ⏵ 3.2.49710077 +199100
Updatedvite@​4.5.14 ⏵ 6.3.595 +11008199100
Addedantd@​6.0.0-alpha.18610010010080
Addedhappy-dom@​18.0.1991008891100
Added@​ant-design/​cssinjs@​2.0.0-alpha.89910010094100

View full report

socket-security[bot] avatar Jul 24 '25 11:07 socket-security[bot]

还搞不搞

afc163 avatar Nov 25 '25 07:11 afc163

搞起

li-jia-nan avatar Nov 26 '25 05:11 li-jia-nan