refactor: 🛠 use genCssVar hook to generate CSS variables#56546
refactor: 🛠 use genCssVar hook to generate CSS variables#56546li-jia-nan merged 10 commits intomasterfrom
Conversation
|
|
👁 Visual Regression Report for PR #56546 Failed ❌
Important There are 2 diffs found in this PR: 🔄
|
|
|
|
Warning Rate limit exceeded@li-jia-nan has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 4 minutes and 10 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
📝 WalkthroughWalkthrough将 genCssVar 的返回从模板字符串形式改为两函数对 [CssVarName, CssVarRef]，并把各处模板标签样式变量用函数调用替换；同时将 tooltip 的 parseColor 签名扩展为 (rootPrefixCls, prefixCls, color?)，并用 genCssVar 生成的 varName/varRef 替换硬编码 CSS 变量。 Changes
Sequence Diagram(s)（此变更为工具 API 与样式变量生成/引用语法调整，未引入新的多组件顺序交互流，故省略序列图） Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
兔兔的庆祝诗
🚥 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)
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 |
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 focuses on refactoring the styling approach for several components by introducing a 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
|
size-limit report 📦
|
More templates
commit: |
Deploying ant-design-next with
|
| Latest commit: |
00feb0c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://59093d79.ant-design-next.pages.dev |
| Branch Preview URL: | https://gencssvar-update-2.ant-design-next.pages.dev |
There was a problem hiding this comment.
Code Review
This pull request refactors the Popover, Tooltip, and Tour components to use the new genCssVar hook for generating CSS variables. This is a great move towards standardizing style generation. The genCssVar utility is also enhanced to support fallback values in var() expressions.
The changes are mostly correct and well-implemented. However, I've found a critical issue in the new varRef implementation that leads to invalid CSS when a fallback value is used, and a medium-severity issue related to type safety. My review includes suggestions to fix these.
Overall, a good refactoring that improves code consistency.
There was a problem hiding this comment.
Pull request overview
This PR refactors the CSS variable generation across Tooltip, Tour, and Popover components to use a new genCssVar utility hook for consistent CSS custom property naming. The refactoring improves the namespacing of CSS variables from generic names like --antd-arrow-background-color to component-scoped names like --ant-tooltip-arrow-background-color.
Key changes:
- Introduces
genCssVarutility function withvarNameandvarRefhelpers for generating CSS variable names and references - Updates Tooltip, Tour, and Popover components to use the new utility
- Standardizes CSS variable naming convention across components
- Updates
parseColorfunction signature to acceptrootPrefixClsparameter - Updates all related tests and snapshots to reflect new CSS variable names
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| components/theme/util/genStyleUtils.ts | Adds genCssVar utility function with type definitions for generating CSS variable names and references |
| components/tooltip/util.ts | Updates parseColor to accept rootPrefixCls and use genCssVar for CSS variable generation |
| components/tooltip/style/index.ts | Replaces hardcoded CSS variable names with genCssVar generated names |
| components/tooltip/index.tsx | Passes rootPrefixCls to parseColor function call |
| components/tooltip/PurePanel.tsx | Retrieves rootPrefixCls and passes it to parseColor |
| components/tooltip/tests/tooltip.test.tsx | Updates tests to use genCssVar and defaultPrefixCls for verifying CSS variable names |
| components/tooltip/tests/snapshots/demo.test.tsx.snap | Updates snapshots with new CSS variable names |
| components/tooltip/tests/snapshots/demo-extend.test.ts.snap | Updates snapshots with new CSS variable names |
| components/tour/style/index.ts | Implements genCssVar for arrow background color and fixes variable naming (TourToken → tourToken) |
| components/popover/style/index.ts | Implements genCssVar for consistent CSS variable naming |
Deploying ant-design with
|
| Latest commit: |
ca7ff09
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://cc71ca49.ant-design.pages.dev |
| Branch Preview URL: | https://gencssvar-update-2.ant-design.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/tooltip/util.ts (1)
7-28:parseColor存在潜在运行时异常 +as any违规：建议收敛到条件分支并用接口扩展样式类型当前无论
color是否存在都会执行generateColor(color as ...)；若color为undefined，这里有抛错风险（Tooltip 默认color常为空）。同时overlayStyle[varName\...` as any]` 违反“不要使用 any”。建议修复
import type * as React from 'react'; import { clsx } from 'clsx'; import { isPresetColor } from '../_util/colors'; import type { ColorGenInput } from '../color-picker/interface'; import { generateColor } from '../color-picker/util'; import { genCssVar } from '../theme/util/genStyleUtils'; +interface CSSVarStyle extends React.CSSProperties { + [key: string]: string | number | undefined; +} + export const parseColor = (rootPrefixCls: string, prefixCls: string, color?: string) => { const isInternalColor = isPresetColor(color); const [varName] = genCssVar(rootPrefixCls, 'tooltip'); const className = clsx({ [`${prefixCls}-${color}`]: color && isInternalColor }); - const overlayStyle: React.CSSProperties = {}; - const arrowStyle: React.CSSProperties = {}; - const rgb = generateColor(color as ColorGenInput).toRgb(); - const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255; - const textColor = luminance < 0.5 ? '#FFF' : '#000'; + const overlayStyle: CSSVarStyle = {}; + const arrowStyle: CSSVarStyle = {}; if (color && !isInternalColor) { + const rgb = generateColor(color as ColorGenInput).toRgb(); + const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255; + const textColor = luminance < 0.5 ? '#FFF' : '#000'; overlayStyle.background = color; - overlayStyle[varName`overlay-color` as any] = textColor; - arrowStyle[varName`arrow-background-color` as any] = color; + overlayStyle[varName`overlay-color`] = textColor; + arrowStyle[varName`arrow-background-color`] = color; } return { className, overlayStyle, arrowStyle }; };
🤖 Fix all issues with AI agents
In @components/theme/util/genStyleUtils.ts:
- Around line 45-62: genCssVar's varRef currently trims inputs[0] but doesn't
strip a trailing comma when callers write templates like varRef`overlay-color,
${tooltipColor}`, producing an invalid var(--...,) name; update varName to use
inputs[0].trim() and update varRef to parse inputs[0] by splitting on ',' and
taking the first non-empty trimmed token as the variable name, trim the fallback
exprs[0] as needed, then build the return as `var(${cssPrefix}${name}${fallback
? `, ${fallback}` : ''})`; reference genCssVar, varName, varRef and cssPrefix
when locating the changes.
🧹 Nitpick comments (1)
components/tooltip/__tests__/tooltip.test.tsx (1)
589-615: 避免as any+ 提升用例稳健性（portal / 渲染时序 / 去重）
overlayStyle[varName\overlay-color` as any]建议去掉any`（仓库规范禁止）。prefixCls可由defaultPrefixCls派生，避免未来前缀调整导致测试漂移。- Tooltip 弹层可能走 portal，
container.querySelector(...)可能不稳；建议至少验证是否应改为document.querySelector(...)，并在读取弹层样式前await waitFakeTimer()一次以降低时序抖动。建议改法（示例 diff）
describe('parseColor', () => { - const prefixCls = 'ant-tooltip'; + const rootPrefixCls = defaultPrefixCls; + const prefixCls = `${rootPrefixCls}-tooltip`; + const [varName] = genCssVar(rootPrefixCls, 'tooltip'); + const overlayColorVar = varName`overlay-color` as `--${string}`; + type CssVarStyle = React.CSSProperties & Record<`--${string}`, string>; it('should set white text for dark backgrounds', () => { const darkColor = '#003366'; // 深色 - const { overlayStyle } = parseColor(defaultPrefixCls, prefixCls, darkColor); - const [varName] = genCssVar(defaultPrefixCls, 'tooltip'); + const { overlayStyle } = parseColor(rootPrefixCls, prefixCls, darkColor); expect(overlayStyle.background).toBe(darkColor); - expect(overlayStyle[varName`overlay-color` as any]).toBe('#FFF'); + expect((overlayStyle as CssVarStyle)[overlayColorVar]).toBe('#FFF'); }); it('should set black text for light backgrounds', () => { const lightColor = '#f8f8f8'; - const { overlayStyle } = parseColor(defaultPrefixCls, prefixCls, lightColor); - const [varName] = genCssVar(defaultPrefixCls, 'tooltip'); + const { overlayStyle } = parseColor(rootPrefixCls, prefixCls, lightColor); expect(overlayStyle.background).toBe(lightColor); - expect(overlayStyle[varName`overlay-color` as any]).toBe('#000'); + expect((overlayStyle as CssVarStyle)[overlayColorVar]).toBe('#000'); }); - it('actual tooltip color rendering (default)', () => { + it('actual tooltip color rendering (default)', async () => { const { container } = render( <Tooltip title="Test" color="#003366" open> <span>Hover me</span> </Tooltip>, ); - const [varName] = genCssVar(defaultPrefixCls, 'tooltip'); - const tooltipContainer = container.querySelector('.ant-tooltip-container'); - expect(tooltipContainer).toHaveStyle({ [varName`overlay-color`]: '#FFF' }); + await waitFakeTimer(); + const tooltipContainer = + container.querySelector<HTMLElement>('.ant-tooltip-container') || + document.querySelector<HTMLElement>('.ant-tooltip-container'); + expect(tooltipContainer).toHaveStyle({ [overlayColorVar]: '#FFF' }); });（涉及 TypeScript
any规约与 portal 渲染行为稳定性验证；As per coding guidelines, ...）
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/tooltip/__tests__/__snapshots__/demo.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (8)
components/popover/style/index.tscomponents/theme/util/genStyleUtils.tscomponents/tooltip/PurePanel.tsxcomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/index.tsxcomponents/tooltip/style/index.tscomponents/tooltip/util.tscomponents/tour/style/index.ts
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/theme/util/genStyleUtils.tscomponents/tooltip/PurePanel.tsxcomponents/tour/style/index.tscomponents/tooltip/index.tsx
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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tour/style/index.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/theme/util/genStyleUtils.tscomponents/tooltip/PurePanel.tsxcomponents/tour/style/index.tscomponents/tooltip/index.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/theme/util/genStyleUtils.tscomponents/tooltip/PurePanel.tsxcomponents/tour/style/index.tscomponents/tooltip/index.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/theme/util/genStyleUtils.tscomponents/tooltip/PurePanel.tsxcomponents/tour/style/index.tscomponents/tooltip/index.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/PurePanel.tsxcomponents/tooltip/index.tsx
**/__tests__/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/__tests__/**/*.test.{ts,tsx}: Write comprehensive tests using Jest and React Testing Library
Include snapshot tests for UI components
Files:
components/tooltip/__tests__/tooltip.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/PurePanel.tsxcomponents/tooltip/index.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Jest and React Testing Library for unit tests; place test files in tests directory with naming format
index.test.tsxorxxx.test.tsx; achieve 100% test coverage
Files:
components/tooltip/__tests__/tooltip.test.tsx
🧠 Learnings (23)
📓 Common learnings
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 CHANGELOG.*.md : CHANGELOG format: `Component: 📌emoji Description [#PR](link) [contributor]`; use code backticks for all property names, method names, APIs, and aria/role attributes; maintain space between Chinese/English and numbers/links/usernames
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 : 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 : Use design tokens from the Ant Design token system
Applied to files:
components/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/tour/style/index.tscomponents/tooltip/index.tsx
📚 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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/theme/util/genStyleUtils.tscomponents/tooltip/PurePanel.tsxcomponents/tour/style/index.tscomponents/tooltip/index.tsx
📚 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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/theme/util/genStyleUtils.tscomponents/tour/style/index.tscomponents/tooltip/index.tsx
📚 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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/theme/util/genStyleUtils.tscomponents/tour/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 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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/theme/util/genStyleUtils.tscomponents/tour/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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/tooltip/PurePanel.tsxcomponents/tour/style/index.tscomponents/tooltip/index.tsx
📚 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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/util.tscomponents/theme/util/genStyleUtils.tscomponents/tour/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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/theme/util/genStyleUtils.tscomponents/tour/style/index.tscomponents/tooltip/index.tsx
📚 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/popover/style/index.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/util.tscomponents/theme/util/genStyleUtils.tscomponents/tour/style/index.tscomponents/tooltip/index.tsx
📚 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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tour/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 : 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/popover/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/popover/style/index.tscomponents/tooltip/style/index.tscomponents/tour/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} : Prefer antd built-in components over external dependencies
Applied to files:
components/tooltip/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 **/__tests__/**/*.test.{ts,tsx} : Include snapshot tests for UI components
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
📚 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 **/__tests__/**/*.test.{ts,tsx} : Write comprehensive tests using Jest and React Testing Library
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
📚 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 **/*.test.{ts,tsx} : Use Jest and React Testing Library for unit tests; place test files in **tests** directory with naming format `index.test.tsx` or `xxx.test.tsx`; achieve 100% test coverage
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
📚 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/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/index.tsx
📚 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: Place tests in `__tests__` directory as `index.test.tsx` or `componentName.test.tsx`
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
📚 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/tooltip/__tests__/tooltip.test.tsx
📚 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 : Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
📚 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: 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 camelCase for props with specific patterns: `default` + `PropName` for defaults, `forceRender` for force rendering, `open` instead of `visible` for panel state, `show` + `PropName` for display toggles, `PropName` + `able` for capabilities, `dataSource` for data source, `disabled` for disabled state, `extra` for additional content, `icon` for icons, `trigger` for triggers, `className` for CSS classes
Applied to files:
components/tooltip/PurePanel.tsxcomponents/tour/style/index.ts
🧬 Code graph analysis (6)
components/tooltip/style/index.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-62)
components/tooltip/__tests__/tooltip.test.tsx (5)
components/tooltip/util.ts (1)
parseColor(9-28)components/config-provider/index.tsx (1)
defaultPrefixCls(134-134)components/config-provider/context.ts (1)
defaultPrefixCls(71-71)components/tooltip/style/index.ts (1)
prefixCls(205-230)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-62)
components/tooltip/util.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-62)
components/tooltip/PurePanel.tsx (1)
components/tooltip/util.ts (1)
parseColor(9-28)
components/tour/style/index.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-62)
components/tooltip/index.tsx (1)
components/tooltip/util.ts (1)
parseColor(9-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). (8)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: build
- GitHub Check: build preview
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
🔇 Additional comments (6)
components/tour/style/index.ts (1)
14-15: Tour 复用 Tooltip 的 CSS 变量命名空间：请确认是预期行为这里对 Tour 使用
genCssVar(antCls, 'tooltip')（而不是'tour'）会让变量名落在--ant-tooltip-*空间；如果这是为了与 Tooltip/Popover 的箭头变量统一（便于复用/覆盖），OK；否则建议改为组件自身命名空间以避免跨组件样式耦合。
另外：[varName\arrow-background-color`]在根上设置、getArrowStyle(..., varRef`arrow-background-color`)` 读取的组合逻辑是合理的（CSS 变量可继承）。基于 learnings（样式应基于 token & cssinjs），当前改动方向一致。Also applies to: 72-85, 195-196, 265-266, 288-294
components/popover/style/index.ts (2)
14-15: Popover 的箭头色改为 CSS 变量链路整体 OK；确认命名空间复用策略即可
[varName\arrow-background-color`]作为默认值 +getArrowStyle(..., varRef`arrow-background-color`)的读取方式一致，能保持箭头色跟随背景。建议确认genCssVar(antCls, 'tooltip')的命名空间复用是刻意设计（否则可考虑'popover'` 以降低跨组件耦合）。Also applies to: 85-90, 112-113, 152-154
167-176: PresetColor 分支同步写入箭头变量：实现一致
genColorStyle中对[varName\arrow-background-color`]` 的设置能让 preset 色也覆盖箭头背景，和 base 分支保持一致。components/tooltip/PurePanel.tsx (1)
30-38: parseColor 新签名对齐正确
rootPrefixCls = getPrefixCls()并传入parseColor(rootPrefixCls, prefixCls, color)，与新的 CSS 变量前缀生成方式一致。components/tooltip/index.tsx (1)
316-318: Tooltip 主链路已对齐 parseColor 新签名
parseColor(rootPrefixCls, prefixCls, color)调整到位，arrowStyle/overlayStyle的合并位置也保持不变，回归风险可控。components/tooltip/__tests__/tooltip.test.tsx (1)
11-20: 引入defaultPrefixCls/genCssVar的方向正确这里改为使用公开的
defaultPrefixCls和genCssVar来构造断言用的 CSS 变量名，与本次“用 genCssVar 生成 CSS variables”的重构目标一致。
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #56546 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 805 805
Lines 14848 14862 +14
Branches 3918 3919 +1
=========================================
+ Hits 14848 14862 +14 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
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/tooltip/util.ts (1)
9-28: 删除as any类型断言，改为使用精确的类型定义。
parseColor函数的破坏性变更已正确处理，所有 4 个调用点（components/tooltip/index.tsx:316、components/tooltip/PurePanel.tsx:37和两处测试文件中的调用）都已更新为新的三参数签名。但第 23-24 行的
as any类型断言违反了编码规范"不使用any类型，应定义精确类型"。建议为返回值定义类型接口以消除as any转换：type CssVarName = (name: string) => string; interface ParseColorResult { className: string; overlayStyle: React.CSSProperties & Record<string, string>; arrowStyle: React.CSSProperties & Record<string, string>; } export const parseColor = ( rootPrefixCls: string, prefixCls: string, color?: string ): ParseColorResult => { // ... 实现保持不变，但在赋值动态属性时无需 `as any` };这样可以在保持灵活性的同时提供完整的类型安全性，符合 TypeScript 严格模式要求。
🧹 Nitpick comments (1)
components/tooltip/__tests__/tooltip.test.tsx (1)
12-12: 测试已正确更新以匹配新 API，但建议改进类型安全性。测试正确反映了
parseColor的新签名（添加了rootPrefixCls参数）和动态 CSS 变量的使用。然而，使用as any转换来访问动态 CSS 变量名会绕过 TypeScript 类型检查。💡 可选的类型安全改进建议
考虑为
overlayStyle定义更精确的类型，支持动态 CSS 变量：-expect(overlayStyle[varName('overlay-color') as any]).toBe('#FFF'); +expect(overlayStyle[varName('overlay-color') as keyof typeof overlayStyle]).toBe('#FFF');或者，可以在
parseColor的返回类型中明确声明 CSS 变量属性：interface ParseColorResult { className: string; overlayStyle: React.CSSProperties & Record<string, string>; arrowStyle: React.CSSProperties & Record<string, string>; }Also applies to: 18-18, 593-596, 601-604, 612-614
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
components/button/style/variant.tscomponents/float-button/style/button.tscomponents/float-button/style/group.tscomponents/popover/style/index.tscomponents/theme/util/genStyleUtils.tscomponents/tooltip/__tests__/tooltip.test.tsxcomponents/tooltip/style/index.tscomponents/tooltip/util.tscomponents/tour/style/index.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- components/tour/style/index.ts
- components/theme/util/genStyleUtils.ts
- components/tooltip/style/index.ts
- components/popover/style/index.ts
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{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/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
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/float-button/style/button.tscomponents/float-button/style/group.tscomponents/button/style/variant.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/tooltip/__tests__/tooltip.test.tsx
**/__tests__/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/__tests__/**/*.test.{ts,tsx}: Write comprehensive tests using Jest and React Testing Library
Include snapshot tests for UI components
Files:
components/tooltip/__tests__/tooltip.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/tooltip/__tests__/tooltip.test.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Jest and React Testing Library for unit tests; place test files in tests directory with naming format
index.test.tsxorxxx.test.tsx; achieve 100% test coverage
Files:
components/tooltip/__tests__/tooltip.test.tsx
🧠 Learnings (19)
📓 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: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to CHANGELOG.*.md : CHANGELOG format: `Component: 📌emoji Description [#PR](link) [contributor]`; use code backticks for all property names, method names, APIs, and aria/role attributes; maintain space between Chinese/English and numbers/links/usernames
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/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
📚 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/float-button/style/button.tscomponents/float-button/style/group.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 : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/float-button/style/button.tscomponents/float-button/style/group.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 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/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
📚 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/float-button/style/button.tscomponents/float-button/style/group.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/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
📚 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/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
📚 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/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
📚 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/float-button/style/button.tscomponents/tooltip/util.tscomponents/float-button/style/group.tscomponents/button/style/variant.tscomponents/tooltip/__tests__/tooltip.test.tsx
📚 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 transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Applied to files:
components/float-button/style/group.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/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 **/__tests__/**/*.test.{ts,tsx} : Include snapshot tests for UI components
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
📚 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 **/__tests__/**/*.test.{ts,tsx} : Write comprehensive tests using Jest and React Testing Library
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
📚 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 **/*.test.{ts,tsx} : Use Jest and React Testing Library for unit tests; place test files in **tests** directory with naming format `index.test.tsx` or `xxx.test.tsx`; achieve 100% test coverage
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
📚 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/tooltip/__tests__/tooltip.test.tsx
📚 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: Place tests in `__tests__` directory as `index.test.tsx` or `componentName.test.tsx`
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
📚 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/tooltip/__tests__/tooltip.test.tsx
📚 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 : Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Applied to files:
components/tooltip/__tests__/tooltip.test.tsx
🧬 Code graph analysis (1)
components/tooltip/util.ts (2)
components/tooltip/style/index.ts (1)
prefixCls(205-230)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-57)
⏰ 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). (15)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: lint
- GitHub Check: build
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: size
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (3)
components/float-button/style/button.ts (1)
11-11: LGTM! CSS 变量生成重构正确。从模板字符串语法切换到函数调用语法的重构是一致且正确的。这种改变提高了类型安全性，并与整个 PR 中
genCssVar的新用法保持一致。Also applies to: 27-27, 38-39
components/float-button/style/group.ts (1)
15-15: LGTM! 动画与定位逻辑的 CSS 变量重构正确。所有 CSS 变量的声明和引用都已正确从模板字符串语法迁移到函数调用语法。变换（transform）和偏移量（offset）的计算逻辑保持不变。
Also applies to: 23-24, 83-83, 94-94, 103-103, 109-110, 116-117, 123-124
components/button/style/variant.ts (1)
9-9: LGTM! 按钮变体样式的全面 CSS 变量重构正确。所有 CSS 变量声明和引用（边框、文本、背景、阴影等）都已正确从模板字符串语法迁移到函数调用语法。变体定义（solid、outlined、dashed、filled、text、link）和颜色系统（primary、dangerous、default、预设颜色）的逻辑保持完整。
Also applies to: 18-296
Bundle ReportChanges will increase total bundle size by 642 bytes (0.02%) ⬆️. 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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/grid/style/index.ts (1)
129-142: 简化 CSS 变量定义，移除不必要的高特异性规则当前在每个
${componentCls}${sizeCls}-${i}规则上设置[varName('display')]: 'block'会增加选择器特异性，使用户在:root或全局作用域设置--ant-grid-display难以生效。建议改为：
- 移除第一个对象中的
[varName('display')]: 'block'行- 将
display: varRef('display')改为display: varRef('display', 'block')这样可以让用户通过
--ant-grid-display变量覆盖，同时在变量未定义时仍能回退到'block'，避免特异性冲突。建议改法
gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = [ // https://github.com/ant-design/ant-design/issues/44456 // Form set `display: flex` on Col which will override `display: block`. // Let's get it from css variable to support override. { - [varName('display')]: 'block', // Fallback to display if variable not support display: 'block', }, { - display: varRef('display'), + display: varRef('display', 'block'), flex: `0 0 ${(i / gridColumns) * 100}%`, maxWidth: `${(i / gridColumns) * 100}%`, }, ];
🤖 Fix all issues with AI agents
In @components/theme/util/genStyleUtils.ts:
- Around line 45-56: The exported function genCssVar currently uses return types
CssVarName and CssVarRef that are not exported, which can break d.ts generation;
fix it by either exporting the type aliases CssVarName and CssVarRef (add export
before their declarations) or by replacing the explicit return annotation on
genCssVar with an inline, exported-friendly type (e.g., readonly [(inputs:
string) => `--${string}`, (inputs: string, fallback?: string) =>
`var(--${string})`]); update the declaration associated with genCssVar and the
type aliases so the public API no longer references unexported symbols.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
components/_util/__tests__/wave.test.tsxcomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.tscomponents/form/style/index.tscomponents/grid/style/index.tscomponents/theme/util/genStyleUtils.ts
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{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/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.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/form/style/index.tscomponents/grid/style/index.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.ts
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/_util/__tests__/wave.test.tsxcomponents/_util/wave/WaveEffect.tsx
**/__tests__/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/__tests__/**/*.test.{ts,tsx}: Write comprehensive tests using Jest and React Testing Library
Include snapshot tests for UI components
Files:
components/_util/__tests__/wave.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/_util/__tests__/wave.test.tsxcomponents/_util/wave/WaveEffect.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Jest and React Testing Library for unit tests; place test files in tests directory with naming format
index.test.tsxorxxx.test.tsx; achieve 100% test coverage
Files:
components/_util/__tests__/wave.test.tsx
🧠 Learnings (23)
📓 Common learnings
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 CHANGELOG.*.md : CHANGELOG format: `Component: 📌emoji Description [#PR](link) [contributor]`; use code backticks for all property names, method names, APIs, and aria/role attributes; maintain space between Chinese/English and numbers/links/usernames
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 `ant-design/cssinjs` for all styling
Applied to files:
components/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/style.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/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.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/form/style/index.tscomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/style.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/form/style/index.tscomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/style.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/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/style.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/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.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/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.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/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/style.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/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/theme/util/genStyleUtils.tscomponents/grid/style/index.tscomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.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/form/style/index.tscomponents/_util/__tests__/wave.test.tsxcomponents/_util/wave/WaveEffect.tsxcomponents/_util/wave/style.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/form/style/index.tscomponents/grid/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 : 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/form/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 **/__tests__/**/*.test.{ts,tsx} : Include snapshot tests for UI components
Applied to files:
components/_util/__tests__/wave.test.tsx
📚 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 transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Applied to files:
components/_util/__tests__/wave.test.tsxcomponents/_util/wave/WaveEffect.tsx
📚 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 **/__tests__/**/*.test.{ts,tsx} : Write comprehensive tests using Jest and React Testing Library
Applied to files:
components/_util/__tests__/wave.test.tsx
📚 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 **/*.test.{ts,tsx} : Use Jest and React Testing Library for unit tests; place test files in **tests** directory with naming format `index.test.tsx` or `xxx.test.tsx`; achieve 100% test coverage
Applied to files:
components/_util/__tests__/wave.test.tsx
📚 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: Place tests in `__tests__` directory as `index.test.tsx` or `componentName.test.tsx`
Applied to files:
components/_util/__tests__/wave.test.tsx
📚 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: 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} : Prefer union types over enums, use `as const` for constants
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 **/*.{ts,tsx} : Never use `any` type - define precise types instead
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} : All components and functions must provide accurate type definitions; avoid using `any` type and use interfaces instead of type aliases for object structures
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
🧬 Code graph analysis (5)
components/form/style/index.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-57)
components/_util/__tests__/wave.test.tsx (2)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-57)components/config-provider/context.ts (1)
defaultPrefixCls(71-71)
components/grid/style/index.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-57)
components/_util/wave/WaveEffect.tsx (2)
components/config-provider/context.ts (1)
ConfigContext(520-524)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-57)
components/_util/wave/style.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-57)
⏰ 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)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: build
- GitHub Check: lint
- GitHub Check: test-node
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: size
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (6)
components/_util/wave/style.ts (1)
3-3:Wave样式改用genCssVar/varRef：方向正确且与主题能力对齐
color: varRef('color', colorPrimary)让波纹颜色既可被 CSS 变量覆盖又保留 token fallback，和本次“统一由genCssVar生成变量”的目标一致。Also applies to: 11-12, 19-20
components/_util/wave/WaveEffect.tsx (1)
9-11:WaveEffect用rootPrefixCls + genCssVar写入波纹颜色变量：可支持自定义 prefixCls
这能保证运行时写入的--${prefix}-wave-color与样式侧varRef('color', ...)引用一致，避免硬编码--wave-color带来的前缀不一致问题。Also applies to: 26-35, 53-55
components/_util/__tests__/wave.test.tsx (1)
7-9: 测试改为通过genCssVar(defaultPrefixCls, 'wave')取变量名：更抗重构
这些断言与新实现一致，能避免直接依赖具体的 CSS 变量字符串。Also applies to: 14-15, 135-148, 152-166, 170-182, 186-198, 202-214, 282-295, 299-313, 368-381
components/form/style/index.ts (1)
15-16: 原审查意见有误 ——--ant-grid-display变量确实被 Grid 消费Grid 样式文件第 139 行明确使用
display: varRef('display')消费该变量。Form 和 Grid 都通过genCssVar(antCls, 'grid')生成相同的变量名（--ant-grid-display），这是设计好的交互机制：Form 通过该变量为 Col 元素设置display: flex，覆盖 Grid 的默认display: block（见 Grid 样式第 131 行注释）。不存在兼容性问题，搜索结果确认无旧--ant-display变量被使用。Likely an incorrect or invalid review comment.
components/grid/style/index.ts (2)
4-7:genCssVar引入和使用规范合理，无循环依赖风险。验证结果：
components/theme/internal.ts不依赖theme/util/genStyleUtils，无循环依赖 ✓- 第103行
genCssVar(antCls, 'grid')返回CSS变量名/引用函数对，用于生成--ant-grid-display等变量- 第134行定义变量、第136行提供后备值、第139行通过
var()引用，支持用户通过CSS覆盖（见第132行注释）- 符合规范：使用
@ant-design/cssinjs，逻辑属性支持RTL（insetInlineStart/insetInlineEnd），函数命名gen*Style，基于token无硬编码值
101-105: 此审查意见不需要修改。antCls由 Ant Design 框架的FullToken类型保证存在，无需额外的防御性编程。整个代码库中所有组件的 style 文件（包括 transfer、tooltip、table、steps、space、slider 等）都采用相同的直接解构模式使用antCls，TypeScript 类型检查也会防止undefined值的传入。当前代码遵循代码库的一致约定，是正确的。
Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: lijianan <574980606@qq.com>
…nto genCssVar-update-2
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log