From ee8cc276866abdda3fdf9de95104114f0ce91f11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 8 Jan 2026 15:05:28 +0800 Subject: [PATCH 1/6] fix: Badge ref not working (#56532) --- components/badge/Badge.tsx | 1 + components/badge/__tests__/index.test.tsx | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx index 89fcdd4510..c23cffbb72 100644 --- a/components/badge/Badge.tsx +++ b/components/badge/Badge.tsx @@ -211,6 +211,7 @@ const Badge = React.forwardRef((props, ref) => { const statusTextColor = mergedStyle.color; return ( { rerender(); expect(container.querySelectorAll('[title="0"]')).toHaveLength(1); }); + + it('should support ref when exist status & text', () => { + const badgeRef = React.createRef(); + const { container } = render(); + expect(badgeRef.current).toBe(container.querySelector('.ant-badge')); + }); }); From 6fac5c24bf45d7bdb7ef74dca8476928c52e651c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <66234749+QDyanbing@users.noreply.github.com> Date: Thu, 8 Jan 2026 15:06:11 +0800 Subject: [PATCH 2/6] fix(Select): correct clear icon position in sm size (#56525) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(Select): correct clear icon position in sm size * fix: add test case and use --select-padding-horizontal * test(Select): move test case to clear icon position * test(Select): remove unused test case --------- Co-authored-by: 遇见同学 <1875694521@qq.com> --- components/select/style/select-input.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/select/style/select-input.ts b/components/select/style/select-input.ts index 3c55f39f72..2515119193 100644 --- a/components/select/style/select-input.ts +++ b/components/select/style/select-input.ts @@ -231,6 +231,10 @@ const genSelectInputStyle: GenerateStyle = (token) => { '--select-height': token.controlHeightSM, '--select-padding-horizontal': calc(token.paddingXS).sub(token.lineWidth).equal(), '--select-border-radius': token.borderRadiusSM, + + [`${componentCls}-clear`]: { + insetInlineEnd: 'var(--select-padding-horizontal)', + }, }, '&-lg': { From 9bb27c410082f6b58a54634742b056ad37d49e56 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 9 Jan 2026 03:33:02 +0800 Subject: [PATCH 3/6] chore: upgrade deps (#56538) Co-authored-by: afc163 <507615+afc163@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a105fa3fa1..cd1401e6ff 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@rc-component/dialog": "~1.5.1", "@rc-component/drawer": "~1.3.0", "@rc-component/dropdown": "~1.0.2", - "@rc-component/form": "~1.6.1", + "@rc-component/form": "~1.6.2", "@rc-component/image": "~1.5.3", "@rc-component/input": "~1.1.2", "@rc-component/input-number": "~1.6.2", From ae98485a3eb89e1ac1c3a54594bddcca6bfa8642 Mon Sep 17 00:00:00 2001 From: baozj <127940123+baozjj@users.noreply.github.com> Date: Fri, 9 Jan 2026 11:24:38 +0800 Subject: [PATCH 4/6] chore: fix typo (#56541) Co-authored-by: baozj --- components/select/index.en-US.md | 4 ++-- components/table/index.en-US.md | 2 +- components/tree-select/index.en-US.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 1b173ecad8..535a34ea96 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -169,7 +169,7 @@ Common props ref：[Common props](/docs/react/common-props) ## FAQ -### Why sometime search will show 2 same option when in `tags` mode? {#faq-tags-mode-duplicate} +### Why sometimes search will show 2 same option when in `tags` mode? {#faq-tags-mode-duplicate} It's caused by option with different `label` and `value`. You can use `optionFilterProp="label"` to change filter logic instead. @@ -196,7 +196,7 @@ Select will close when it lose focus. You can prevent event to handle this: /> ``` -### Why sometime customize Option cause scroll break? {#faq-custom-option-scroll} +### Why sometimes customize Option cause scroll break? {#faq-custom-option-scroll} Virtual scroll internal set item height as `24px`. You need to adjust `listItemHeight` when your option height is less and `listHeight` config list container height: diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 457f57e578..471e60fe10 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -393,7 +393,7 @@ Table can not tell what state used in `columns.render`, so it always need fully ### How to handle fixed column display over the mask layout? {#faq-fixed-column-zindex} -Fixed column use `z-index` to make it over other columns. You will find sometime fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve. +Fixed column use `z-index` to make it over other columns. You will find sometimes fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve. ### How to custom render Table Checkbox（For example, adding Tooltip）? {#faq-custom-checkbox-render} diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index 462eb09f27..81532c21f3 100644 --- a/components/tree-select/index.en-US.md +++ b/components/tree-select/index.en-US.md @@ -145,7 +145,7 @@ Common props ref：[Common props](/docs/react/common-props) We don't provide this since performance consideration. You can get by this way: -### Why sometime customize Option cause scroll break? {#faq-custom-option-scroll} +### Why sometimes customize Option cause scroll break? {#faq-custom-option-scroll} You can ref Select [FAQ](/components/select). From ba47850fa0ce7d1dbcb0822826916c402521e188 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 9 Jan 2026 13:40:44 +0800 Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20=F0=9F=9B=A0=20use=20genCssVar?= =?UTF-8?q?=20hook=20to=20generate=20CSS=20variables=20(#56529)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/button/style/variant.ts | 236 ++++++++++++------------ components/float-button/style/button.ts | 9 +- components/float-button/style/group.ts | 27 ++- components/theme/util/genStyleUtils.ts | 18 +- package.json | 2 +- 5 files changed, 146 insertions(+), 146 deletions(-) diff --git a/components/button/style/variant.ts b/components/button/style/variant.ts index 4663279320..3c0dda45ff 100644 --- a/components/button/style/variant.ts +++ b/components/button/style/variant.ts @@ -6,8 +6,7 @@ import type { ButtonToken } from './token'; const genVariantStyle: GenerateStyle = (token) => { const { componentCls, antCls } = token; - // Default: '--ant-btn-' - const getCssVar = genCssVar(antCls, 'btn'); + const [varName, varRef] = genCssVar(antCls, 'btn'); return { [componentCls]: [ @@ -16,54 +15,58 @@ const genVariantStyle: GenerateStyle = (token) => { // ============================================================== { // Border - [getCssVar('border-width')]: '1px', + [varName`border-width`]: '1px', - [getCssVar('border-color')]: '#000', - [getCssVar('border-color-hover')]: `var(${getCssVar('border-color')})`, - [getCssVar('border-color-active')]: `var(${getCssVar('border-color')})`, - [getCssVar('border-color-disabled')]: `var(${getCssVar('border-color')})`, + [varName`border-color`]: '#000', + [varName`border-color-hover`]: varRef`border-color`, + [varName`border-color-active`]: varRef`border-color`, + [varName`border-color-disabled`]: varRef`border-color`, - [getCssVar('border-style')]: 'solid', + [varName`border-style`]: 'solid', // Text - [getCssVar('text-color')]: '#000', - [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`, - [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`, - [getCssVar('text-color-disabled')]: `var(${getCssVar('text-color')})`, + [varName`text-color`]: '#000', + [varName`text-color-hover`]: varRef`text-color`, + [varName`text-color-active`]: varRef`text-color`, + [varName`text-color-disabled`]: varRef`text-color`, // Background - [getCssVar('bg-color')]: '#ddd', - [getCssVar('bg-color-hover')]: `var(${getCssVar('bg-color')})`, - [getCssVar('bg-color-active')]: `var(${getCssVar('bg-color')})`, - [getCssVar('bg-color-disabled')]: token.colorBgContainerDisabled, - [getCssVar('bg-color-container')]: token.colorBgContainer, + [varName`bg-color`]: '#ddd', + [varName`bg-color-hover`]: varRef`bg-color`, + [varName`bg-color-active`]: varRef`bg-color`, + [varName`bg-color-disabled`]: token.colorBgContainerDisabled, + [varName`bg-color-container`]: token.colorBgContainer, // Shadow - [getCssVar('shadow')]: 'none', + [varName`shadow`]: 'none', }, // ============================================================== // == Template == // ============================================================== { // Basic - border: `var(${getCssVar('border-width')}) var(${getCssVar('border-style')}) var(${getCssVar('border-color')})`, - color: `var(${getCssVar('text-color')})`, - backgroundColor: `var(${getCssVar('bg-color')})`, + border: [varRef`border-width`, varRef`border-style`, varRef`border-color`].join(' '), + color: varRef`text-color`, + backgroundColor: varRef`bg-color`, // Status [`&:not(:disabled):not(${componentCls}-disabled)`]: { // Hover '&:hover': { - border: `var(${getCssVar('border-width')}) var(${getCssVar('border-style')}) var(${getCssVar('border-color-hover')})`, - color: `var(${getCssVar('text-color-hover')})`, - backgroundColor: `var(${getCssVar('bg-color-hover')})`, + border: [varRef`border-width`, varRef`border-style`, varRef`border-color-hover`].join( + ' ', + ), + color: varRef`text-color-hover`, + backgroundColor: varRef`bg-color-hover`, }, // Active '&:active': { - border: `var(${getCssVar('border-width')}) var(${getCssVar('border-style')}) var(${getCssVar('border-color-active')})`, - color: `var(${getCssVar('text-color-active')})`, - backgroundColor: `var(${getCssVar('bg-color-active')})`, + border: [varRef`border-width`, varRef`border-style`, varRef`border-color-active`].join( + ' ', + ), + color: varRef`text-color-active`, + backgroundColor: varRef`bg-color-active`, }, }, }, @@ -75,67 +78,65 @@ const genVariantStyle: GenerateStyle = (token) => { // >>>>> Solid [`&${componentCls}-variant-solid`]: { // Solid Variables - [getCssVar('solid-bg-color')]: `var(${getCssVar('color-base')})`, - [getCssVar('solid-bg-color-hover')]: `var(${getCssVar('color-hover')})`, - [getCssVar('solid-bg-color-active')]: `var(${getCssVar('color-active')})`, + [varName`solid-bg-color`]: varRef`color-base`, + [varName`solid-bg-color-hover`]: varRef`color-hover`, + [varName`solid-bg-color-active`]: varRef`color-active`, // Variables - [getCssVar('border-color')]: 'transparent', + [varName`border-color`]: 'transparent', - [getCssVar('text-color')]: token.colorTextLightSolid, + [varName`text-color`]: token.colorTextLightSolid, - [getCssVar('bg-color')]: `var(${getCssVar('solid-bg-color')})`, - [getCssVar('bg-color-hover')]: `var(${getCssVar('solid-bg-color-hover')})`, - [getCssVar('bg-color-active')]: `var(${getCssVar('solid-bg-color-active')})`, + [varName`bg-color`]: varRef`solid-bg-color`, + [varName`bg-color-hover`]: varRef`solid-bg-color-hover`, + [varName`bg-color-active`]: varRef`solid-bg-color-active`, // Box Shadow - boxShadow: `var(${getCssVar('shadow')})`, + boxShadow: varRef`shadow`, }, // >>>>> Outlined & Dashed [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: { - [getCssVar('border-color')]: `var(${getCssVar('color-base')})`, - [getCssVar('border-color-hover')]: `var(${getCssVar('color-hover')})`, - [getCssVar('border-color-active')]: `var(${getCssVar('color-active')})`, + [varName`border-color`]: varRef`color-base`, + [varName`border-color-hover`]: varRef`color-hover`, + [varName`border-color-active`]: varRef`color-active`, - [getCssVar('bg-color')]: `var(${getCssVar('bg-color-container')})`, - - [getCssVar('text-color')]: `var(${getCssVar('color-base')})`, - [getCssVar('text-color-hover')]: `var(${getCssVar('color-hover')})`, - [getCssVar('text-color-active')]: `var(${getCssVar('color-active')})`, + [varName`bg-color`]: varRef`bg-color-container`, + [varName`text-color`]: varRef`color-base`, + [varName`text-color-hover`]: varRef`color-hover`, + [varName`text-color-active`]: varRef`color-active`, // Box Shadow - boxShadow: `var(${getCssVar('shadow')})`, + boxShadow: varRef`shadow`, }, // >>>>> Dashed [`&${componentCls}-variant-dashed`]: { - [getCssVar('border-style')]: 'dashed', - [getCssVar('bg-color-disabled')]: token.dashedBgDisabled, + [varName`border-style`]: 'dashed', + [varName`bg-color-disabled`]: token.dashedBgDisabled, }, // >>>>> Filled [`&${componentCls}-variant-filled`]: { - [getCssVar('border-color')]: 'transparent', + [varName`border-color`]: 'transparent', - [getCssVar('text-color')]: `var(${getCssVar('color-base')})`, + [varName`text-color`]: varRef`color-base`, - [getCssVar('bg-color')]: `var(${getCssVar('color-light')})`, - [getCssVar('bg-color-hover')]: `var(${getCssVar('color-light-hover')})`, - [getCssVar('bg-color-active')]: `var(${getCssVar('color-light-active')})`, + [varName`bg-color`]: varRef`color-light`, + [varName`bg-color-hover`]: varRef`color-light-hover`, + [varName`bg-color-active`]: varRef`color-light-active`, }, // >>>>> Text & Link [`&${componentCls}-variant-text, &${componentCls}-variant-link`]: { - [getCssVar('border-color')]: 'transparent', + [varName`border-color`]: 'transparent', - [getCssVar('text-color')]: `var(${getCssVar('color-base')})`, - [getCssVar('text-color-hover')]: `var(${getCssVar('color-hover')})`, - [getCssVar('text-color-active')]: `var(${getCssVar('color-active')})`, - - [getCssVar('bg-color')]: 'transparent', - [getCssVar('bg-color-hover')]: 'transparent', - [getCssVar('bg-color-active')]: 'transparent', + [varName`text-color`]: varRef`color-base`, + [varName`text-color-hover`]: varRef`color-hover`, + [varName`text-color-active`]: varRef`color-active`, + [varName`bg-color`]: 'transparent', + [varName`bg-color-hover`]: 'transparent', + [varName`bg-color-active`]: 'transparent', [`&:disabled, &${token.componentCls}-disabled`]: { background: 'transparent', @@ -145,8 +146,8 @@ const genVariantStyle: GenerateStyle = (token) => { // >>>>> Text [`&${componentCls}-variant-text`]: { - [getCssVar('bg-color-hover')]: `var(${getCssVar('color-light')})`, - [getCssVar('bg-color-active')]: `var(${getCssVar('color-light-active')})`, + [varName`bg-color-hover`]: varRef`color-light`, + [varName`bg-color-active`]: varRef`color-light-active`, }, }, @@ -157,88 +158,87 @@ const genVariantStyle: GenerateStyle = (token) => { // ======================== By Default ======================== // >>>>> Link [`&${componentCls}-variant-link`]: { - [getCssVar('color-base')]: token.colorLink, - [getCssVar('color-hover')]: token.colorLinkHover, - [getCssVar('color-active')]: token.colorLinkActive, + [varName`color-base`]: token.colorLink, + [varName`color-hover`]: token.colorLinkHover, + [varName`color-active`]: token.colorLinkActive, }, // ======================== Compatible ======================== // >>>>> Primary [`&${componentCls}-color-primary`]: { - [getCssVar('color-base')]: token.colorPrimary, - [getCssVar('color-hover')]: token.colorPrimaryHover, - [getCssVar('color-active')]: token.colorPrimaryActive, - [getCssVar('color-light')]: token.colorPrimaryBg, - [getCssVar('color-light-hover')]: token.colorPrimaryBgHover, - [getCssVar('color-light-active')]: token.colorPrimaryBorder, + [varName`color-base`]: token.colorPrimary, + [varName`color-hover`]: token.colorPrimaryHover, + [varName`color-active`]: token.colorPrimaryActive, + [varName`color-light`]: token.colorPrimaryBg, + [varName`color-light-hover`]: token.colorPrimaryBgHover, + [varName`color-light-active`]: token.colorPrimaryBorder, - [getCssVar('shadow')]: token.primaryShadow, + [varName`shadow`]: token.primaryShadow, [`&${componentCls}-variant-solid`]: { - [getCssVar('text-color')]: token.primaryColor, - [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`, - [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`, + [varName`text-color`]: token.primaryColor, + [varName`text-color-hover`]: varRef`text-color`, + [varName`text-color-active`]: varRef`text-color`, }, }, // >>>>> Danger [`&${componentCls}-color-dangerous`]: { - [getCssVar('color-base')]: token.colorError, - [getCssVar('color-hover')]: token.colorErrorHover, - [getCssVar('color-active')]: token.colorErrorActive, - [getCssVar('color-light')]: token.colorErrorBg, - [getCssVar('color-light-hover')]: token.colorErrorBgFilledHover, - [getCssVar('color-light-active')]: token.colorErrorBgActive, + [varName`color-base`]: token.colorError, + [varName`color-hover`]: token.colorErrorHover, + [varName`color-active`]: token.colorErrorActive, + [varName`color-light`]: token.colorErrorBg, + [varName`color-light-hover`]: token.colorErrorBgFilledHover, + [varName`color-light-active`]: token.colorErrorBgActive, - [getCssVar('shadow')]: token.dangerShadow, + [varName`shadow`]: token.dangerShadow, [`&${componentCls}-variant-solid`]: { - [getCssVar('text-color')]: token.dangerColor, - [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`, - [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`, + [varName`text-color`]: token.dangerColor, + [varName`text-color-hover`]: varRef`text-color`, + [varName`text-color-active`]: varRef`text-color`, }, }, // >>>>> Default [`&${componentCls}-color-default`]: { - [getCssVar('solid-bg-color')]: token.colorBgSolid, - [getCssVar('solid-bg-color-hover')]: token.colorBgSolidHover, - [getCssVar('solid-bg-color-active')]: token.colorBgSolidActive, + [varName`solid-bg-color`]: token.colorBgSolid, + [varName`solid-bg-color-hover`]: token.colorBgSolidHover, + [varName`solid-bg-color-active`]: token.colorBgSolidActive, - [getCssVar('color-base')]: token.defaultBorderColor, - [getCssVar('color-hover')]: token.defaultHoverBorderColor, - [getCssVar('color-active')]: token.defaultActiveBorderColor, + [varName`color-base`]: token.defaultBorderColor, + [varName`color-hover`]: token.defaultHoverBorderColor, + [varName`color-active`]: token.defaultActiveBorderColor, - [getCssVar('color-light')]: token.colorFillTertiary, - [getCssVar('color-light-hover')]: token.colorFillSecondary, - [getCssVar('color-light-active')]: token.colorFill, + [varName`color-light`]: token.colorFillTertiary, + [varName`color-light-hover`]: token.colorFillSecondary, + [varName`color-light-active`]: token.colorFill, - [getCssVar('text-color')]: token.colorText, - [getCssVar('text-color-hover')]: token.defaultHoverBorderColor, - [getCssVar('text-color-active')]: token.defaultActiveBorderColor, - - [getCssVar('shadow')]: token.defaultShadow, + [varName`text-color`]: token.colorText, + [varName`text-color-hover`]: token.defaultHoverBorderColor, + [varName`text-color-active`]: token.defaultActiveBorderColor, + [varName`shadow`]: token.defaultShadow, [`&${componentCls}-variant-solid`]: { - [getCssVar('text-color')]: token.solidTextColor, - [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`, - [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`, + [varName`text-color`]: token.solidTextColor, + [varName`text-color-hover`]: varRef`text-color`, + [varName`text-color-active`]: varRef`text-color`, }, [`&${componentCls}-variant-filled, &${componentCls}-variant-text`]: { - [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`, - [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`, + [varName`text-color-hover`]: varRef`text-color`, + [varName`text-color-active`]: varRef`text-color`, }, [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: { - [getCssVar('bg-color-hover')]: token.defaultHoverBg, - [getCssVar('bg-color-active')]: token.defaultActiveBg, + [varName`bg-color-hover`]: token.defaultHoverBg, + [varName`bg-color-active`]: token.defaultActiveBg, }, [`&${componentCls}-background-ghost`]: { [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: { - [getCssVar('text-color')]: token.defaultGhostColor, - [getCssVar('border-color')]: token.defaultGhostBorderColor, + [varName`text-color`]: token.defaultGhostColor, + [varName`border-color`]: token.defaultGhostBorderColor, }, }, }, @@ -257,13 +257,13 @@ const genVariantStyle: GenerateStyle = (token) => { return { [`&${componentCls}-color-${colorKey}`]: { - [getCssVar('color-base')]: darkColor, - [getCssVar('color-hover')]: hoverColor, - [getCssVar('color-active')]: activeColor, - [getCssVar('color-light')]: lightColor, - [getCssVar('color-light-hover')]: lightHoverColor, - [getCssVar('color-light-active')]: lightActiveColor, - [getCssVar('shadow')]: shadowColor, + [varName`color-base`]: darkColor, + [varName`color-hover`]: hoverColor, + [varName`color-active`]: activeColor, + [varName`color-light`]: lightColor, + [varName`color-light-hover`]: lightHoverColor, + [varName`color-light-active`]: lightActiveColor, + [varName`shadow`]: shadowColor, }, }; }), @@ -276,7 +276,7 @@ const genVariantStyle: GenerateStyle = (token) => { [`&:disabled, &${token.componentCls}-disabled`]: { cursor: 'not-allowed', borderColor: token.colorBorderDisabled, - background: `var(${getCssVar('bg-color-disabled')})`, + background: varRef`bg-color-disabled`, color: token.colorTextDisabled, boxShadow: 'none', }, @@ -288,8 +288,8 @@ const genVariantStyle: GenerateStyle = (token) => { { // Ghost [`&${componentCls}-background-ghost`]: { - [getCssVar('bg-color')]: 'transparent', - [getCssVar('shadow')]: 'none', + [varName`bg-color`]: 'transparent', + [varName`shadow`]: 'none', }, }, ], diff --git a/components/float-button/style/button.ts b/components/float-button/style/button.ts index 87eb1ca035..de1c3f6713 100644 --- a/components/float-button/style/button.ts +++ b/components/float-button/style/button.ts @@ -8,8 +8,7 @@ import { genCssVar } from '../../theme/util/genStyleUtils'; const genFloatButtonStyle: GenerateStyle = (token) => { const { componentCls, floatButtonSize, iconCls, antCls, floatButtonIconSize } = token; - // Default: '--ant-float-btn-' - const getCssVar = genCssVar(antCls, 'float-btn'); + const [varName, varRef] = genCssVar(antCls, 'float-btn'); const badgeCls = `${componentCls}-badge`; @@ -25,7 +24,7 @@ const genFloatButtonStyle: GenerateStyle = (token) // == Variable == // ============================================================== { - [getCssVar('size')]: unit(floatButtonSize), + [varName`size`]: unit(floatButtonSize), }, // ============================================================== @@ -36,8 +35,8 @@ const genFloatButtonStyle: GenerateStyle = (token) margin: 0, padding: `${unit(token.paddingXXS)} 0`, - width: `var(${getCssVar('size')})`, - minHeight: `var(${getCssVar('size')})`, + width: varRef`size`, + minHeight: varRef`size`, height: 'auto', wordBreak: 'break-word', whiteSpace: 'normal', diff --git a/components/float-button/style/group.ts b/components/float-button/style/group.ts index 2a11b1b6bc..4387fb736e 100644 --- a/components/float-button/style/group.ts +++ b/components/float-button/style/group.ts @@ -12,8 +12,7 @@ const genGroupStyle: GenerateStyle = (token) => { const groupCls = `${componentCls}-group`; const listCls = `${groupCls}-list`; - // Default: '--ant-float-btn-' - const getCssVar = genCssVar(antCls, 'float-btn'); + const [varName, varRef] = genCssVar(antCls, 'float-btn'); return { [groupCls]: [ @@ -21,8 +20,8 @@ const genGroupStyle: GenerateStyle = (token) => { // == Variable == // ============================================================== { - [getCssVar('list-transform-start')]: `translate(0,${unit(floatButtonSize)})`, - [getCssVar('list-trigger-offset')]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`, + [varName`list-transform-start`]: `translate(0,${unit(floatButtonSize)})`, + [varName`list-trigger-offset`]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`, }, // ============================================================== @@ -81,7 +80,7 @@ const genGroupStyle: GenerateStyle = (token) => { '&-enter, &-appear': { opacity: 0, - transform: getCssVar('list-transform-start', true), + transform: varRef`list-transform-start`, '&-active': { opacity: 1, @@ -92,7 +91,7 @@ const genGroupStyle: GenerateStyle = (token) => { '&-leave': { '&-active': { opacity: 0, - transform: getCssVar('list-transform-start', true), + transform: varRef`list-transform-start`, }, }, }, @@ -101,30 +100,28 @@ const genGroupStyle: GenerateStyle = (token) => { // ======================== Placements ======================== '&-top': { [listCls]: { - bottom: getCssVar('list-trigger-offset', true), + bottom: varRef`list-trigger-offset`, }, }, '&-bottom': { [listCls]: { - [getCssVar('list-transform-start')]: - `translate(0, calc(${unit(floatButtonSize)} * -1))`, - top: getCssVar('list-trigger-offset', true), + [varName`list-transform-start`]: `translate(0, calc(${unit(floatButtonSize)} * -1))`, + top: varRef`list-trigger-offset`, }, }, '&-left': { [listCls]: { - [getCssVar('list-transform-start')]: `translate(${unit(floatButtonSize)}, 0)`, - right: getCssVar('list-trigger-offset', true), + [varName`list-transform-start`]: `translate(${unit(floatButtonSize)}, 0)`, + right: varRef`list-trigger-offset`, }, }, '&-right': { [listCls]: { - [getCssVar('list-transform-start')]: - `translate(calc(${unit(floatButtonSize)} * -1), 0)`, - left: getCssVar('list-trigger-offset', true), + [varName`list-transform-start`]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`, + left: varRef`list-trigger-offset`, }, }, }, diff --git a/components/theme/util/genStyleUtils.ts b/components/theme/util/genStyleUtils.ts index 34e905086a..9088893aad 100644 --- a/components/theme/util/genStyleUtils.ts +++ b/components/theme/util/genStyleUtils.ts @@ -42,11 +42,15 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge getCompUnitless: (() => unitless) as GetCompUnitless, }); -export const genCssVar = (antCls: string, componentAbbr: string) => { - const cssPrefix = `--${antCls.replace('.', '')}-${componentAbbr}-`; - - return (name: string, withVar = false) => { - const raw = `${cssPrefix}${name}`; - return withVar ? `var(${raw})` : raw; - }; +export const genCssVar = ( + antCls: string, + componentAbbr: string, +): readonly [ + varName: (inputs: TemplateStringsArray) => string, + varRef: (inputs: TemplateStringsArray) => string, +] => { + const cssPrefix = `--${antCls.replace(/\./, '')}-${componentAbbr}-`; + const varName = (inputs: TemplateStringsArray) => `${cssPrefix}${inputs[0]}`; + const varRef = (inputs: TemplateStringsArray) => `var(${cssPrefix}${inputs[0]})`; + return [varName, varRef] as const; }; diff --git a/package.json b/package.json index cd1401e6ff..4c3c4adffe 100644 --- a/package.json +++ b/package.json @@ -333,7 +333,7 @@ "size-limit": [ { "path": "./dist/antd.min.js", - "limit": "523 KiB", + "limit": "524 KiB", "gzip": true }, { From b1bb15a7533ffab0491945bc4f81366ad37bed17 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 9 Jan 2026 15:21:08 +0800 Subject: [PATCH 6/6] update --- components/pagination/style/index.ts | 80 ++++++++++++---------------- 1 file changed, 33 insertions(+), 47 deletions(-) diff --git a/components/pagination/style/index.ts b/components/pagination/style/index.ts index 16fbfa07ac..7012c0bc69 100644 --- a/components/pagination/style/index.ts +++ b/components/pagination/style/index.ts @@ -254,17 +254,16 @@ const genPaginationLargeStyle: GenerateStyle = (toke const genPaginationSimpleStyle: GenerateStyle = (token) => { const { componentCls, antCls } = token; - // Default: '--ant-pagination-' - const getCssVar = genCssVar(antCls, 'pagination'); + const [, varRef] = genCssVar(antCls, 'pagination'); return { [`&${componentCls}-simple`]: { [`${componentCls}-prev, ${componentCls}-next`]: { - height: `var(${getCssVar('item-size-actual')})`, - lineHeight: `var(${getCssVar('item-size-actual')})`, + height: varRef`item-size-actual`, + lineHeight: varRef`item-size-actual`, verticalAlign: 'top', [`${componentCls}-item-link`]: { - height: `var(${getCssVar('item-size-actual')})`, + height: varRef`item-size-actual`, backgroundColor: 'transparent', border: 0, '&:hover': { @@ -274,8 +273,8 @@ const genPaginationSimpleStyle: GenerateStyle = (tok backgroundColor: token.colorBgTextActive, }, '&::after': { - height: `var(${getCssVar('item-size-actual')})`, - lineHeight: `var(${getCssVar('item-size-actual')})`, + height: varRef`item-size-actual`, + lineHeight: varRef`item-size-actual`, }, }, }, @@ -283,8 +282,8 @@ const genPaginationSimpleStyle: GenerateStyle = (tok [`${componentCls}-simple-pager`]: { display: 'inline-flex', alignItems: 'center', - height: `var(${getCssVar('item-size-actual')})`, - marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`, + height: varRef`item-size-actual`, + marginInlineEnd: varRef`item-spacing-actual`, input: { boxSizing: 'border-box', @@ -343,8 +342,7 @@ const genPaginationSimpleStyle: GenerateStyle = (tok const genPaginationJumpStyle: GenerateStyle = (token) => { const { componentCls, antCls } = token; - // Default: '--ant-pagination-' - const getCssVar = genCssVar(antCls, 'pagination'); + const [, varRef] = genCssVar(antCls, 'pagination'); return { [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: { @@ -400,7 +398,7 @@ const genPaginationJumpStyle: GenerateStyle = (token ${componentCls}-jump-prev, ${componentCls}-jump-next `]: { - marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`, + marginInlineEnd: varRef`item-spacing-actual`, }, [` @@ -410,11 +408,11 @@ const genPaginationJumpStyle: GenerateStyle = (token ${componentCls}-jump-next `]: { display: 'inline-block', - minWidth: `var(${getCssVar('item-size-actual')})`, - height: `var(${getCssVar('item-size-actual')})`, + minWidth: varRef`item-size-actual`, + height: varRef`item-size-actual`, color: token.colorText, fontFamily: token.fontFamily, - lineHeight: `var(${getCssVar('item-size-actual')})`, + lineHeight: varRef`item-size-actual`, textAlign: 'center', verticalAlign: 'middle', listStyle: 'none', @@ -477,9 +475,9 @@ const genPaginationJumpStyle: GenerateStyle = (token '&-quick-jumper': { display: 'inline-block', - height: `var(${getCssVar('item-size-actual')})`, + height: varRef`item-size-actual`, marginInlineStart: token.marginXS, - lineHeight: `var(${getCssVar('item-size-actual')})`, + lineHeight: varRef`item-size-actual`, verticalAlign: 'top', input: { @@ -495,11 +493,11 @@ const genPaginationJumpStyle: GenerateStyle = (token }, width: token.quickJumperInputWidth, - height: `var(${getCssVar('item-size-actual')})`, + height: varRef`item-size-actual`, boxSizing: 'border-box', margin: 0, - marginInlineStart: `var(${getCssVar('item-spacing-actual')})`, - marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`, + marginInlineStart: varRef`item-spacing-actual`, + marginInlineEnd: varRef`item-spacing-actual`, }, }, }, @@ -509,22 +507,16 @@ const genPaginationJumpStyle: GenerateStyle = (token const genPaginationItemStyle: GenerateStyle = (token) => { const { componentCls, antCls } = token; - // Default: '--ant-pagination-' - const getCssVar = genCssVar(antCls, 'pagination'); + const [, varRef] = genCssVar(antCls, 'pagination'); return { [`${componentCls}-item`]: { display: 'inline-block', - minWidth: `var(${getCssVar('item-size-actual')})`, - height: `var(${getCssVar('item-size-actual')})`, - marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`, + minWidth: varRef`item-size-actual`, + height: varRef`item-size-actual`, + marginInlineEnd: varRef`item-spacing-actual`, fontFamily: token.fontFamily, - lineHeight: unit( - token - .calc(`var(${getCssVar('item-size-actual')})`) - .sub(2) - .equal(), - ), + lineHeight: unit(token.calc(varRef`item-size-actual`).sub(2).equal()), textAlign: 'center', verticalAlign: 'middle', listStyle: 'none', @@ -580,20 +572,19 @@ const genPaginationItemStyle: GenerateStyle = (token const genPaginationStyle: GenerateStyle = (token) => { const { componentCls, antCls } = token; - // Default: '--ant-pagination-' - const getCssVar = genCssVar(antCls, 'pagination'); + const [varName, varRef] = genCssVar(antCls, 'pagination'); return { [componentCls]: { - [getCssVar('item-size-actual')]: unit(token.itemSize), - [getCssVar('item-spacing-actual')]: unit(token.marginXS), + [varName`item-size-actual`]: unit(token.itemSize), + [varName`item-spacing-actual`]: unit(token.marginXS), '&-small': { - [getCssVar('item-size-actual')]: unit(token.itemSizeSM), - [getCssVar('item-spacing-actual')]: unit(token.marginXXS), + [varName`item-size-actual`]: unit(token.itemSizeSM), + [varName`item-spacing-actual`]: unit(token.marginXXS), }, '&-large': { - [getCssVar('item-size-actual')]: unit(token.itemSizeLG), - [getCssVar('item-spacing-actual')]: unit(token.marginSM), + [varName`item-size-actual`]: unit(token.itemSizeLG), + [varName`item-spacing-actual`]: unit(token.marginSM), }, ...resetComponent(token), @@ -628,14 +619,9 @@ const genPaginationStyle: GenerateStyle = (token) => [`${componentCls}-total-text`]: { display: 'inline-block', - height: `var(${getCssVar('item-size-actual')})`, - marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`, - lineHeight: unit( - token - .calc(`var(${getCssVar('item-size-actual')})`) - .sub(2) - .equal(), - ), + height: varRef`item-size-actual`, + marginInlineEnd: varRef`item-spacing-actual`, + lineHeight: unit(token.calc(varRef`item-size-actual`).sub(2).equal()), verticalAlign: 'middle', },