refactor: cssinjs

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]}
         />
       );
     }

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,7 +167,8 @@ const Alert = defineComponent({
           node.style.maxHeight = '0px';
         },
       });
-      return closed.value ? null : (
+      return wrapSSR(
+        closed.value ? null : (
           <Transition {...transitionProps}>
             <div
               role="alert"
@@ -185,6 +189,7 @@ const Alert = defineComponent({
               {closeIcon}
             </div>
           </Transition>
+        ),
       );
     };
   },

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,

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,36 +44,34 @@ 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),
       },
-      ],
-    );
-
-    return [
-      useStyleRegister(
-        {
+    ]);
+    const componentInfo = computed(() => {
+      return {
         theme: theme.value,
         token: token.value,
         hashId: hashId.value,
-          path: [component, prefixCls, iconPrefixCls.value],
-        },
-        () => {
+        path: [component, prefixCls.value, iconPrefixCls.value],
+      };
+    });
+    return [
+      useStyleRegister(componentInfo, () => {
         const { token: proxyToken, flush } = statisticToken(token.value);
 
         const defaultComponentToken =
@@ -80,32 +80,30 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
             : getDefaultToken;
         const mergedComponentToken = { ...defaultComponentToken, ...token.value[component] };
 
-          const componentCls = `.${prefixCls}`;
+        const componentCls = `.${prefixCls.value}`;
         const mergedToken = mergeToken<
           TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
         >(
           proxyToken,
           {
             componentCls,
-              prefixCls,
-              iconCls: `.${iconPrefixCls}`,
-              antCls: `.${rootPrefixCls}`,
+            prefixCls: prefixCls.value,
+            iconCls: `.${iconPrefixCls.value}`,
+            antCls: `.${rootPrefixCls.value}`,
           },
           mergedComponentToken,
         );
-
         const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
           hashId: hashId.value,
-            prefixCls,
-            rootPrefixCls,
+          prefixCls: prefixCls.value,
+          rootPrefixCls: rootPrefixCls.value,
           iconPrefixCls: iconPrefixCls.value,
           overrideComponentToken: token.value[component],
         });
         flush(component, mergedComponentToken);
-          return [genCommonStyle(token.value, prefixCls), styleInterpolation];
-        },
-      ),
-      hashId.value,
+        return [genCommonStyle(token.value, prefixCls.value), styleInterpolation];
+      }),
+      hashId,
     ];
   };
 }