From 3f5129ac44c4cc7d7cc3e9f71e525953e7d29ea1 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sat, 10 Jan 2026 11:58:32 +0800
Subject: [PATCH] refactor(Mentions): use genCssVar hook to generate CSS
 variables (#56550)

* update

* update

* update

* update

* update

* update
---
 components/mentions/style/index.ts     | 34 +++++++++++++-------------
 components/theme/util/genStyleUtils.ts | 16 +++++++-----
 package.json                           |  2 +-
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts
index 09f7a1509f..000f0e580b 100644
--- a/components/mentions/style/index.ts
+++ b/components/mentions/style/index.ts
@@ -17,6 +17,7 @@ import {
 import { resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
+import { genCssVar } from '../../theme/util/genStyleUtils';
 
 export interface ComponentToken extends SharedComponentToken {
   /**
@@ -144,8 +145,8 @@ const genDropdownStyle: GenerateStyle<MentionsToken> = (token) => {
 };
 
 const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
-  const { componentCls, calc, colorText, antCls, colorTextDisabled } = token;
-
+  const { componentCls, colorText, antCls, colorTextDisabled, calc } = token;
+  const [varName, varRef] = genCssVar(antCls, '_mentions_'); // TODO: change to `mentions`
   return {
     [componentCls]: [
       // =========================== Common ===========================
@@ -167,9 +168,9 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
 
       // ========================== Mentions ==========================
       {
-        '--mentions-padding-inline': token.paddingInline,
-        '--mentions-padding-block': token.paddingBlock,
-        '--mentions-control-height': token.controlHeight,
+        [varName('padding-inline')]: token.paddingInline,
+        [varName('padding-block')]: token.paddingBlock,
+        [varName('control-height')]: token.controlHeight,
 
         display: 'flex',
         padding: 0,
@@ -199,11 +200,11 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
           color: colorText,
           boxSizing: 'border-box',
           margin: 0,
-          minHeight: calc('var(--mentions-control-height)')
+          minHeight: calc(varRef('control-height'))
             .sub(calc(token.lineWidth).mul(2).equal())
             .equal(),
-          paddingInline: 'var(--mentions-padding-inline)',
-          paddingBlock: 'var(--mentions-padding-block)',
+          paddingInline: varRef('padding-inline'),
+          paddingBlock: varRef('padding-block'),
           overflow: 'inherit',
           overflowX: 'hidden',
           overflowY: 'auto',
@@ -250,7 +251,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
           position: 'absolute',
           top: '50%',
           transform: 'translateY(-50%)',
-          insetInlineEnd: 'var(--mentions-padding-inline)',
+          insetInlineEnd: varRef('padding-inline'),
           columnGap: token.marginXS,
 
           [`${componentCls}-clear-icon`]: {
@@ -288,7 +289,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
             paddingInlineEnd: calc(token.paddingXXS)
               .mul(1.5)
               .add(token.fontSizeIcon)
-              .add('var(--mentions-padding-inline)')
+              .add(varRef('padding-inline'))
               .equal(),
           },
         },
@@ -302,17 +303,16 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
           },
         },
       },
-      // ============================ Size ============================
       {
         '&-lg': {
-          '--mentions-padding-inline': token.paddingInlineLG,
-          '--mentions-padding-block': token.paddingBlockLG,
-          '--mentions-control-height': token.controlHeightLG,
+          [varName('padding-inline')]: token.paddingInlineLG,
+          [varName('padding-block')]: token.paddingBlockLG,
+          [varName('control-height')]: token.controlHeightLG,
         },
         '&-sm': {
-          '--mentions-padding-inline': token.paddingInlineSM,
-          '--mentions-padding-block': token.paddingBlockSM,
-          '--mentions-control-height': token.controlHeightSM,
+          [varName('padding-inline')]: token.paddingInlineSM,
+          [varName('padding-block')]: token.paddingBlockSM,
+          [varName('control-height')]: token.controlHeightSM,
         },
       },
     ],
diff --git a/components/theme/util/genStyleUtils.ts b/components/theme/util/genStyleUtils.ts
index 430b2e75b4..c4256b6c21 100644
--- a/components/theme/util/genStyleUtils.ts
+++ b/components/theme/util/genStyleUtils.ts
@@ -42,15 +42,19 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge
   getCompUnitless: (() => unitless) as GetCompUnitless<ComponentTokenMap, AliasToken>,
 });
 
-type CssVarName = (inputs: string) => `--${string}`;
-type CssVarRef = (inputs: string, fallback?: string) => `var(--${string})`;
+type CalcCssVarName = (inputs: string) => `--${string}`;
 
-export const genCssVar = (antCls: string, component: string): readonly [CssVarName, CssVarRef] => {
-  const cssPrefix = `--${antCls.replace(/\./g, '')}-${component}-` as `--${string}`;
-  const varName: CssVarName = (name) => {
+type CalcCssVarRef = (inputs: string, fallback?: string) => `var(--${string})`;
+
+export const genCssVar = (
+  antCls: string,
+  component: string,
+): readonly [CalcCssVarName, CalcCssVarRef] => {
+  const cssPrefix = `--${antCls.replace(/\./g, '')}-${component}-` satisfies `--${string}`;
+  const varName: CalcCssVarName = (name) => {
     return `${cssPrefix}${name}`;
   };
-  const varRef: CssVarRef = (name, fallback) => {
+  const varRef: CalcCssVarRef = (name, fallback) => {
     return fallback ? `var(${cssPrefix}${name}, ${fallback})` : `var(${cssPrefix}${name})`;
   };
   return [varName, varRef] as const;
diff --git a/package.json b/package.json
index 77cf51389e..a270e93f67 100644
--- a/package.json
+++ b/package.json
@@ -338,7 +338,7 @@
     },
     {
       "path": "./dist/antd-with-locales.min.js",
-      "limit": "617 KiB",
+      "limit": "618 KiB",
       "gzip": true
     }
   ],