refactor: Anchor cssinjs (#35139)

* refactor: anchor cssinjs

* fix: padding use logical css

* fix: link padding wrong

components/_util/theme/interface.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { ComponentToken as AnchorComponentToken } from '../../anchor/style';
 import type { ComponentToken as ButtonComponentToken } from '../../button/style';
 import type { ComponentToken as DividerComponentToken } from '../../divider/style';
 import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
@@ -48,6 +49,7 @@ export interface OverrideToken {
   // Customize component
   Affix?: {};
   Alert?: {};
+  Anchor?: AnchorComponentToken;
   Avatar?: {};
   BackTop?: BackTopComponentToken;
   Badge?: {};

components/anchor/Anchor.tsx

@@ -8,6 +8,8 @@ import scrollTo from '../_util/scrollTo';
 import getScroll from '../_util/getScroll';
 import AnchorContext from './context';
 
+import useStyle from './style';
+
 export type AnchorContainer = HTMLElement | Window;
 
 function getDefaultContainer() {
@@ -63,6 +65,7 @@ export interface AnchorProps {
 
 interface InternalAnchorProps extends AnchorProps {
   anchorPrefixCls: string;
+  rootClassName: string;
 }
 
 export interface AnchorState {
@@ -279,6 +282,7 @@ class Anchor extends React.Component<InternalAnchorProps, AnchorState, ConfigCon
       showInkInFixed,
       children,
       onClick,
+      rootClassName,
     } = this.props;
     const { activeLink } = this.state;
 
@@ -292,6 +296,7 @@ class Anchor extends React.Component<InternalAnchorProps, AnchorState, ConfigCon
     });
 
     const wrapperClass = classNames(
+      rootClassName,
       `${prefixCls}-wrapper`,
       {
         [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -343,13 +348,16 @@ const AnchorFC = React.forwardRef<Anchor, AnchorProps>((props, ref) => {
 
   const anchorPrefixCls = getPrefixCls('anchor', customizePrefixCls);
 
+  const [wrapSSR, hashId] = useStyle(anchorPrefixCls);
+
   const anchorProps: InternalAnchorProps = {
     ...props,
 
     anchorPrefixCls,
+    rootClassName: hashId,
   };
 
-  return <Anchor {...anchorProps} ref={ref} />;
+  return wrapSSR(<Anchor {...anchorProps} ref={ref} />);
 });
 
 export default AnchorFC;

components/anchor/style/index.less

@@ -1,87 +1,87 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
+// @import '../../style/themes/index';
+// @import '../../style/mixins/index';
 
-@anchor-border-width: 2px;
+// @anchor-border-width: 2px;
 
-.@{ant-prefix}-anchor {
-  .reset-component();
+// .@{ant-prefix}-anchor {
+//   .reset-component();
 
-  position: relative;
-  padding-left: @anchor-border-width;
+//   position: relative;
+//   padding-left: @anchor-border-width;
 
-  &-wrapper {
-    margin-left: -4px;
-    padding-left: 4px;
-    overflow: auto;
-    background-color: @anchor-bg;
-  }
+//   &-wrapper {
+//     margin-left: -4px;
+//     padding-left: 4px;
+//     overflow: auto;
+//     background-color: @anchor-bg;
+//   }
 
-  &-ink {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
+//   &-ink {
+//     position: absolute;
+//     top: 0;
+//     left: 0;
+//     height: 100%;
 
-    &::before {
-      position: relative;
-      display: block;
-      width: @anchor-border-width;
-      height: 100%;
-      margin: 0 auto;
-      background-color: @anchor-border-color;
-      content: ' ';
-    }
+//     &::before {
+//       position: relative;
+//       display: block;
+//       width: @anchor-border-width;
+//       height: 100%;
+//       margin: 0 auto;
+//       background-color: @anchor-border-color;
+//       content: ' ';
+//     }
 
-    &-ball {
-      position: absolute;
-      left: 50%;
-      display: none;
-      width: 8px;
-      height: 8px;
-      background-color: @component-background;
-      border: 2px solid @primary-color;
-      border-radius: 8px;
-      transform: translateX(-50%);
-      transition: top 0.3s ease-in-out;
+//     &-ball {
+//       position: absolute;
+//       left: 50%;
+//       display: none;
+//       width: 8px;
+//       height: 8px;
+//       background-color: @component-background;
+//       border: 2px solid @primary-color;
+//       border-radius: 8px;
+//       transform: translateX(-50%);
+//       transition: top 0.3s ease-in-out;
 
-      &.visible {
-        display: inline-block;
-      }
-    }
-  }
+//       &.visible {
+//         display: inline-block;
+//       }
+//     }
+//   }
 
-  &-fixed &-ink &-ink-ball {
-    display: none;
-  }
+//   &-fixed &-ink &-ink-ball {
+//     display: none;
+//   }
 
-  &-link {
-    padding: @anchor-link-padding;
-    line-height: 1.143;
+//   &-link {
+//     padding: @anchor-link-padding;
+//     line-height: 1.143;
 
-    &-title {
-      position: relative;
-      display: block;
-      margin-bottom: 6px;
-      overflow: hidden;
-      color: @text-color;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      transition: all 0.3s;
+//     &-title {
+//       position: relative;
+//       display: block;
+//       margin-bottom: 6px;
+//       overflow: hidden;
+//       color: @text-color;
+//       white-space: nowrap;
+//       text-overflow: ellipsis;
+//       transition: all 0.3s;
 
-      &:only-child {
-        margin-bottom: 0;
-      }
-    }
+//       &:only-child {
+//         margin-bottom: 0;
+//       }
+//     }
 
-    &-active > &-title {
-      color: @primary-color;
-    }
-  }
+//     &-active > &-title {
+//       color: @primary-color;
+//     }
+//   }
 
-  &-link &-link {
-    padding-top: 5px;
-    padding-bottom: 5px;
-  }
-}
+//   &-link &-link {
+//     padding-top: 5px;
+//     padding-bottom: 5px;
+//   }
+// }
 
-@import './rtl';
+// @import './rtl';

components/anchor/style/index.tsx

@@ -1,5 +1,124 @@
-import '../../style/index.less';
-import './index.less';
+// deps-lint-skip-all
+import { CSSObject } from '@ant-design/cssinjs';
+import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
+import type { GenerateStyle, FullToken } from '../../_util/theme';
 
-// style dependencies
-import '../../affix/style';
+export interface ComponentToken {}
+interface AnchorToken extends FullToken<'Anchor'> {
+  anchorLinkTop: number;
+  anchorLinkLeft: number;
+}
+
+// ============================== Shared ==============================
+const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-wrapper`]: {
+      // FIX ME
+      marginBlockStart: -4,
+      // FIX ME
+      paddingBlockStart: 4,
+
+      // delete overflow: auto
+      // overflow: 'auto',
+
+      // @anchor-bg
+      backgroundColor: 'transparent',
+
+      [componentCls]: {
+        ...resetComponent(token),
+        position: 'relative',
+        // FIX ME @anchor-border-width
+        paddingInlineStart: 2,
+
+        [`${componentCls}-ink`]: {
+          position: 'absolute',
+          // top: 0
+          insetBlockStart: 0,
+          // left: 0
+          insetInlineStart: 0,
+          height: '100%',
+
+          '&::before': {
+            position: 'relative',
+            display: 'block',
+            // FIX ME
+            width: 2,
+            height: '100%',
+            margin: '0 auto',
+            // FIX ME @border-color-split
+            backgroundColor: 'rgba(0, 0, 0, 0.06)',
+            content: '" "',
+          },
+        },
+
+        [`${componentCls}-ink-ball`]: {
+          position: 'absolute',
+          // left 50%
+          insetInlineStart: '50%',
+          display: 'none',
+          // FIX ME
+          width: 8,
+          // FIX ME
+          height: 8,
+          // FIX '@component-background'
+          backgroundColor: '#fff',
+          border: `2px solid ${token.colorPrimary}`,
+          borderRadius: 8,
+          transform: 'translateX(-50%)',
+          transition: `top ${token.motionDurationSlow} ease-in-out`,
+
+          '&.visible': {
+            display: 'inline-block',
+          },
+        },
+
+        [`${componentCls}-link`]: {
+          // FIX ME @anchor-link-padding
+          paddingBlock: token.anchorLinkTop,
+          paddingInline: `${token.anchorLinkLeft}px 0`,
+          lineHeight: '1.143',
+
+          '&-title': {
+            position: 'relative',
+            display: 'block',
+            // FIX ME margin-bottom
+            marginBlockEnd: 6,
+            overflow: 'hidden',
+            color: token.colorText,
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            transition: `all ${token.motionDurationSlow}s`,
+
+            '&:only-child': {
+              marginBlockEnd: 0,
+            },
+          },
+
+          [`&-active > ${componentCls}-link-title`]: {
+            color: token.colorPrimary,
+          },
+
+          // link link
+          [`${componentCls}-link`]: {
+            paddingBlock: 5,
+          },
+        },
+      },
+
+      [`${componentCls}-fixed ${componentCls}-ink ${componentCls}-ink-ball`]: {
+        display: 'none',
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Anchor', token => {
+  const anchorToken = mergeToken<AnchorToken>(token, {
+    anchorLinkTop: 7,
+    anchorLinkLeft: 16,
+  });
+  return [genSharedAnchorStyle(anchorToken)];
+});

components/back-top/style/index.tsx

@@ -15,8 +15,6 @@ type BackTopToken = FullToken<'BackTop'> & {
   backTopBackground: string;
   backTopColor: string;
   backTopHoverBackground: string;
-
-  durationSlow: number;
 };
 
 // ============================== Shared ==============================
@@ -28,9 +26,9 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): C
       ...resetComponent(token),
 
       position: 'fixed',
-      // FIXME
+      // FIXME right
       insetInlineEnd: 100,
-      // FIXME
+      // FIXME bottom
       insetBlockEnd: 50,
       // FIX ME @zindex-back-top
       zIndex: token.zIndexPopup,
@@ -53,12 +51,12 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): C
         backgroundColor: token.backTopBackground,
         // FIXME
         borderRadius: 20,
-        transition: `all ${token.durationSlow}s`,
+        transition: `all ${token.motionDurationSlow}`,
 
         '&:hover': {
           // FIX ME @back-top-hover-bg
           backgroundColor: token.backTopHoverBackground,
-          transition: `all ${token.durationSlow}s`,
+          transition: `all ${token.motionDurationSlow}`,
         },
       },
 
@@ -104,9 +102,6 @@ export default genComponentStyleHook<'BackTop'>(
       backTopBackground,
       backTopColor,
       backTopHoverBackground,
-
-      // FIX ME
-      durationSlow: 3,
     });
     return [genSharedBackTopStyle(backTopToken), genMediaBackTopStyle(backTopToken)];
   },