From 1822b388c97fe2614b0d737d9d0dd65ee34f7a96 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sun, 22 Jan 2023 22:33:57 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat:=20=E8=B0=83=E6=95=B4=20styli?=
 =?UTF-8?q?sh=20=E7=9A=84=E5=AE=9E=E7=8E=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGES: stylish 将不再能直接作为 className 使用，需要通过 css 包裹才能生效，将 stylish 的定位变得更加精准 —— 可复用的样式片段
---
 src/containers/ThemeProvider/TokenContainer.tsx | 15 ++++++++++-----
 src/functions/createStyles.ts                   |  5 ++---
 src/types/theme.ts                              | 14 ++++++++++++--
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/containers/ThemeProvider/TokenContainer.tsx b/src/containers/ThemeProvider/TokenContainer.tsx
index e3c2d1ff..b691dca5 100644
--- a/src/containers/ThemeProvider/TokenContainer.tsx
+++ b/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,
diff --git a/src/functions/createStyles.ts b/src/functions/createStyles.ts
index db19b71c..c63895b1 100644
--- a/src/functions/createStyles.ts
+++ b/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;
 }
 
diff --git a/src/types/theme.ts b/src/types/theme.ts
index 798c73d0..f28b2bd8 100644
--- a/src/types/theme.ts
+++ b/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;