refactor: cssinjs for Breadcrumb (#35125)

* feat: add override token for breadcrumb

* refactor: cssinjs for Breadcrumb

* fix: hover color

Co-authored-by: MadCcc <1075746765@qq.com>

components/_util/theme/interface.ts

@@ -64,6 +64,7 @@ export interface OverrideToken {
   BackTop?: BackTopComponentToken;
   Badge?: {};
   Button?: ButtonComponentToken;
+  Breadcrumb?: {};
   Carousel?: CarouselComponentToken;
   Cascader?: CascaderComponentToken;
   Checkbox?: {};

components/breadcrumb/Breadcrumb.tsx

@@ -7,6 +7,7 @@ import Menu from '../menu';
 import { ConfigContext } from '../config-provider';
 import warning from '../_util/warning';
 import { cloneElement } from '../_util/reactNode';
+import useStyle from './style';
 
 export interface Route {
   path: string;
@@ -85,6 +86,8 @@ const Breadcrumb: BreadcrumbInterface = ({
 
   let crumbs;
   const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
   if (routes && routes.length > 0) {
     // generated by route
     const paths: string[] = [];
@@ -140,12 +143,13 @@ const Breadcrumb: BreadcrumbInterface = ({
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,
+    hashId,
   );
 
-  return (
+  return wrapSSR(
     <nav className={breadcrumbClassName} style={style} {...restProps}>
       <ol>{crumbs}</ol>
-    </nav>
+    </nav>,
   );
 };
 

components/breadcrumb/style/index.less

@@ -1,64 +1,64 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
-
-.@{breadcrumb-prefix-cls} {
-  .reset-component();
-
-  color: @breadcrumb-base-color;
-  font-size: @breadcrumb-font-size;
-
-  .@{iconfont-css-prefix} {
-    font-size: @breadcrumb-icon-font-size;
-  }
-
-  ol {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  a {
-    color: @breadcrumb-link-color;
-    transition: color 0.3s;
-
-    &:hover {
-      color: @breadcrumb-link-color-hover;
-    }
-  }
-
-  li:last-child {
-    color: @breadcrumb-last-item-color;
-
-    a {
-      color: @breadcrumb-last-item-color;
-    }
-  }
-
-  li:last-child &-separator {
-    display: none;
-  }
-
-  &-separator {
-    margin: @breadcrumb-separator-margin;
-    color: @breadcrumb-separator-color;
-  }
-
-  &-link {
-    > .@{iconfont-css-prefix} + span,
-    > .@{iconfont-css-prefix} + a {
-      margin-left: 4px;
-    }
-  }
-
-  &-overlay-link {
-    > .@{iconfont-css-prefix} {
-      margin-left: 4px;
-    }
-  }
-}
-
-@import './rtl';
+// @import '../../style/themes/index';
+// @import '../../style/mixins/index';
+//
+// @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
+//
+// .@{breadcrumb-prefix-cls} {
+//   .reset-component();
+//
+//   color: @breadcrumb-base-color;
+//   font-size: @breadcrumb-font-size;
+//
+//   .@{iconfont-css-prefix} {
+//     font-size: @breadcrumb-icon-font-size;
+//   }
+//
+//   ol {
+//     display: flex;
+//     flex-wrap: wrap;
+//     margin: 0;
+//     padding: 0;
+//     list-style: none;
+//   }
+//
+//   a {
+//     color: @breadcrumb-link-color;
+//     transition: color 0.3s;
+//
+//     &:hover {
+//       color: @breadcrumb-link-color-hover;
+//     }
+//   }
+//
+//   li:last-child {
+//     color: @breadcrumb-last-item-color;
+//
+//     a {
+//       color: @breadcrumb-last-item-color;
+//     }
+//   }
+//
+//   li:last-child &-separator {
+//     display: none;
+//   }
+//
+//   &-separator {
+//     margin: @breadcrumb-separator-margin;
+//     color: @breadcrumb-separator-color;
+//   }
+//
+//   &-link {
+//     > .@{iconfont-css-prefix} + span,
+//     > .@{iconfont-css-prefix} + a {
+//       margin-left: 4px;
+//     }
+//   }
+//
+//   &-overlay-link {
+//     > .@{iconfont-css-prefix} {
+//       margin-left: 4px;
+//     }
+//   }
+// }
+//
+// @import './rtl';

components/breadcrumb/style/index.tsx

@@ -1,6 +1,102 @@
-import '../../style/index.less';
-import './index.less';
+// deps-lint-skip-all
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle, FullToken } from '../../_util/theme';
+import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
 
-// style dependencies
-import '../../menu/style';
-import '../../dropdown/style';
+interface BreadcrumbToken extends FullToken<'Breadcrumb'> {
+  breadcrumbBaseColor: string;
+  breadcrumbFontSize: number;
+  breadcrumbIconFontSize: number;
+  breadcrumbLinkColor: string;
+  breadcrumbLinkColorHover: string;
+  breadcrumbLastItemColor: string;
+  breadcrumbSeparatorMargin: number;
+  breadcrumbSeparatorColor: string;
+}
+
+const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
+  const { componentCls, iconCls } = token;
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      color: token.breadcrumbBaseColor,
+      fontSize: token.breadcrumbFontSize,
+
+      [iconCls]: {
+        fontSize: token.breadcrumbIconFontSize,
+      },
+
+      ol: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        margin: 0,
+        padding: 0,
+        listStyle: 'none',
+      },
+
+      a: {
+        color: token.breadcrumbLinkColor,
+        transition: `color ${token.motionDurationSlow}`,
+
+        '&:hover': {
+          color: token.breadcrumbLinkColorHover,
+        },
+      },
+
+      'li:last-child': {
+        color: token.breadcrumbLastItemColor,
+
+        a: {
+          color: token.breadcrumbLastItemColor,
+        },
+      },
+
+      [`li:last-child ${componentCls}-separator`]: {
+        display: 'none',
+      },
+
+      [`${componentCls}-separator`]: {
+        marginInline: token.breadcrumbSeparatorMargin,
+        color: token.breadcrumbSeparatorColor,
+      },
+
+      [`${componentCls}-link`]: {
+        [`
+        > ${iconCls} + span,
+        > ${iconCls} + a
+       `]: {
+          marginInlineStart: token.marginXXS,
+        },
+      },
+
+      [`${componentCls}-overlay-link`]: {
+        [`> ${iconCls}`]: {
+          marginInlineStart: token.marginXXS,
+        },
+      },
+
+      // rtl style
+      [`&${token.componentCls}-rtl`]: {
+        direction: 'rtl',
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Breadcrumb', token => {
+  const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {
+    // FIXME: missing token
+    breadcrumbBaseColor: token.colorTextSecondary,
+    breadcrumbFontSize: token.fontSizeBase,
+    breadcrumbIconFontSize: token.fontSizeBase,
+    breadcrumbLinkColor: token.colorTextSecondary,
+    breadcrumbLinkColorHover: token.colorText,
+    breadcrumbLastItemColor: token.colorText,
+    breadcrumbSeparatorMargin: token.paddingXS,
+    breadcrumbSeparatorColor: token.colorTextSecondary,
+  });
+
+  return [genBreadcrumbStyle(BreadcrumbToken)];
+});