feat: Breadcrumb support cssVar (#45899)

* feat: Breadcrumb support cssVar

* fix: fix

* Update components/breadcrumb/style/index.ts

Co-authored-by: MadCcc <madccc@foxmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* Update components/breadcrumb/style/index.ts

Co-authored-by: MadCcc <madccc@foxmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <madccc@foxmail.com>

components/breadcrumb/Breadcrumb.tsx

@@ -12,6 +12,7 @@ import type { BreadcrumbItemProps } from './BreadcrumbItem';
 import BreadcrumbItem, { InternalBreadcrumbItem } from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 import useItemRender from './useItemRender';
 import useItems from './useItems';
 
@@ -93,8 +94,10 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
   const { getPrefixCls, direction, breadcrumb } = React.useContext(ConfigContext);
 
   let crumbs: React.ReactNode;
+
   const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const mergedItems = useItems(items, legacyRoutes);
 
@@ -216,7 +219,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
 
   const mergedStyle: React.CSSProperties = { ...breadcrumb?.style, ...style };
 
-  return wrapSSR(
+  return wrapCSSVar(
     <nav className={breadcrumbClassName} style={mergedStyle} {...restProps}>
       <ol>{crumbs}</ol>
     </nav>,

components/breadcrumb/style/cssVar.ts

@@ -0,0 +1,4 @@
+import { prepareComponentToken } from '.';
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister<'Breadcrumb'>('Breadcrumb', prepareComponentToken);

components/breadcrumb/style/index.ts

@@ -1,6 +1,7 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
 import { genFocusStyle, resetComponent } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -44,7 +45,7 @@ export interface ComponentToken {
 interface BreadcrumbToken extends FullToken<'Breadcrumb'> {}
 
 const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) => {
-  const { componentCls, iconCls } = token;
+  const { componentCls, iconCls, calc } = token;
 
   return {
     [componentCls]: {
@@ -67,11 +68,11 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
       a: {
         color: token.linkColor,
         transition: `color ${token.motionDurationMid}`,
-        padding: `0 ${token.paddingXXS}px`,
+        padding: `0 ${unit(token.paddingXXS)}`,
         borderRadius: token.borderRadiusSM,
-        height: token.lineHeight * token.fontSize,
+        height: token.fontHeight,
         display: 'inline-block',
-        marginInline: -token.marginXXS,
+        marginInline: calc(token.marginXXS).mul(-1).equal(),
 
         '&:hover': {
           color: token.linkHoverColor,
@@ -101,10 +102,10 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
 
       [`${componentCls}-overlay-link`]: {
         borderRadius: token.borderRadiusSM,
-        height: token.lineHeight * token.fontSize,
+        height: token.fontHeight,
         display: 'inline-block',
-        padding: `0 ${token.paddingXXS}px`,
+        padding: `0 ${unit(token.paddingXXS)}`,
-        marginInline: -token.marginXXS,
+        marginInline: calc(token.marginXXS).mul(-1).equal(),
 
         [`> ${iconCls}`]: {
           marginInlineStart: token.marginXXS,
@@ -135,20 +136,22 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
   };
 };
 
+export const prepareComponentToken: GetDefaultToken<'Breadcrumb'> = (token) => ({
+  itemColor: token.colorTextDescription,
+  lastItemColor: token.colorText,
+  iconFontSize: token.fontSize,
+  linkColor: token.colorTextDescription,
+  linkHoverColor: token.colorText,
+  separatorColor: token.colorTextDescription,
+  separatorMargin: token.marginXS,
+});
+
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Breadcrumb',
   (token) => {
-    const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {});
+    const breadcrumbToken = mergeToken<BreadcrumbToken>(token, {});
-    return [genBreadcrumbStyle(BreadcrumbToken)];
+    return genBreadcrumbStyle(breadcrumbToken);
   },
-  (token) => ({
+  prepareComponentToken,
-    itemColor: token.colorTextDescription,
-    lastItemColor: token.colorText,
-    iconFontSize: token.fontSize,
-    linkColor: token.colorTextDescription,
-    linkHoverColor: token.colorText,
-    separatorColor: token.colorTextDescription,
-    separatorMargin: token.marginXS,
-  }),
 );

scripts/check-cssinjs.tsx

@@ -28,8 +28,6 @@ console.error = (msg: any) => {
 
 async function checkCSSVar() {
   const ignore = [
-    'anchor',
-    'breadcrumb',
     'calendar',
     'cascader',
     'checkbox',