✨ feat: 优化 StyledProvider 实现逻辑并新增 useEmotion 的 hook

src/containers/StyleProvider/index.tsx

@@ -1,4 +1,4 @@
-import { StyleUtilsContext } from '@/context/StyleUtilsContext';
+import { EmotionContext } from '@/context/EmotionContext';
 import { createEmotion } from '@/functions';
 import { StylisPlugin } from '@emotion/cache';
 import { Emotion } from '@emotion/css/create-instance';
@@ -36,7 +36,8 @@ export const StyleProvider: FC<StyleProviderProps> = memo(
     ...emotionOptions
   }) => {
     const emotion = useMemo(() => {
-      const defaultSpeedy = process.env.NODE_ENV !== 'development';
+      const defaultSpeedy = process.env.NODE_ENV === 'development';
+
       return createEmotion({
         speedy: speedy ?? defaultSpeedy,
         key: prefix,
@@ -48,10 +49,6 @@ export const StyleProvider: FC<StyleProviderProps> = memo(
       getEmotionInstance?.(emotion);
     }, [emotion]);
 
-    return (
-      <StyleUtilsContext.Provider value={{ css: emotion.css, cx: emotion.cx }}>
-        {children}
-      </StyleUtilsContext.Provider>
-    );
+    return <EmotionContext.Provider value={emotion}>{children}</EmotionContext.Provider>;
   },
 );

src/context/EmotionContext.ts

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

src/context/index.ts

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

src/functions/createStyles.ts

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 
 import { CommonStyleUtils } from '@/context';
-import { useTheme } from '@/hooks';
-import { useStyleUtils } from '@/hooks/useStyleUtils';
+import { useEmotion, useTheme } from '@/hooks';
 import {
   FullStylish,
   FullToken,
@@ -52,7 +51,7 @@ export const createStyles =
   ) =>
   (props?: Props): ReturnStyles<Input> => {
     const theme = useTheme();
-    const { css, cx } = useStyleUtils();
+    const { css, cx } = useEmotion();
 
     const styles = useMemo(() => {
       let tempStyles: ReturnStyleToUse<Input>;

src/functions/css.ts

@@ -1,24 +1,11 @@
 import createEmotion from '@emotion/css/create-instance';
 
-const {
-  css,
-  cx,
-  injectGlobal,
-  keyframes,
-  sheet,
-  flush,
-  merge,
-  hydrate,
-  getRegisteredStyles,
-  cache,
-} = createEmotion({
+export const emotion = createEmotion({
   key: 'ant-css',
   speedy: false,
 });
 
-export { type CSSObject } from '@emotion/css';
-export type { Emotion } from '@emotion/css/create-instance';
-export {
+export const {
   css,
   cx,
   injectGlobal,
@@ -28,6 +15,8 @@ export {
   merge,
   hydrate,
   getRegisteredStyles,
-  createEmotion,
   cache,
-};
+} = emotion;
+export { type CSSObject } from '@emotion/css';
+export type { Emotion } from '@emotion/css/create-instance';
+export { createEmotion };

src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './useAntdStylish';
 export * from './useAntdTheme';
 export * from './useAntdToken';
+export * from './useEmotion';
 export * from './useTheme';
 export * from './useThemeMode';

src/hooks/useEmotion.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+
+import { EmotionContext } from '@/context';
+import { Emotion } from '../functions';
+
+export const useEmotion = (): Emotion => useContext(EmotionContext);