✨ feat: 新增 StyledProvider 以新增多 emotion 实例的能力

.dumi/theme/components/Provider/index.tsx

@@ -1,5 +1,5 @@
 import { App } from 'antd';
-import { ThemeProvider } from 'antd-style';
+import { StyleProvider, ThemeProvider } from 'antd-style';
 import { PropsWithChildren } from 'react';
 
 import { useThemeStore } from '../../store/useThemeStore';
@@ -9,13 +9,15 @@ export default ({ children }: PropsWithChildren) => {
   const themeMode = useThemeStore((s) => s.themeMode);
 
   return (
-    <ThemeProvider
-      themeMode={themeMode}
-      theme={getAntdTheme}
-      customStylish={getCustomStylish}
-      customToken={getCustomToken}
-    >
-      <App>{children}</App>
-    </ThemeProvider>
+    <StyleProvider prefix={'site'}>
+      <ThemeProvider
+        themeMode={themeMode}
+        theme={getAntdTheme}
+        customStylish={getCustomStylish}
+        customToken={getCustomToken}
+      >
+        <App>{children}</App>
+      </ThemeProvider>
+    </StyleProvider>
   );
 };

package.json

@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20",
+    "@emotion/cache": "^11",
     "@emotion/css": "^11",
     "@emotion/react": "^11",
     "@emotion/serialize": "^1",

src/containers/StyleProvider/index.tsx

@@ -0,0 +1,57 @@
+import { StyleUtilsContext } from '@/context/StyleUtilsContext';
+import { createEmotion } from '@/functions';
+import { StylisPlugin } from '@emotion/cache';
+import { Emotion } from '@emotion/css/create-instance';
+import * as process from 'process';
+import { FC, memo, ReactNode, useEffect, useMemo } from 'react';
+
+interface StyleProviderProps {
+  prefix: string;
+
+  nonce?: string;
+  stylisPlugins?: StylisPlugin[];
+  container?: HTMLElement;
+  /**
+   * 开启极速模式，极速模式下不会插入真实的样式 style
+   * @default false
+   */
+  speedy?: boolean;
+  insertionPoint?: HTMLElement;
+
+  /**
+   * 获取到 emotion 实例
+   * @param emotion
+   */
+  getEmotionInstance?: (emotion: Emotion) => void;
+  children: ReactNode;
+}
+
+export const StyleProvider: FC<StyleProviderProps> = memo(
+  ({
+    children,
+    prefix,
+    speedy,
+    getEmotionInstance,
+
+    ...emotionOptions
+  }) => {
+    const emotion = useMemo(() => {
+      const defaultSpeedy = process.env.NODE_ENV !== 'development';
+      return createEmotion({
+        speedy: speedy ?? defaultSpeedy,
+        key: prefix,
+        ...emotionOptions,
+      });
+    }, [prefix, speedy, emotionOptions]);
+
+    useEffect(() => {
+      getEmotionInstance?.(emotion);
+    }, [emotion]);
+
+    return (
+      <StyleUtilsContext.Provider value={{ css: emotion.css, cx: emotion.cx }}>
+        {children}
+      </StyleUtilsContext.Provider>
+    );
+  },
+);

src/containers/index.ts

@@ -1 +1,2 @@
+export * from './StyleProvider';
 export * from './ThemeProvider';

src/context/StyleUtilsContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+import { css, cx, type Emotion } from '@/functions';
+
+export interface CommonStyleUtils {
+  cx: Emotion['cx'];
+  css: Emotion['css'];
+}
+
+export const StyleUtilsContext = createContext<CommonStyleUtils>({
+  css,
+  cx,
+});

src/context/index.ts

@@ -1 +1,2 @@
+export * from './StyleUtilsContext';
 export * from './ThemeModeContext';

src/functions/createStyles.ts

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
-import { css, cx, type CSSObject, type Emotion } from './css';
 
+import { CommonStyleUtils } from '@/context';
 import { useTheme } from '@/hooks';
+import { useStyleUtils } from '@/hooks/useStyleUtils';
 import {
-  CommonStyleUtils,
   FullStylish,
   FullToken,
   ReturnStyleToUse,
@@ -12,6 +12,8 @@ import {
   ThemeAppearance,
 } from '@/types';
 
+import { type CSSObject, type Emotion } from './css';
+
 export interface CreateStylesTheme extends CommonStyleUtils {
   token: FullToken;
   stylish: FullStylish;
@@ -50,6 +52,7 @@ export const createStyles =
   ) =>
   (props?: Props): ReturnStyles<Input> => {
     const theme = useTheme();
+    const { css, cx } = useStyleUtils();
 
     const styles = useMemo(() => {
       let tempStyles: ReturnStyleToUse<Input>;

src/hooks/useStyleUtils.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { StyleUtilsContext, type CommonStyleUtils } from '@/context/StyleUtilsContext';
+
+export const useStyleUtils = (): CommonStyleUtils => useContext(StyleUtilsContext);

src/types/theme.ts

@@ -1,12 +1,8 @@
-import { Emotion } from '@emotion/css/create-instance';
 import { ThemeConfig } from 'antd/es/config-provider/context';
 import { AliasToken } from 'antd/es/theme/interface';
-import { ThemeAppearance, ThemeMode } from './appearance';
 
-export interface CommonStyleUtils {
-  cx: Emotion['cx'];
-  css: Emotion['css'];
-}
+import { CommonStyleUtils } from '@/context';
+import { ThemeAppearance, ThemeMode } from './appearance';
 
 export interface ThemeContextState {
   appearance: ThemeAppearance;