fix: genStyleUtils doesn't work when realToken is undefined

fix: getCompUnitless type error
ant-design · Aug 23, 2024 · 29ebad2 · 29ebad2
1 parent 4d829bf
commit 29ebad2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/src/hooks/useToken.ts b/src/hooks/useToken.ts
@@ -21,11 +21,17 @@ export interface UseTokenReturn<
   DesignToken extends TokenType,
 > {
   token: GlobalToken<CompTokenMap, AliasToken>;
-  realToken?: GlobalToken<CompTokenMap, AliasToken>;
   theme?: Theme<DesignToken, AliasToken>;
-  components?: TokenMapWithTheme<CompTokenMap, DesignToken, AliasToken>;
   hashId?: string;
+  components?: TokenMapWithTheme<CompTokenMap, DesignToken, AliasToken>;
   hashed?: string | boolean;
+  /**
+   * @warring dev only: css var token object. If you use `useToken` in production, you should use `token` instead.
+   */
+  realToken?: GlobalToken<CompTokenMap, AliasToken>;
+  /**
+   * @warring dev only: css var options object. If you use `useToken` in production, do not use it.
+   */
   cssVar?: {
     prefix?: string;
     key?: string;

diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx
@@ -10,6 +10,7 @@ import type {
   TokenMap,
   TokenMapKey,
   UseComponentStyleResult,
+  GlobalToken,
 } from '../interface';
 
 import type AbstractCalculator from './calc/calculator';
@@ -91,12 +92,10 @@ export type CSSVarRegisterProps = {
 
 export type GetResetStyles<AliasToken extends TokenType> = (token: AliasToken) => CSSInterpolation;
 
-export type GetCompUnitless<CompTokenMap extends TokenMap, AliasToken extends TokenType> = <
-  C extends TokenMapKey<CompTokenMap>,
->(
-  component: C | [C, string],
+export type GetCompUnitless<CompTokenMap extends TokenMap, AliasToken extends TokenType> = (
+  component?: TokenMapKey<CompTokenMap> | [TokenMapKey<CompTokenMap>, string],
 ) => {
-  [key in ComponentTokenKey<CompTokenMap, AliasToken, C>]: boolean;
+  [key in keyof AliasToken]?: boolean;
 };
 
 function genStyleUtils<
@@ -221,7 +220,12 @@ function genStyleUtils<
     const { unitless: compUnitless, injectStyle = true, prefixToken, ignore } = options;
 
     const CSSVarRegister: React.FC<Readonly<CSSVarRegisterProps>> = ({ rootCls, cssVar = {} }) => {
-      const { realToken } = useToken();
+      const {
+        /**
+         * @warring dev only, detail see {@link UseTokenReturn.realToken}
+         */
+        realToken = {} as GlobalToken<CompTokenMap, AliasToken>,
+      } = useToken();
       useCSSVarRegister(
         {
           path: [component],
@@ -257,7 +261,12 @@ function genStyleUtils<
     };
 
     const useCSSVar = (rootCls: string) => {
-      const { cssVar } = useToken();
+      const {
+        /**
+         * @warring dev only, detail see {@link UseTokenReturn.cssVar}
+         */
+        cssVar,
+      } = useToken();
 
       return [
         (node: React.ReactElement): React.ReactElement =>
@@ -311,7 +320,19 @@ function genStyleUtils<
 
     // Return new style hook
     return (prefixCls: string, rootCls: string = prefixCls): UseComponentStyleResult => {
-      const { theme, realToken, hashId, token, cssVar } = useToken();
+      const {
+        theme,
+        hashId,
+        token,
+        /**
+         * @warring dev only, detail see {@link UseTokenReturn.realToken}
+         */
+        realToken = {} as GlobalToken<CompTokenMap, AliasToken>,
+        /**
+         * @warring dev only, detail see {@link UseTokenReturn.cssVar}
+         */
+        cssVar,
+      } = useToken();
 
       const { rootPrefixCls, iconPrefixCls } = usePrefix();
       const csp = useCSP();