From c0d7d041b48d691896d31985ac76df3e740eb9d8 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 25 Jan 2023 10:28:10 +0800
Subject: [PATCH] refactor: cssinjs

---
 .../_util/cssinjs/hooks/useStyleRegister.tsx  |  18 +--
 components/alert/index.tsx                    |  45 +++----
 components/theme/internal.ts                  |   4 +-
 .../theme/util/genComponentStyleHook.ts       | 112 +++++++++---------
 4 files changed, 91 insertions(+), 88 deletions(-)

diff --git a/components/_util/cssinjs/hooks/useStyleRegister.tsx b/components/_util/cssinjs/hooks/useStyleRegister.tsx
index f70e3e14e..86def3f1d 100644
--- a/components/_util/cssinjs/hooks/useStyleRegister.tsx
+++ b/components/_util/cssinjs/hooks/useStyleRegister.tsx
@@ -21,6 +21,7 @@ import { supportLayer } from '../util';
 import useGlobalCache from './useGlobalCache';
 import canUseDom from '../../canUseDom';
 import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS';
+import type { Ref } from 'vue';
 import { computed } from 'vue';
 import type { VueNode } from '../../type';
 
@@ -286,20 +287,20 @@ function Empty() {
  * Register a style to the global style sheet.
  */
 export default function useStyleRegister(
-  info: {
+  info: Ref<{
     theme: Theme<any, any>;
     token: any;
     path: string[];
     hashId?: string;
     layer?: string;
-  },
+  }>,
   styleFn: () => CSSInterpolation,
 ) {
   const styleContext = useStyleInject();
 
-  const tokenKey = computed(() => info.token._tokenKey as string);
+  const tokenKey = computed(() => info.value.token._tokenKey as string);
 
-  const fullPath = computed(() => [tokenKey.value, ...info.path]);
+  const fullPath = computed(() => [tokenKey.value, ...info.value.path]);
 
   // Check if need insert style
   let isMergedClientSide = isClientSide;
@@ -315,7 +316,7 @@ export default function useStyleRegister(
     () => {
       const styleObj = styleFn();
       const { hashPriority, container, transformers, linters } = styleContext;
-      const { path, hashId, layer } = info;
+      const { path, hashId, layer } = info.value;
       const [parsedStyle, effectStyle] = parseStyle(styleObj, {
         hashId,
         hashPriority,
@@ -371,17 +372,16 @@ export default function useStyleRegister(
 
   return (node: VueNode) => {
     let styleNode: VueNode;
-
     if (!styleContext.ssrInline || isMergedClientSide || !styleContext.defaultCache) {
       styleNode = <Empty />;
     } else {
       styleNode = (
         <style
           {...{
-            [ATTR_TOKEN]: cacheStyle[1],
-            [ATTR_MARK]: cacheStyle[2],
+            [ATTR_TOKEN]: cacheStyle.value[1],
+            [ATTR_MARK]: cacheStyle.value[2],
           }}
-          innerHTML={cacheStyle[0]}
+          innerHTML={cacheStyle.value[0]}
         />
       );
     }
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index 2fae9e018..9c923a87c 100644
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -17,6 +17,7 @@ import { tuple, withInstall } from '../_util/type';
 import { cloneElement } from '../_util/vnode';
 import type { NodeMouseEventHandler } from '../vc-tree/contextTypes';
 import useConfigInject from '../_util/hooks/useConfigInject';
+import useStyle from './style';
 
 const iconMapFilled = {
   success: CheckCircleFilled,
@@ -69,6 +70,7 @@ const Alert = defineComponent({
   props: alertProps(),
   setup(props, { slots, emit, attrs, expose }) {
     const { prefixCls, direction } = useConfigInject('alert', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
     const closing = ref(false);
     const closed = ref(false);
     const alertNode = ref();
@@ -125,6 +127,7 @@ const Alert = defineComponent({
         [`${prefixClsValue}-banner`]: !!banner,
         [`${prefixClsValue}-closable`]: closable,
         [`${prefixClsValue}-rtl`]: direction.value === 'rtl',
+        [hashId.value]: true,
       });
 
       const closeIcon = closable ? (
@@ -164,27 +167,29 @@ const Alert = defineComponent({
           node.style.maxHeight = '0px';
         },
       });
-      return closed.value ? null : (
-        <Transition {...transitionProps}>
-          <div
-            role="alert"
-            {...attrs}
-            style={[attrs.style as CSSProperties, motionStyle.value]}
-            v-show={!closing.value}
-            class={[attrs.class, alertCls]}
-            data-show={!closing.value}
-            ref={alertNode}
-          >
-            {showIcon ? iconNode : null}
-            <div class={`${prefixClsValue}-content`}>
-              {message ? <div class={`${prefixClsValue}-message`}>{message}</div> : null}
-              {description ? (
-                <div class={`${prefixClsValue}-description`}>{description}</div>
-              ) : null}
+      return wrapSSR(
+        closed.value ? null : (
+          <Transition {...transitionProps}>
+            <div
+              role="alert"
+              {...attrs}
+              style={[attrs.style as CSSProperties, motionStyle.value]}
+              v-show={!closing.value}
+              class={[attrs.class, alertCls]}
+              data-show={!closing.value}
+              ref={alertNode}
+            >
+              {showIcon ? iconNode : null}
+              <div class={`${prefixClsValue}-content`}>
+                {message ? <div class={`${prefixClsValue}-message`}>{message}</div> : null}
+                {description ? (
+                  <div class={`${prefixClsValue}-description`}>{description}</div>
+                ) : null}
+              </div>
+              {closeIcon}
             </div>
-            {closeIcon}
-          </div>
-        </Transition>
+          </Transition>
+        ),
       );
     };
   },
diff --git a/components/theme/internal.ts b/components/theme/internal.ts
index b321ba39a..78a19468b 100644
--- a/components/theme/internal.ts
+++ b/components/theme/internal.ts
@@ -19,7 +19,7 @@ import type { FullToken } from './util/genComponentStyleHook';
 import genComponentStyleHook from './util/genComponentStyleHook';
 import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
 import type { VueNode } from '../_util/type';
-import type { ComputedRef, InjectionKey } from 'vue';
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
 import { computed, inject } from 'vue';
 
 const defaultTheme = createTheme(defaultDerivative);
@@ -89,7 +89,7 @@ export function useToken(): [
   ];
 }
 
-export type UseComponentStyleResult = [(node: VueNode) => VueNode, string];
+export type UseComponentStyleResult = [(node: VueNode) => VueNode, Ref<string>];
 
 export type GenerateStyle<
   ComponentToken extends object = AliasToken,
diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
index 903d3d9d3..63650b28d 100644
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@@ -7,6 +7,8 @@ import type { UseComponentStyleResult } from '../internal';
 import { mergeToken, statisticToken, useToken } from '../internal';
 import type { ComponentTokenMap, GlobalToken } from '../interface';
 import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject';
+import type { Ref } from 'vue';
+import { computed } from 'vue';
 
 export type OverrideTokenWithoutDerivative = ComponentTokenMap;
 export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
@@ -42,70 +44,66 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
     | OverrideTokenWithoutDerivative[ComponentName]
     | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
 ) {
-  return (prefixCls: string): UseComponentStyleResult => {
+  return (prefixCls: Ref<string>): UseComponentStyleResult => {
     const [theme, token, hashId] = useToken();
-    const { getPrefixCls, iconPrefixCls } = useConfigInject('', {});
-    const rootPrefixCls = getPrefixCls();
-
-    // Generate style for all a tags in antd component.
-    useStyleRegister(
-      {
+    const { rootPrefixCls, iconPrefixCls } = useConfigInject('', {});
+    const sharedInfo = computed(() => {
+      return {
         theme: theme.value,
         token: token.value,
         hashId: hashId.value,
-        path: ['Shared', rootPrefixCls],
+        path: ['Shared', rootPrefixCls.value],
+      };
+    });
+    // Generate style for all a tags in antd component.
+    useStyleRegister(sharedInfo, () => [
+      {
+        // Link
+        '&': genLinkStyle(token.value),
       },
-      () => [
-        {
-          // Link
-          '&': genLinkStyle(token.value),
-        },
-      ],
-    );
-
+    ]);
+    const componentInfo = computed(() => {
+      return {
+        theme: theme.value,
+        token: token.value,
+        hashId: hashId.value,
+        path: [component, prefixCls.value, iconPrefixCls.value],
+      };
+    });
     return [
-      useStyleRegister(
-        {
-          theme: theme.value,
-          token: token.value,
+      useStyleRegister(componentInfo, () => {
+        const { token: proxyToken, flush } = statisticToken(token.value);
+
+        const defaultComponentToken =
+          typeof getDefaultToken === 'function'
+            ? (getDefaultToken as any)(proxyToken)
+            : getDefaultToken;
+        const mergedComponentToken = { ...defaultComponentToken, ...token.value[component] };
+
+        const componentCls = `.${prefixCls.value}`;
+        const mergedToken = mergeToken<
+          TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
+        >(
+          proxyToken,
+          {
+            componentCls,
+            prefixCls: prefixCls.value,
+            iconCls: `.${iconPrefixCls.value}`,
+            antCls: `.${rootPrefixCls.value}`,
+          },
+          mergedComponentToken,
+        );
+        const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
           hashId: hashId.value,
-          path: [component, prefixCls, iconPrefixCls.value],
-        },
-        () => {
-          const { token: proxyToken, flush } = statisticToken(token.value);
-
-          const defaultComponentToken =
-            typeof getDefaultToken === 'function'
-              ? (getDefaultToken as any)(proxyToken)
-              : getDefaultToken;
-          const mergedComponentToken = { ...defaultComponentToken, ...token.value[component] };
-
-          const componentCls = `.${prefixCls}`;
-          const mergedToken = mergeToken<
-            TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
-          >(
-            proxyToken,
-            {
-              componentCls,
-              prefixCls,
-              iconCls: `.${iconPrefixCls}`,
-              antCls: `.${rootPrefixCls}`,
-            },
-            mergedComponentToken,
-          );
-
-          const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
-            hashId: hashId.value,
-            prefixCls,
-            rootPrefixCls,
-            iconPrefixCls: iconPrefixCls.value,
-            overrideComponentToken: token.value[component],
-          });
-          flush(component, mergedComponentToken);
-          return [genCommonStyle(token.value, prefixCls), styleInterpolation];
-        },
-      ),
-      hashId.value,
+          prefixCls: prefixCls.value,
+          rootPrefixCls: rootPrefixCls.value,
+          iconPrefixCls: iconPrefixCls.value,
+          overrideComponentToken: token.value[component],
+        });
+        flush(component, mergedComponentToken);
+        return [genCommonStyle(token.value, prefixCls.value), styleInterpolation];
+      }),
+      hashId,
     ];
   };
 }