✨ feat: 调整 stylish 的实现逻辑

BREAKING CHANGES: stylish 将不再能直接作为 className 使用，需要通过 css 包裹才能生效，将 stylish 的定位变得更加精准 —— 可复用的样式片段

src/containers/ThemeProvider/TokenContainer.tsx

@@ -1,7 +1,7 @@
-import { ThemeProvider as Provider } from '@emotion/react';
+import { css as reactCss, ThemeProvider as Provider } from '@emotion/react';
+import { SerializedStyles } from '@emotion/serialize';
 import { ReactElement, useMemo } from 'react';
 
-import { css, cx } from '@/functions';
 import { useThemeMode } from '@/hooks';
 import { useAntdTheme } from '@/hooks/useAntdTheme';
 import type { ThemeProviderProps } from './type';
@@ -40,14 +40,19 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
         stylish: antdStylish,
         appearance,
         isDarkMode,
-        css,
-        cx,
+        css: reactCss,
       });
     }
     return stylishOrGetStylish;
   }, [stylishOrGetStylish, token, customToken, antdStylish, appearance]);
 
-  const stylish = { ...customStylish, ...antdStylish };
+  const stylish = useMemo(() => {
+    const merged = { ...customStylish, ...antdStylish };
+
+    return Object.fromEntries(
+      Object.entries<SerializedStyles>(merged).map(([key, value]) => [key, value.styles]),
+    );
+  }, [customStylish, antdStylish]);
 
   const theme: Theme = {
     ...token,

src/functions/createStyles.ts

@@ -11,7 +11,7 @@ import type {
   ThemeAppearance,
 } from '@/types';
 
-import { type CSSObject, type Emotion } from './css';
+import { type CSSObject } from './css';
 
 export interface CreateStylesTheme extends CommonStyleUtils {
   token: FullToken;
@@ -24,10 +24,9 @@ export interface CreateStylesTheme extends CommonStyleUtils {
 /**
  * 最终返回 styles 对象的类型定义
  */
-export interface ReturnStyles<T extends StyleInputType> {
+export interface ReturnStyles<T extends StyleInputType> extends Pick<CommonStyleUtils, 'cx'> {
   styles: ReturnStyleToUse<T>;
   theme: Omit<Theme, 'prefixCls'>;
-  cx: Emotion['cx'];
   prefixCls: string;
 }
 

src/types/theme.ts

@@ -2,12 +2,19 @@ import { ThemeConfig } from 'antd/es/config-provider/context';
 import { AliasToken } from 'antd/es/theme/interface';
 
 import { Emotion } from '@/functions';
+import { CSSInterpolation, SerializedStyles } from '@emotion/serialize';
 import { ThemeAppearance, ThemeMode } from './appearance';
 
+export interface EmotionReactCss {
+  (template: TemplateStringsArray, ...args: Array<CSSInterpolation>): SerializedStyles;
+  (...args: Array<CSSInterpolation>): SerializedStyles;
+}
+
 export interface CommonStyleUtils {
   cx: Emotion['cx'];
   css: Emotion['css'];
 }
+
 export interface ThemeContextState {
   appearance: ThemeAppearance;
   themeMode: ThemeMode;
@@ -32,12 +39,15 @@ export interface CustomTokenParams extends AppearanceState {
 
 export type GetCustomToken<T> = (theme: CustomTokenParams) => T;
 
-export interface CustomStylishParams extends CommonStyleUtils, AppearanceState {
+export interface CustomStylishParams extends AppearanceState {
   token: FullToken;
   stylish: AntdStylish;
+  css: EmotionReactCss;
 }
 
-export type GetCustomStylish<S> = (theme: CustomStylishParams) => S;
+export type GetCustomStylish<S> = (theme: CustomStylishParams) => {
+  [T in keyof S]: SerializedStyles;
+};
 
 export type GetAntdThemeConfig = (appearance: ThemeAppearance) => ThemeConfig | undefined;