refactor(divider): less to cssinjs

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.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,
+  },
+);