refactor: 🛠 use genCssVar hook to generate CSS variables#56529
refactor: 🛠 use genCssVar hook to generate CSS variables#56529
Conversation
|
|
|
|
📝 WalkthroughSummary by CodeRabbit发行说明
✏️ Tip: You can customize this high-level summary in your review settings. Walkthrough将工具函数 Changes
Sequence Diagram(s)（无图 — 本次改动为 API/样式返回值重构与替换，未引入需可视化的多组件顺序交互） Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Repository UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (3)
🧰 Additional context used📓 Path-based instructions (5)**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
components/**/style/*.ts📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
components/**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.{ts,tsx,md}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.{ts,tsx,css}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧠 Learnings (10)📚 Learning: 2025-11-24T16:30:28.374ZApplied to files:
📚 Learning: 2025-11-24T16:30:28.374ZApplied to files:
📚 Learning: 2026-01-04T15:16:45.886ZApplied to files:
📚 Learning: 2025-11-24T16:30:28.374ZApplied to files:
📚 Learning: 2025-11-24T16:30:28.374ZApplied to files:
📚 Learning: 2025-11-24T16:30:28.374ZApplied to files:
📚 Learning: 2025-11-24T16:30:28.374ZApplied to files:
📚 Learning: 2026-01-04T15:16:45.886ZApplied to files:
📚 Learning: 2025-11-24T16:30:28.374ZApplied to files:
📚 Learning: 2025-11-24T16:30:28.374ZApplied to files:
🧬 Code graph analysis (1)components/float-button/style/group.ts (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (17)
🔇 Additional comments (6)
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. Comment |
👁 Visual Regression Report for PR #56529 Failed ❌
Important There are 1 diffs found in this PR: 🔄
|
Summary of ChangesHello @li-jia-nan, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request refactors the styling implementation for the Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request refactors the Steps component's styling to use the genCssVar utility for generating CSS variables, which is a good improvement for consistency and maintainability. The changes in components/steps/style/index.ts correctly adopt the new utility.
However, I've found a critical issue in the modification to genCssVar itself in components/theme/util/genStyleUtils.ts. The updated regular expression is incorrect and would break CSS variable generation.
Additionally, I've left a few suggestions to further improve the usage of genCssVar by leveraging its withVar parameter, which would make the code slightly cleaner.
There was a problem hiding this comment.
Pull request overview
This PR aims to refactor CSS variable generation by using the genCssVar hook instead of hardcoded CSS variable names. However, it introduces a critical bug in the genCssVar function that will break all CSS variable generation.
Key Changes
- Modified the regex pattern in
genCssVarfunction to replace dots in class names - Updated Steps component to use
genCssVarhook for CSS variable generation instead of hardcoded variable names
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| components/theme/util/genStyleUtils.ts | Changed regex pattern from .replace('.', '') to .replace(/./g, '') - CRITICAL BUG: will remove ALL characters |
| components/steps/style/index.ts | Refactored to use genCssVar hook for generating CSS variable names like --ant-steps-title-font-size |
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/steps/style/index.ts (1)
168-168: 不一致：此处仍使用硬编码的 CSS 变量名第 168 行使用了硬编码的 CSS 变量名
'--steps-rail-line-style'，而文件中其他位置都已重构为使用getCssVar动态生成。为保持一致性，建议也使用getCssVar('rail-line-style')。♻️ 建议的修复
[`${itemCls}-rail`]: { - borderStyle: 'var(--steps-rail-line-style)', + borderStyle: `var(${getCssVar('rail-line-style')})`, borderWidth: 0, },
🤖 Fix all issues with AI agents
In @components/theme/util/genStyleUtils.ts:
- Line 46: The cssPrefix generation currently uses antCls.replace(/./g, '')
which removes every character because '.' is a wildcard; change the replacement
to only remove literal dots by using antCls.replace(/\./g, '') (or trim only a
leading dot with antCls.replace(/^\./, '')/antCls.slice(1) if you prefer).
Update the cssPrefix line that references cssPrefix = `--${antCls.replace(/./g,
'')}-${componentAbbr}-`; to use the corrected regex/trim so the resulting
variable becomes `--ant-steps-` instead of `---steps-`.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/steps/style/index.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
🧠 Learnings (14)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/steps/style/index.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Follow Ant Design design specification and adhere to the design token system throughout the project
Applied to files:
components/steps/style/index.ts
🧬 Code graph analysis (1)
components/steps/style/index.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (20)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Agent
- GitHub Check: test lib/es module (lib, 2/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-node
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: lint
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: size
- GitHub Check: build
- GitHub Check: build preview
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (1)
components/steps/style/index.ts (1)
7-7: 重构方法正确，但依赖于 genCssVar 的修复使用
genCssVar动态生成 CSS 变量的重构方法是合理的，代码结构清晰：
- 正确导入
genCssVar工具函数- 从 token 中解构
antCls- 创建
getCssVar辅助函数- 统一使用动态生成的 CSS 变量名
这种方法提高了代码的可维护性，避免了硬编码的 CSS 变量名。但请注意，该功能依赖于
genCssVar函数的修复（参见components/theme/util/genStyleUtils.ts的评审意见）。请在修复
genStyleUtils.ts中的正则表达式错误后，验证生成的 CSS 变量名称是否符合预期（应为--ant-steps-*格式）。Also applies to: 97-97, 100-112, 127-127, 143-144, 152-153
More templates
commit: |
Deploying ant-design with
|
| Latest commit: |
80f3428
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://58b8b920.ant-design.pages.dev |
| Branch Preview URL: | https://gencssvar-update.ant-design.pages.dev |
Deploying ant-design-next with
|
| Latest commit: |
80f3428
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1786a362.ant-design-next.pages.dev |
| Branch Preview URL: | https://gencssvar-update.ant-design-next.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/steps/style/index.ts (1)
168-168: CSS 变量名称不一致导致的 bug。第 168 行使用了硬编码的 CSS 变量名
var(--steps-rail-line-style)，但根据第 111 行的定义，实际的变量名应该是--ant-steps-rail-line-style（包含ant前缀）。这会导致样式无法正确应用。🐛 修复建议
- borderStyle: 'var(--steps-rail-line-style)', + borderStyle: getCssVar('rail-line-style', true),
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.tscomponents/theme/util/genStyleUtils.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- components/theme/util/genStyleUtils.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
🧠 Learnings (15)
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Support accessibility (WCAG 2.1 AA)
Applied to files:
components/button/style/variant.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Applied to files:
components/float-button/style/button.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/steps/style/index.ts
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/steps/style/index.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Follow Ant Design design specification and adhere to the design token system throughout the project
Applied to files:
components/steps/style/index.ts
🧬 Code graph analysis (1)
components/steps/style/index.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (18)
- GitHub Check: test lib/es module (lib, 2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-node
- GitHub Check: lint
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: build
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: build preview
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: build
- GitHub Check: size
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (9)
components/float-button/style/button.ts (1)
38-39: 代码重构正确，简化了 CSS 变量的使用方式。通过使用
getCssVar('size', true)替代var(${getCssVar('size')})，代码更加简洁且易读，同时保持了相同的功能。这符合 PR 的重构目标。components/button/style/variant.ts (3)
22-24: 变量引用方式重构正确。使用
getCssVar(..., true)方式设置 CSS 变量之间的引用关系，代码更加一致和易维护。
49-67: 样式模板中的 CSS 变量使用方式统一且正确。在边框、颜色和背景等样式属性中一致使用
getCssVar(..., true)模式，提高了代码的可读性和维护性。
76-148: 变体样式的 CSS 变量重构实现得当。所有变体（solid、outlined、dashed、filled、text/link）的 CSS 变量定义都统一使用了新的
getCssVar模式，保持了代码风格的一致性。components/steps/style/index.ts (5)
7-7: 正确引入 genCssVar 工具函数。从 genStyleUtils 引入
genCssVar以支持动态生成 CSS 变量，符合本次重构的目标。
97-101: getCssVar 辅助函数初始化正确。通过
genCssVar(antCls, 'steps')创建 CSS 变量生成器，注释清晰说明了生成的默认前缀格式。这为后续统一的 CSS 变量管理奠定了基础。
105-111: CSS 变量定义迁移到动态生成方式。将原本静态定义的 CSS 变量名改为通过
getCssVar动态生成，提高了代码的灵活性和可维护性。所有变量定义都遵循统一的命名规范。
127-127: 样式属性中正确使用 CSS 变量。在
paddingTop、fontSize和lineHeight等样式属性中统一使用getCssVar(..., true)模式，代码风格一致。过去的审查意见已得到正确处理。Also applies to: 143-144, 152-153
105-111: 第 168 行应该使用 getCssVar() 函数而非硬编码的 CSS 变量名。在第 168 行，
borderStyle: 'var(--steps-rail-line-style)'硬编码了 CSS 变量名，但这与由getCssVar('rail-line-style')生成的实际变量名--ant-steps-rail-line-style不匹配。缺少ant前缀将导致 CSS 变量无法解析，样式不会被应用。应该改为：
borderStyle: getCssVar('rail-line-style', true),相关代码片段
第 101 行：const getCssVar = genCssVar(antCls, 'steps'); 第 111 行：[getCssVar('rail-line-style')]: token.lineType, 第 168 行：borderStyle: 'var(--steps-rail-line-style)',⛔ Skipped due to learnings
Learnt from: CR Repo: ant-design/ant-design PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T16:30:28.374Z Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all stylingLearnt from: CR Repo: ant-design/ant-design PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-04T15:16:45.886Z Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming conventionLearnt from: CR Repo: ant-design/ant-design PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-04T15:16:45.886Z Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokensLearnt from: CR Repo: ant-design/ant-design PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T16:30:28.374Z Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing valuesLearnt from: CR Repo: ant-design/ant-design PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T16:30:28.374Z Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token systemLearnt from: CR Repo: ant-design/ant-design PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T16:30:28.374Z Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)Learnt from: CR Repo: ant-design/ant-design PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T16:30:28.374Z Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #56529 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 805 805
Lines 14847 14848 +1
Branches 3920 3918 -2
=========================================
+ Hits 14847 14848 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportChanges will decrease total bundle size by 1.77kB (-0.05%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
Files in
Files in
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @components/timeline/style/index.ts:
- Around line 139-140: The CSS variable name is inconsistent: you set
[getTimelineCssVar('head-span')] but the calc uses hardcoded
var(--timeline-head-span) missing the "ant-" prefix; update the calc to
reference the same prefixed variable by using getTimelineCssVar('head-span') (or
replace var(--timeline-head-span) with the correctly prefixed
var(--ant-timeline-head-span)) so both sides use the identical CSS variable name
and the calc resolves correctly.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/inline.tscomponents/steps/style/progress-dot.tscomponents/steps/style/vertical.tscomponents/timeline/style/index.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
🧠 Learnings (13)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Applied to files:
components/button/style/variant.tscomponents/steps/style/horizontal.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Support accessibility (WCAG 2.1 AA)
Applied to files:
components/button/style/variant.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/steps/style/horizontal.tscomponents/steps/style/progress-dot.tscomponents/timeline/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/vertical.ts
🧬 Code graph analysis (4)
components/steps/style/horizontal.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)
components/steps/style/progress-dot.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)
components/timeline/style/index.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)
components/steps/style/vertical.ts (3)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)components/theme/internal.ts (1)
calc(28-28)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (19)
- GitHub Check: build preview
- GitHub Check: test lib/es module (lib, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: size
- GitHub Check: build
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test lib/es module (lib, 1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: test-node
- GitHub Check: lint
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (9)
components/steps/style/inline.ts (1)
5-77: 重构实现正确且一致。该文件的重构与其他 Steps 样式文件保持一致：
- Line 11：正确初始化
getCssVar辅助函数- Lines 14-42：正确使用
getCssVar定义和引用 CSS 变量- Line 21：正确在
flex属性值中使用getCssVar('items-offset', true)所有 CSS 变量的定义和使用方式符合预期模式。
components/steps/style/horizontal.ts (1)
5-32: 重构实现正确。该文件正确实现了 CSS 变量生成重构：
- Line 11：正确创建
getCssVar辅助函数- Lines 18-19：在复杂的
calc表达式中正确使用getCssVar(..., true)引用其他 CSS 变量- Lines 21, 23：在属性值中正确使用
getCssVar(..., true)重构模式与其他文件保持一致。
components/steps/style/vertical.ts (1)
5-54: 正确处理了复杂的 CSS 变量和计算表达式。该文件在包含复杂
calc计算的场景中正确实现了重构：
- Line 10：正确初始化
getCssVar辅助函数- Line 13：正确定义带有
calc表达式的 CSS 变量- Lines 29, 34-49：在嵌套的
calc表达式中正确使用getCssVar(..., true)引用 CSS 变量值- Line 49：在模板字符串中正确使用
getCssVar生成负值边距所有复杂计算场景的处理均正确，与其他 Steps 样式文件保持一致。
components/button/style/variant.ts (1)
22-288: 系统化的重构实现，正确替换了所有 CSS 变量引用。该文件将原有的
var(--ant-btn-*)引用模式系统性地替换为getCssVar(..., true)调用：
- Lines 22-24, 30-32, 36-37：正确更新 CSS 变量定义中对其他变量的引用
- Lines 49-77：正确更新基础样式模板中的边框、颜色和背景属性
- Lines 86-158：正确更新各种按钮变体（solid、outlined、dashed、filled、text、link）的样式
- Lines 164-253：正确更新颜色预设（primary、dangerous、default）的样式
- Lines 256-277：保持预设颜色映射的正确性
- Line 287：正确更新禁用状态的背景色引用
重构覆盖全面且一致，所有 CSS 变量引用均正确使用
withVar=true参数。components/steps/style/progress-dot.ts (1)
6-67: 重构实现正确，CSS 变量生成和使用模式已验证。验证确认：
genCssVar函数正确生成--ant-steps-*格式的 CSS 变量名- Line 21：
getCssVar = genCssVar(antCls, 'steps')初始化正确- Lines 24-29：正确定义 CSS 变量，使用 token 值（无
withVar参数）- Line 57：正确引用 CSS 变量（使用
withVar=true）- 所有尺寸和间距值均来自 token，无硬编码值
重构遵循了 Ant Design CSS-in-JS 模式和设计令牌系统的要求。
components/timeline/style/index.ts (4)
6-6: 导入符合项目规范。新增的
genCssVar导入来源正确，遵循了项目的样式工具函数组织结构。根据 learnings，使用@ant-design/cssinjs作为样式解决方案。
48-130: 样式生成逻辑正确，使用steps作为 CSS 变量前缀是有意为之。Timeline 组件与 Steps 组件共享部分 CSS 变量（如
icon-size、rail-size等），这种设计可以复用样式逻辑。代码正确使用了 design tokens，没有硬编码颜色或尺寸值。
145-222: 垂直布局样式实现正确。代码正确使用了 CSS 逻辑属性（
insetInlineStart、marginInlineStart、marginInlineEnd）以支持 RTL 布局，符合项目编码规范。CSS 变量引用模式在此处使用一致。
237-253: 导出结构符合规范。
genStyleHooks的使用遵循了项目的样式生成约定，prepareComponentToken正确地从 token 系统获取默认值。
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @components/steps/style/label-placement.ts:
- Around line 18-19: The template string assigned to getCssVar('icon-size-max')
has a malformed CSS max() call missing a closing parenthesis; update the value
for getCssVar('icon-size-max') so the max(...) expression is properly closed
(i.e., ensure the string wraps the three getCssVar calls inside max(...) with
the final ')' present) so the emitted CSS is syntactically valid.
In @components/steps/style/progress.ts:
- Around line 51-58: The code is referencing a non-existent CSS variable
getCssVar('size-ptg-unitless', true) in multiple places (used for lineHeight and
in the calc for [getCssVar('progress-r')]) — replace those calls with the
similarly named existing variable getCssVar('icon-size-ptg-unitless', true) (or
alternatively add a proper CSS definition for 'size-ptg-unitless'); update the
occurrences inside the getCssVar(...) calls so the calc that uses
getCssVar('svg-size', true), .sub(lineWidthBold).mul(...).div(2).equal() and the
r: getCssVar('progress-r', true) flow use the defined 'icon-size-ptg-unitless'
value instead of the undefined 'size-ptg-unitless'.
In @components/steps/style/status.ts:
- Line 57: The CSS variable entry uses a hard-coded key
'--steps-item-text-hover-color' instead of the project's getCssVar pattern;
locate the object entry in components/steps/style/status.ts (the line with
'--steps-item-text-hover-color': '#000') and replace the literal key with the
getCssVar helper so the variable follows the same namespacing convention (use
getCssVar with the corresponding variable name and keep the '#000' value),
ensuring consistency with other entries that call getCssVar.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
components/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
🧠 Learnings (14)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/small.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/steps/style/rtl.tscomponents/steps/style/progress.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/label-placement.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Follow Ant Design design specification and adhere to the design token system throughout the project
Applied to files:
components/steps/style/status.ts
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/steps/style/util.ts
🧬 Code graph analysis (5)
components/steps/style/rtl.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)
components/steps/style/progress.ts (3)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)components/theme/internal.ts (1)
calc(28-28)
components/steps/style/small.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)
components/steps/style/status.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)
components/steps/style/util.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(45-51)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (18)
- GitHub Check: size
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test lib/es module (lib, 2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: lint
- GitHub Check: test-node
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (9)
components/steps/style/rtl.ts (1)
6-11: 代码重构正确，符合 PR 目标。文件成功引入了
genCssVar工具，并将硬编码的 CSS 变量引用（如var(--steps-item-base-width)）替换为动态生成的getCssVar('item-base-width', true)。这种模式与其他 Steps 样式文件保持一致，提升了可维护性。Also applies to: 33-37
components/steps/style/status.ts (1)
37-56: CSS 变量迁移实现正确。除第 57 行外，文件中所有 CSS 变量引用均已正确迁移至
getCssVar模式，涵盖了所有状态样式（wait、process、finish、error）以及 filled、outlined 变体。变量设置使用getCssVar(name)，变量读取使用getCssVar(name, true)，符合预期。Also applies to: 58-315
components/steps/style/small.ts (1)
5-10: 小尺寸样式的 CSS 变量迁移正确。文件成功采用
genCssVar模式，将 7 个硬编码的 CSS 变量名称替换为动态生成的变量。所有变量定义均正确使用getCssVar(name)格式，与 PR 目标一致。Also applies to: 13-19
components/steps/style/util.ts (1)
4-4: 工具函数的 CSS 变量迁移实现正确。
getItemWithWidthStyle函数成功引入getCssVar并将所有var(--steps-icon-size)引用替换为getCssVar('icon-size', true)。calc 链式调用逻辑保持完整，正确用于图标边距和 rail 定位计算。Also applies to: 19-21, 27-46
components/steps/style/label-placement.ts (1)
22-22: 标签位置样式的 CSS 变量迁移基本正确。除第 19 行的语法错误外，文件中的其他 CSS 变量迁移均正确实现。包括水平和垂直布局的图标尺寸、标题高度、间距等所有相关变量，均遵循了正确的
getCssVar使用模式。Also applies to: 28-135
components/steps/style/progress.ts (4)
6-6: 正确引入 genCssVar 工具函数引入路径正确，符合代码规范。
13-13: getCssVar 初始化正确使用
genCssVar(antCls, 'steps')创建 CSS 变量生成器，将生成带有--${antCls}-steps-前缀的变量名。实现符合重构目标。
6-13: 重构实现符合预期此次重构将硬编码的 CSS 变量名替换为
getCssVar动态生成，提高了代码的可维护性。实现正确使用了withVar参数：
- 定义 CSS 变量时使用
getCssVar(name)作为属性键- 引用 CSS 变量时使用
getCssVar(name, true)获取var()包装的值这与项目中其他文件（如
components/steps/style/index.ts、components/timeline/style/index.ts）的重构方式保持一致。基于代码规范，该实现符合 Ant Design 的样式系统要求。
35-42: 修复size-ptg-unitlessCSS 变量的未定义引用代码在第 51 和 55 行引用了
getCssVar('size-ptg-unitless', true)，但该 CSS 变量在代码库中从未定义。这很可能是一个拼写错误，应为icon-size-ptg-unitless（已在第 39 行定义）。请修正这两处引用。相关代码位置
线 51: lineHeight: getCssVar('size-ptg-unitless', true), 线 55: .mul(getCssVar('size-ptg-unitless', true))应改为
icon-size-ptg-unitless注：
icon-size变量已在small.ts和icon.ts中正确定义，无需验证。Likely an incorrect or invalid review comment.
This comment has been minimized.
This comment has been minimized.
7deeff5 to
6c5036e
Compare
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
package.json (1)
333-343: 建议补充体积增长的原因与证据（bundle size 控制）
./dist/antd.min.js的size-limit从 523 KiB 提到 524 KiB（Line 333-343）。既然 repo 强调严格控制包体积，建议在 PR 描述里补充：本次 refactor 为什么导致增长、增长点在哪里、以及 size-limit 报告/对比数据（或后续回收计划）。基于 learnings，需严格控制 bundle size。components/button/style/variant.ts (1)
16-157: 严重：大量把 varName(...) 当作 CSS 值使用，应该改为 varRef(...)（否则会生成无效 CSS）当前多处出现
color/backgroundColor/boxShadow/background等属性值使用varName('...')（例如 Line 61-63、72-74、99、114、285），以及“用一个 CSS 变量指向另一个变量”时把 value 写成varName('...')（例如 Line 85-97、104-112、127-132、185-187 等）。varName()只会生成--xxx，作为 CSS 值是无效的；应使用varRef()生成var(--xxx)。建议修复（最小改动）
@@ [`&:not(:disabled):not(${componentCls}-disabled)`]: { // Hover '&:hover': { @@ - color: varName('text-color-hover'), - backgroundColor: varName('bg-color-hover'), + color: varRef('text-color-hover'), + backgroundColor: varRef('bg-color-hover'), }, @@ '&:active': { @@ - color: varName('text-color-active'), - backgroundColor: varName('bg-color-active'), + color: varRef('text-color-active'), + backgroundColor: varRef('bg-color-active'), }, }, }, @@ [`&${componentCls}-variant-solid`]: { // Solid Variables - [varName('solid-bg-color')]: varName('color-base'), - [varName('solid-bg-color-hover')]: varName('color-hover'), - [varName('solid-bg-color-active')]: varName('color-active'), + [varName('solid-bg-color')]: varRef('color-base'), + [varName('solid-bg-color-hover')]: varRef('color-hover'), + [varName('solid-bg-color-active')]: varRef('color-active'), @@ - [varName('bg-color')]: varName('solid-bg-color'), - [varName('bg-color-hover')]: varName('solid-bg-color-hover'), - [varName('bg-color-active')]: varName('solid-bg-color-active'), + [varName('bg-color')]: varRef('solid-bg-color'), + [varName('bg-color-hover')]: varRef('solid-bg-color-hover'), + [varName('bg-color-active')]: varRef('solid-bg-color-active'), @@ - boxShadow: varName('shadow'), + boxShadow: varRef('shadow'), }, @@ [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: { - [varName('border-color')]: varName('color-base'), - [varName('border-color-hover')]: varName('color-hover'), - [varName('border-color-active')]: varName('color-active'), + [varName('border-color')]: varRef('color-base'), + [varName('border-color-hover')]: varRef('color-hover'), + [varName('border-color-active')]: varRef('color-active'), - [varName('bg-color')]: varName('bg-color-container'), - [varName('text-color')]: varName('color-base'), - [varName('text-color-hover')]: varName('color-hover'), - [varName('text-color-active')]: varName('color-active'), + [varName('bg-color')]: varRef('bg-color-container'), + [varName('text-color')]: varRef('color-base'), + [varName('text-color-hover')]: varRef('color-hover'), + [varName('text-color-active')]: varRef('color-active'), // Box Shadow - boxShadow: varName('shadow'), + boxShadow: varRef('shadow'), }, @@ [`&${componentCls}-variant-filled`]: { @@ - [varName('text-color')]: varName('color-base'), + [varName('text-color')]: varRef('color-base'), @@ - [varName('bg-color')]: varName('color-light'), - [varName('bg-color-hover')]: varName('color-light-hover'), - [varName('bg-color-active')]: varName('color-light-active'), + [varName('bg-color')]: varRef('color-light'), + [varName('bg-color-hover')]: varRef('color-light-hover'), + [varName('bg-color-active')]: varRef('color-light-active'), }, @@ [`&${componentCls}-variant-text, &${componentCls}-variant-link`]: { @@ - [varName('text-color')]: varName('color-base'), - [varName('text-color-hover')]: varName('color-hover'), - [varName('text-color-active')]: varName('color-active'), + [varName('text-color')]: varRef('color-base'), + [varName('text-color-hover')]: varRef('color-hover'), + [varName('text-color-active')]: varRef('color-active'), @@ [`&${componentCls}-variant-text`]: { - [varName('bg-color-hover')]: varName('color-light'), - [varName('bg-color-active')]: varName('color-light-active'), + [varName('bg-color-hover')]: varRef('color-light'), + [varName('bg-color-active')]: varRef('color-light-active'), }, @@ [`&${componentCls}-variant-solid`]: { [varName('text-color')]: token.primaryColor, - [varName('text-color-hover')]: varName('text-color'), - [varName('text-color-active')]: varName('text-color'), + [varName('text-color-hover')]: varRef('text-color'), + [varName('text-color-active')]: varRef('text-color'), }, @@ [`&${componentCls}-variant-solid`]: { [varName('text-color')]: token.dangerColor, - [varName('text-color-hover')]: varName('text-color'), - [varName('text-color-active')]: varName('text-color'), + [varName('text-color-hover')]: varRef('text-color'), + [varName('text-color-active')]: varRef('text-color'), }, @@ [`&${componentCls}-variant-solid`]: { [varName('text-color')]: token.solidTextColor, - [varName('text-color-hover')]: varName('text-color'), - [varName('text-color-active')]: varName('text-color'), + [varName('text-color-hover')]: varRef('text-color'), + [varName('text-color-active')]: varRef('text-color'), }, @@ [`&${componentCls}-variant-filled, &${componentCls}-variant-text`]: { - [varName('text-color-hover')]: varName('text-color'), - [varName('text-color-active')]: varName('text-color'), + [varName('text-color-hover')]: varRef('text-color'), + [varName('text-color-active')]: varRef('text-color'), }, @@ { // Disabled [`&:disabled, &${token.componentCls}-disabled`]: { @@ - background: varName('bg-color-disabled'), + background: varRef('bg-color-disabled'), color: token.colorTextDisabled, boxShadow: 'none', }, },Also applies to: 165-243, 253-289
🤖 Fix all issues with AI agents
In @components/button/style/variant.ts:
- Around line 9-10: The file is using the new genCssVar destructure [varName,
varRef] but several CSS properties erroneously call varName(...) instead of
varRef(...); update all CSS property assignments (e.g., the uses currently
calling varName('text-color-hover'), varName('bg-color-hover'), etc.) to call
varRef(...) so valid CSS variables are emitted. Also remove hard-coded design
values (e.g., '#000', '#ddd', '1px', 'transparent', 'solid', 'none') used in the
Button variant styles and replace them with appropriate design tokens / CSS vars
generated by genCssVar (use tokens such as text-color, text-color-hover,
bg-color, bg-color-hover, border-color, border-width, border-style, and any
spacing tokens) so all constants come from the design system rather than
literals; adjust where genCssVar is invoked (const [varName, varRef] =
genCssVar(antCls, 'btn')) to ensure the referenced token keys match these
replacements.
🧹 Nitpick comments (2)
components/button/style/variant.ts (1)
16-42: 样式默认值里仍有硬编码颜色/尺寸，建议替换为 token（避免潜在回归）
#000/#ddd/1px（Line 18、20、28、34 等）会直接进入产物 CSS。按约定components/**/style/*.ts尽量不要硬编码颜色/尺寸，建议改用 ButtonToken / AliasToken 里的 token（例如边框宽度、默认文本色、默认背景色等）。基于 learnings 与 coding guidelines，需要避免硬编码样式值。components/theme/util/genStyleUtils.ts (1)
45-53: genCssVar 的返回值形态清晰；建议把 replace 改为全局，并确认旧 API 的 fallback 能力未被依赖实现本身直观（Line 45-53）。两个小点建议：
antCls.replace(/\./, '')只替换第一个.，更稳妥的是/\./g。- 这次从“可内联/可带 fallback 的函数形态”改成
[varName, varRef]，varRef目前不支持 fallback（例如var(--x, fallback)），建议确认全仓库没有依赖旧能力；否则可能需要在 API 或调用侧补齐。建议改动
- const cssPrefix = `--${antCls.replace(/\./, '')}-${componentAbbr}-`; + const cssPrefix = `--${antCls.replace(/\./g, '')}-${componentAbbr}-`;
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/float-button/style/group.tscomponents/theme/util/genStyleUtils.tspackage.json
🚧 Files skipped from review as they are similar to previous changes (2)
- components/float-button/style/group.ts
- components/float-button/style/button.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/button/style/variant.ts
🧠 Learnings (18)
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Maintain strict bundle size control
Applied to files:
package.json
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Avoid introducing new dependencies and strictly control bundle size
Applied to files:
package.json
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use generics appropriately to enhance type flexibility; use union types and `as const` instead of `enum`; rely on TypeScript's type inference and minimize type assertions
Applied to files:
components/theme/util/genStyleUtils.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use complete names, never abbreviations in prop naming
Applied to files:
components/theme/util/genStyleUtils.ts
📚 Learning: 2025-04-27T14:47:16.894Z
Learnt from: afc163
Repo: ant-design/ant-design PR: 53676
File: components/list/demo/infinite-load.tsx:23-30
Timestamp: 2025-04-27T14:47:16.894Z
Learning: 在 Ant Design 的 demo 文件中，推荐使用简化的类型定义，以保持代码的清晰度和简洁性，不需要添加过于详细的类型定义。
Applied to files:
components/theme/util/genStyleUtils.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Component props should use interface definition with naming convention `ComponentNameProps`; define separate interfaces for component state like `ComponentNameState`
Applied to files:
components/theme/util/genStyleUtils.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use `React.ForwardRefRenderFunction` for component ref types and explicitly define all callback function parameters and return values
Applied to files:
components/theme/util/genStyleUtils.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/theme/util/genStyleUtils.tscomponents/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Support accessibility (WCAG 2.1 AA)
Applied to files:
components/button/style/variant.ts
🧬 Code graph analysis (1)
components/button/style/variant.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(45-53)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (18)
- GitHub Check: Socket Security: Pull Request Alerts
- GitHub Check: build preview
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: lint
- GitHub Check: test-node
- GitHub Check: size
- GitHub Check: build
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log