refactor(Mentions): use genCssVar hook to generate CSS variables#56550
refactor(Mentions): use genCssVar hook to generate CSS variables#56550li-jia-nan merged 7 commits intomasterfrom
Conversation
|
|
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 of the Mentions component. It introduces a standardized approach for managing CSS variables by integrating 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
|
👁 Visual Regression Report for PR #56550 Failed ❌
Important There are 1 diffs found in this PR: 🔄
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthrough将 Mentions 组件样式从静态 CSS 变量切换为基于 token 的动态生成：在 Changes
Sequence Diagram(s)（本次变更为样式与变量命名改动，不生成序列图） Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 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 |
|
|
There was a problem hiding this comment.
Code Review
This pull request refactors the Mentions component's styles to use a helper for generating CSS variables. While this is a good improvement for maintainability, the current implementation using genCssVar introduces a breaking change by altering the names of the CSS variables (e.g., from --mentions-padding-inline to --ant-mentions-padding-inline). My review includes a suggestion to avoid this breaking change by defining the helpers locally, thus preserving the existing CSS variable names, which is crucial for a refactoring.
There was a problem hiding this comment.
Pull request overview
This PR refactors the Mentions component styling to use the genCssVar hook for generating CSS variables, replacing hardcoded CSS variable names with a more maintainable utility-based approach.
Key changes:
- Imports and uses the
genCssVarhook to generate CSS variable name and reference functions - Replaces hardcoded CSS variable strings with
varName()andvarRef()function calls - Applies the refactoring consistently across all size variants (default, lg, sm)
size-limit report 📦
|
More templates
commit: |
Bundle ReportChanges will decrease total bundle size by 176 bytes (-0.0%) ⬇️. 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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
components/mentions/style/index.ts (2)
148-174: 应在 CSS 变量中使用unit()包装尺寸相关的 token 值。虽然已导入
unit()函数，但在定义 CSS 变量时未使用。对比input-number组件（同样的paddingInline和paddingBlock），该组件正确地使用了unit()包装。由于paddingInline、paddingBlock、controlHeight等 token 值为数字，未经unit()处理会导致序列化为无单位值（如--xxx: 32;），进而在paddingInline: varRef('padding-inline')等 CSS 属性中失效。修正方案
- [varName('padding-inline')]: token.paddingInline, - [varName('padding-block')]: token.paddingBlock, - [varName('control-height')]: token.controlHeight, + [varName('padding-inline')]: unit(token.paddingInline), + [varName('padding-block')]: unit(token.paddingBlock), + [varName('control-height')]: unit(token.controlHeight),同样需要修正
'&-lg'和'&-sm'中的相应 CSS 变量赋值。
244-295: varRef 使用一致性确认；ensure calc() + varRef 的字符串拼接输出合法。varRef 生成的
var(--antd-mentions-padding-inline)是合法 CSS 变量引用，calc().add(varRef(...)).equal()最终输出如calc(7.5px + 16px + var(--antd-mentions-padding-inline))的形式，符合 CSS calc() 规范。三个尺寸（base/LG/SM）都正确地通过 varName 定义了对应的 CSS 变量。insetInlineEnd 和 paddingInlineEnd 已统一使用同一个 CSS 变量（
--antd-mentions-padding-inline），保持一致。建议在视觉回归测试中确认有 suffix/clear-icon 时，不同尺寸下文本右侧 padding 与预期一致。
🧹 Nitpick comments (1)
components/mentions/style/index.ts (1)
199-208:calc(varRef(...))的拼接方式看起来合理；建议给varRef增加 fallback 以提升抗覆盖/顺序风险。
目前依赖同一选择器内先定义--*再引用；通常没问题，但如果后续有人抽离/重排样式片段，fallback 能降低回归风险。建议（可选）
- minHeight: calc(varRef('control-height')) + minHeight: calc(varRef('control-height', unit(token.controlHeight))) .sub(calc(token.lineWidth).mul(2).equal()) .equal(), - paddingInline: varRef('padding-inline'), - paddingBlock: varRef('padding-block'), + paddingInline: varRef('padding-inline', unit(token.paddingInline)), + paddingBlock: varRef('padding-block', unit(token.paddingBlock)),
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/mentions/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/mentions/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/mentions/style/index.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/mentions/style/index.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/mentions/style/index.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/mentions/style/index.ts
🧠 Learnings (11)
📓 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
📚 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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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 : Optimize for minimal re-renders
Applied to files:
components/mentions/style/index.ts
🧬 Code graph analysis (1)
components/mentions/style/index.ts (2)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-57)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). (18)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-node
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: build
- GitHub Check: lint
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: size
- GitHub Check: Analyze (javascript)
- GitHub Check: Cloudflare Pages: ant-design-next
- GitHub Check: build
🔇 Additional comments (2)
components/mentions/style/index.ts (2)
308-317: 尺寸变体用 CSS 变量覆盖（lg/sm）思路清晰；建议补充确认“非 textarea 场景”的变量继承链路。
&-lg/&-sm现在只覆盖变量，不直接改具体样式属性：更利于维护。请确认componentCls-measure、suffix等所有依赖 padding/height 的子节点都在同一作用域下拿到覆盖后的变量值（避免被更外层或更内层选择器打断）。
20-21: 无需修改 — genCssVar 的命名规范是仓库既定标准，不构成 breaking change。
genCssVar(antCls, 'mentions')生成--ant-mentions-*是整个仓库的统一做法。检查显示：
- 仓库内所有 8 个组件（tooltip、button、input-number、float-btn、grid、wave、masonry、mentions）均采用相同 genCssVar 模式
- 无任何代码、文档引用旧的
--mentions-*变量名，说明不存在对外的公开约定- Git 历史确认此为最近的有意重构（commit 5d89706）
- 该实现符合项目编码指南
Likely an incorrect or invalid review comment.
Deploying ant-design with
|
| Latest commit: |
ce47b88
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://51b00ad3.ant-design.pages.dev |
| Branch Preview URL: | https://mentions-09.ant-design.pages.dev |
Deploying ant-design-next with
|
| Latest commit: |
ce47b88
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://985b056c.ant-design-next.pages.dev |
| Branch Preview URL: | https://mentions-09.ant-design-next.pages.dev |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #56550 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 805 805
Lines 14866 14868 +2
Branches 3919 3919
=========================================
+ Hits 14866 14868 +2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
@copilot 请帮我排查，为什么 small 尺寸和 large 尺寸下的样式不生效了 |
|
@li-jia-nan I've opened a new pull request, #56554, to work on those changes. Once the pull request is ready, I'll request review from you. |
b539e3a to
8ed882a
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @components/mentions/style/index.ts:
- Around line 179-188: The size-specific selectors '&-lg' and '&-sm' generate
single-class selectors (e.g., .ant-mentions-lg) that lose to the base
.ant-mentions rules; update those entries in the mentions style (the block
containing '&-lg' and '&-sm' that sets [varName('padding-inline')],
[varName('padding-block')], and [varName('control-height')]) to use
double-ampersand form ('&&-lg' and '&&-sm') so the compiled selectors become
.ant-mentions.ant-mentions-lg / .ant-mentions.ant-mentions-sm and thus have
higher specificity for the size overrides.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/mentions/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/mentions/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/mentions/style/index.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/mentions/style/index.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/mentions/style/index.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/mentions/style/index.ts
🧠 Learnings (14)
📓 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 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/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
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 : Generate styles with functions named `gen[ComponentName]Style`
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`)
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
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 : 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
📚 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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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 : Optimize for minimal re-renders
Applied to files:
components/mentions/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/mentions/style/index.ts
🧬 Code graph analysis (1)
components/mentions/style/index.ts (2)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-57)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). (16)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test lib/es module (lib, 1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: lint
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: build
- 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: size
- GitHub Check: build
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (2)
components/mentions/style/index.ts (2)
148-149:genCssVar初始化正确。使用
genCssVar(antCls, 'mentions')生成 CSS 变量名和引用函数的方式符合工具函数的设计模式。
210-238: CSS 变量引用实现正确。
varRef的使用方式正确，包括：
calc(varRef('control-height'))用于动态计算minHeightpaddingInline和paddingBlock正确引用了 CSS 变量- 使用了 CSS 逻辑属性（如
paddingInline、paddingBlock）支持 RTL 布局符合项目的设计规范和编码指南。
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @components/mentions/style/index.ts:
- Around line 148-150: genMentionsStyle assigns numeric tokens directly to CSS
variables (via genCssVar/varRef) causing unit-less values that break using them
in calc() and padding declarations; wrap all numeric tokens (e.g.,
token.paddingInline, token.controlHeight, and any other size/height/spacing
tokens set as CSS vars around the zones you modified) with the imported unit()
helper before assigning to the CSS variables (the ranges around where genCssVar
is used and the later varRef uses — previously at the blocks you flagged) so
variables carry proper units and lg/sm size overrides work as expected.
In @components/theme/util/genStyleUtils.ts:
- Around line 45-51: The module-level auto-increment in generateId causes
non-deterministic CSS variable names across renders; replace the incremental
counter in generateId (used by genCssVar) with a deterministic suffix computed
from stable inputs (e.g., a stable hash of hashId, theme, component or
antCls+component string) or remove the suffix and rely on the existing scoping
(antCls + component) to produce stable names; update genCssVar and any callers
(e.g., parseColor, GenerateStyle) to accept or derive that stable identifier so
SSR and client renders produce identical variable names.
🧹 Nitpick comments (1)
components/theme/util/genStyleUtils.ts (1)
57-69: 建议对component/antCls做更严格的自定义属性名规范化目前只对
antCls做了.替换（Line 63），如果未来component传入非[-_a-zA-Z0-9]字符，可能生成不符合预期的自定义属性名片段。建议至少将component也做一层规范化（替换空格/特殊字符）。
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/mentions/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/mentions/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/mentions/style/index.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/mentions/style/index.tscomponents/theme/util/genStyleUtils.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/mentions/style/index.tscomponents/theme/util/genStyleUtils.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/mentions/style/index.tscomponents/theme/util/genStyleUtils.ts
🧠 Learnings (18)
📓 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 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 : Generate styles with functions named `gen[ComponentName]Style`
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: .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 components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
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
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
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
📚 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/mentions/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/mentions/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/mentions/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/mentions/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 : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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/mentions/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 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
Applied to files:
components/mentions/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 : 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/mentions/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/mentions/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/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/mentions/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 : Optimize for minimal re-renders
Applied to files:
components/mentions/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/mentions/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/theme/util/genStyleUtils.ts
🧬 Code graph analysis (1)
components/mentions/style/index.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(57-71)
⏰ 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: visual-diff snapshot (1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: build
- GitHub Check: test-node
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: lint
- 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 (1)
components/mentions/style/index.ts (1)
154-161: Mentions 的 size class 已正确触发&-lg/&-sm覆盖，无需额外确认你的实现已正确处理。Mentions 组件在
index.tsx第 220-221 行明确生成${prefixCls}-sm和${prefixCls}-lg的 className，因此style/index.ts第 307-316 行的&-lg/&-sm选择器会正常触发，与第 206-207 行的 CSS 变量覆盖配合工作正常。
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log