refactor(divider): less to cssinjs (#6214)

* refactor(divider): less to cssinjs

* fix: add inheritAttrs

components/divider/index.tsx

@@ -3,6 +3,7 @@ import type { ExtractPropTypes, PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
 import { withInstall } from '../_util/type';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+import useStyle from './style';
 
 export const dividerProps = () => ({
   prefixCls: String,
@@ -27,11 +28,13 @@ export const dividerProps = () => ({
 export type DividerProps = Partial<ExtractPropTypes<ReturnType<typeof dividerProps>>>;
 
 const Divider = defineComponent({
-  compatConfig: { MODE: 3 },
   name: 'ADivider',
+  inheritAttrs: false,
+  compatConfig: { MODE: 3 },
   props: dividerProps(),
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props);
+    const [wrapSSR, hashId] = useStyle(prefixClsRef);
     const hasCustomMarginLeft = computed(
       () => props.orientation === 'left' && props.orientationMargin != null,
     );
@@ -43,6 +46,7 @@ const Divider = defineComponent({
       const prefixCls = prefixClsRef.value;
       return {
         [prefixCls]: true,
+        [hashId.value]: true,
         [`${prefixCls}-${type}`]: true,
         [`${prefixCls}-dashed`]: !!dashed,
         [`${prefixCls}-plain`]: !!plain,
@@ -67,8 +71,9 @@ const Divider = defineComponent({
 
     return () => {
       const children = flattenChildren(slots.default?.());
-      return (
+      return wrapSSR(
         <div
+          {...attrs}
           class={[
             classString.value,
             children.length
@@ -82,7 +87,7 @@ const Divider = defineComponent({
               {children}
             </span>
           ) : null}
-        </div>
+        </div>,
       );
     };
   },

components/divider/style/index.less

@@ -1,137 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@divider-prefix-cls: ~'@{ant-prefix}-divider';
-
-.@{divider-prefix-cls} {
-  .reset-component();
-
-  border-top: @border-width-base solid @divider-color;
-
-  &-vertical {
-    position: relative;
-    top: -0.06em;
-    display: inline-block;
-    height: 0.9em;
-    margin: 0 @divider-vertical-gutter;
-    vertical-align: middle;
-    border-top: 0;
-    border-left: @border-width-base solid @divider-color;
-  }
-
-  &-horizontal {
-    display: flex;
-    clear: both;
-    width: 100%;
-    min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
-    margin: @divider-horizontal-gutter 0;
-  }
-
-  &-horizontal&-with-text {
-    display: flex;
-    margin: 16px 0;
-    color: @heading-color;
-    font-weight: 500;
-    font-size: @font-size-lg;
-    white-space: nowrap;
-    text-align: center;
-    border-top: 0;
-    border-top-color: @divider-color;
-
-    &::before,
-    &::after {
-      position: relative;
-      top: 50%;
-      width: 50%;
-      border-top: @border-width-base solid transparent;
-      // Chrome not accept `inherit` in `border-top`
-      border-top-color: inherit;
-      border-bottom: 0;
-      transform: translateY(50%);
-      content: '';
-    }
-  }
-
-  &-horizontal&-with-text-left {
-    &::before {
-      top: 50%;
-      width: @divider-orientation-margin;
-    }
-
-    &::after {
-      top: 50%;
-      width: 100% - @divider-orientation-margin;
-    }
-  }
-
-  &-horizontal&-with-text-right {
-    &::before {
-      top: 50%;
-      width: 100% - @divider-orientation-margin;
-    }
-
-    &::after {
-      top: 50%;
-      width: @divider-orientation-margin;
-    }
-  }
-
-  &-inner-text {
-    display: inline-block;
-    padding: 0 @divider-text-padding;
-  }
-
-  &-dashed {
-    background: none;
-    border-color: @divider-color;
-    border-style: dashed;
-    border-width: @border-width-base 0 0;
-  }
-
-  &-horizontal&-with-text&-dashed {
-    &::before,
-    &::after {
-      border-style: dashed none none;
-    }
-  }
-
-  &-vertical&-dashed {
-    border-width: 0 0 0 @border-width-base;
-  }
-
-  &-plain&-with-text {
-    color: @text-color;
-    font-weight: normal;
-    font-size: @font-size-base;
-  }
-
-  &-horizontal&-with-text-left&-no-default-orientation-margin-left {
-    &::before {
-      width: 0;
-    }
-
-    &::after {
-      width: 100%;
-    }
-
-    .ant-divider-inner-text {
-      padding-left: 0;
-    }
-  }
-
-  &-horizontal&-with-text-right&-no-default-orientation-margin-right {
-    &::before {
-      width: 100%;
-    }
-
-    &::after {
-      width: 0;
-    }
-
-    .ant-divider-inner-text {
-      padding-right: 0;
-    }
-  }
-}
-
-@import './rtl';

components/divider/style/index.ts

@@ -0,0 +1,167 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { resetComponent } from '../../_style';
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  sizePaddingEdgeHorizontal: number;
+}
+
+interface DividerToken extends FullToken<'Divider'> {
+  dividerVerticalGutterMargin: number;
+  dividerHorizontalWithTextGutterMargin: number;
+  dividerHorizontalGutterMargin: number;
+}
+
+// ============================== Shared ==============================
+const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
+  const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token;
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
+
+      // vertical
+      '&-vertical': {
+        position: 'relative',
+        top: '-0.06em',
+        display: 'inline-block',
+        height: '0.9em',
+        margin: `0 ${token.dividerVerticalGutterMargin}px`,
+        verticalAlign: 'middle',
+        borderTop: 0,
+        borderInlineStart: `${lineWidth}px solid ${colorSplit}`,
+      },
+
+      '&-horizontal': {
+        display: 'flex',
+        clear: 'both',
+        width: '100%',
+        minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914
+        margin: `${token.dividerHorizontalGutterMargin}px 0`,
+      },
+
+      [`&-horizontal${componentCls}-with-text`]: {
+        display: 'flex',
+        alignItems: 'center',
+        margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
+        color: token.colorTextHeading,
+        fontWeight: 500,
+        fontSize: token.fontSizeLG,
+        whiteSpace: 'nowrap',
+        textAlign: 'center',
+        borderBlockStart: `0 ${colorSplit}`,
+
+        '&::before, &::after': {
+          position: 'relative',
+          width: '50%',
+          borderBlockStart: `${lineWidth}px solid transparent`,
+          // Chrome not accept `inherit` in `border-top`
+          borderBlockStartColor: 'inherit',
+          borderBlockEnd: 0,
+          transform: 'translateY(50%)',
+          content: "''",
+        },
+      },
+
+      [`&-horizontal${componentCls}-with-text-left`]: {
+        '&::before': {
+          width: '5%',
+        },
+
+        '&::after': {
+          width: '95%',
+        },
+      },
+
+      [`&-horizontal${componentCls}-with-text-right`]: {
+        '&::before': {
+          width: '95%',
+        },
+
+        '&::after': {
+          width: '5%',
+        },
+      },
+
+      [`${componentCls}-inner-text`]: {
+        display: 'inline-block',
+        padding: '0 1em',
+      },
+
+      '&-dashed': {
+        background: 'none',
+        borderColor: colorSplit,
+        borderStyle: 'dashed',
+        borderWidth: `${lineWidth}px 0 0`,
+      },
+
+      [`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
+        '&::before, &::after': {
+          borderStyle: 'dashed none none',
+        },
+      },
+
+      [`&-vertical${componentCls}-dashed`]: {
+        borderInlineStart: lineWidth,
+        borderInlineEnd: 0,
+        borderBlockStart: 0,
+        borderBlockEnd: 0,
+      },
+
+      [`&-plain${componentCls}-with-text`]: {
+        color: token.colorText,
+        fontWeight: 'normal',
+        fontSize: token.fontSize,
+      },
+
+      [`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]:
+        {
+          '&::before': {
+            width: 0,
+          },
+
+          '&::after': {
+            width: '100%',
+          },
+
+          [`${componentCls}-inner-text`]: {
+            paddingInlineStart: sizePaddingEdgeHorizontal,
+          },
+        },
+
+      [`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]:
+        {
+          '&::before': {
+            width: '100%',
+          },
+
+          '&::after': {
+            width: 0,
+          },
+
+          [`${componentCls}-inner-text`]: {
+            paddingInlineEnd: sizePaddingEdgeHorizontal,
+          },
+        },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'Divider',
+  token => {
+    const dividerToken = mergeToken<DividerToken>(token, {
+      dividerVerticalGutterMargin: token.marginXS,
+      dividerHorizontalWithTextGutterMargin: token.margin,
+      dividerHorizontalGutterMargin: token.marginLG,
+    });
+    return [genSharedDividerStyle(dividerToken)];
+  },
+  {
+    sizePaddingEdgeHorizontal: 0,
+  },
+);

components/divider/style/index.tsx

@@ -1,2 +0,0 @@
-import '../../style/index.less';
-import './index.less';

components/divider/style/rtl.less

@@ -1,38 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@divider-prefix-cls: ~'@{ant-prefix}-divider';
-
-.@{divider-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
-
-  &-horizontal&-with-text-left {
-    &::before {
-      .@{divider-prefix-cls}-rtl& {
-        width: 100% - @divider-orientation-margin;
-      }
-    }
-
-    &::after {
-      .@{divider-prefix-cls}-rtl& {
-        width: @divider-orientation-margin;
-      }
-    }
-  }
-
-  &-horizontal&-with-text-right {
-    &::before {
-      .@{divider-prefix-cls}-rtl& {
-        width: @divider-orientation-margin;
-      }
-    }
-
-    &::after {
-      .@{divider-prefix-cls}-rtl& {
-        width: 100% - @divider-orientation-margin;
-      }
-    }
-  }
-}

components/style.ts

@@ -16,7 +16,7 @@ import './popconfirm/style';
 import './menu/style';
 import './mentions/style';
 import './dropdown/style';
-import './divider/style';
+// import './divider/style';
 import './card/style';
 import './collapse/style';
 import './carousel/style';

components/theme/interface/components.ts

@@ -11,7 +11,7 @@ import type { ComponentToken as ButtonComponentToken } from '../../button/style'
 // import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style';
 // import type { ComponentToken as CollapseComponentToken } from '../../collapse/style';
 // import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
-// import type { ComponentToken as DividerComponentToken } from '../../divider/style';
+import type { ComponentToken as DividerComponentToken } from '../../divider/style';
 // import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
 // import type { ComponentToken as DrawerComponentToken } from '../../drawer/style';
 // import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
@@ -66,7 +66,7 @@ export interface ComponentTokenMap {
   //   Collapse?: CollapseComponentToken;
   //   DatePicker?: DatePickerComponentToken;
   Descriptions?: {};
-  //   Divider?: DividerComponentToken;
+  Divider?: DividerComponentToken;
   //   Drawer?: DrawerComponentToken;
   //   Dropdown?: DropdownComponentToken;
   //   Empty?: EmptyComponentToken;