✨ feat: add antdPrefixCls

- Add antdPrefixCls to the return value of useStyles
- Add antdPrefixCls to CreateStylesUtils

Author: DBvc

src/core/createCSS.ts

@@ -7,7 +7,8 @@ import { serializeStyles } from '@emotion/serialize';
 const createClassNameGenerator =
   (cache: EmotionCache, options: ClassNameGeneratorOption): ClassNameGenerator =>
   (...args) => {
-    const serialized = serializeStyles(args, cache.registered, undefined);
+    // FIXME: fix type
+    const serialized = serializeStyles(args as any, cache.registered, undefined);
 
     insertStyles(cache, serialized, false, options);
 

src/core/createSerializeStyles.ts

@@ -14,4 +14,5 @@ export interface SerializeCSS {
  * 提供给 createStyles 方法，用于将用户写入的 css 字符串序列化成特定结构的样式对象
  * @param args
  */
-export const serializeCSS: SerializeCSS = (...args) => serializeStyles(args);
+// FIXME: fix type
+export const serializeCSS: SerializeCSS = (...args) => serializeStyles(args as any);

src/factories/createStyles/index.ts

@@ -57,7 +57,15 @@ export const createStylesFactory =
 
         // 函数场景
         if (styleOrGetStyle instanceof Function) {
-          const { stylish, appearance, isDarkMode, prefixCls, iconPrefixCls, ...token } = theme;
+          const {
+            stylish,
+            appearance,
+            isDarkMode,
+            prefixCls,
+            iconPrefixCls,
+            antdPrefixCls,
+            ...token
+          } = theme;
 
           // 创建响应式断点选择器的工具函数
           // @ts-ignore
@@ -74,6 +82,7 @@ export const createStylesFactory =
               isDarkMode,
               prefixCls,
               iconPrefixCls,
+              antdPrefixCls,
               // 工具函数们
               cx,
               css: serializeCSS,
@@ -122,8 +131,8 @@ export const createStylesFactory =
       }, [props, theme]);
 
       return useMemo(() => {
-        const { prefixCls, iconPrefixCls, ...res } = theme;
-        return { styles, cx, theme: res, prefixCls, iconPrefixCls };
+        const { prefixCls, iconPrefixCls, antdPrefixCls, ...res } = theme;
+        return { styles, cx, theme: res, prefixCls, iconPrefixCls, antdPrefixCls };
       }, [styles, theme]);
     };
   };

src/factories/createStyles/types.ts

@@ -32,15 +32,17 @@ export interface CreateStylesUtils extends CommonStyleUtils {
    */
   prefixCls: string;
   iconPrefixCls: string;
+  antdPrefixCls: string;
 }
 
 /**
  * 最终返回 styles 对象的类型定义
  */
 export interface ReturnStyles<T extends BaseReturnType> extends Pick<CommonStyleUtils, 'cx'> {
   styles: ReturnStyleToUse<T>;
-  theme: Omit<Theme, 'prefixCls'>;
+  theme: Omit<Theme, 'prefixCls' | 'antdPrefixCls'>;
   iconPrefixCls: string;
+  antdPrefixCls: string;
   prefixCls: string;
 }
 

src/factories/createUseTheme.ts

@@ -27,7 +27,7 @@ export const createUseTheme = (options: CreateUseThemeOptions) => (): Theme => {
   const { iconPrefixCls, getPrefixCls } = useContext(ConfigProvider.ConfigContext);
 
   const antdPrefixCls = getPrefixCls();
-  // 只有当用户在 createInstance 中传入与 ant 不一样的 prefixCls 时，才会使用用户的 prefixCls
+  // 只有当用户在 createInstance 中传入与字符串 'ant' 不一样的 prefixCls 时，才会使用用户的 prefixCls
   // 否则其他情况下都优先使用 antd 的 prefixCls
   const prefixCls = outPrefixCls && outPrefixCls !== 'ant' ? outPrefixCls : antdPrefixCls;
 
@@ -38,14 +38,15 @@ export const createUseTheme = (options: CreateUseThemeOptions) => (): Theme => {
       ...defaultCustomTheme,
       prefixCls,
       iconPrefixCls,
+      antdPrefixCls,
     }),
-    [antdTheme, themeState, defaultCustomTheme, prefixCls, iconPrefixCls],
+    [antdTheme, themeState, defaultCustomTheme, prefixCls, iconPrefixCls, antdPrefixCls],
   );
 
   //  如果是个空值，说明没有套 Provider，返回 antdTheme 的默认值
   if (!styledTheme || Object.keys(styledTheme).length === 0) {
     return initTheme;
   }
 
-  return { ...styledTheme, prefixCls, iconPrefixCls } as Theme;
+  return { ...styledTheme, prefixCls, iconPrefixCls, antdPrefixCls } as Theme;
 };

src/types/theme.ts

@@ -73,8 +73,13 @@ export interface FullToken extends AntdToken, CustomToken {}
 export interface Theme extends FullToken, ThemeContextState {
   stylish: FullStylish;
   /**
-   * antd 组件的 prefixCls
+   * 只有当用户在 createInstance 中传入与字符串 'ant' 不一样的 prefixCls 时，才会返回用户的 prefixCls
+   * 否则返回 antd 的 prefixCls
    */
   prefixCls: string;
   iconPrefixCls: string;
+  /**
+   * antd 组件的 prefixCls
+   */
+  antdPrefixCls: string;
 }