✨ feat: 替换默认的 css 导出

BREAKING CHANGE: 将 antd-style 中导出的 css 都替换为 `@emotion/react` 的 css，建立起 css`` -> styleObject 的心智。

原因：由于 emotion/css 的 css`` 只产出 className，因此无法做一些复杂操作，例如样式片段复用，需要替换为 react 的版本

src/functions/createStyles/index.ts

@@ -14,7 +14,7 @@ import type {
   Theme,
   ThemeAppearance,
 } from '@/types';
-import { isReactCssResult } from '@/utils';
+import { createCX, isReactCssResult } from '@/utils';
 
 import { convertResponsiveStyleToString, useMediaQueryMap } from './response';
 
@@ -81,8 +81,7 @@ export const createStyles =
 
     // 由于使用了 reactCss 作为基础样式工具，因此在使用 cx 级联 className 时需要使用特殊处理的 cx
     // 要将 reactCss 的产出转为 css 产物
-    const reactCx: ClassNamesUtil = (...classNames) =>
-      cx(...(classNames.map((c) => (isReactCssResult(c) ? css(c) : c)) as any[]));
+    const cxUtil: ClassNamesUtil = createCX(css, cx);
 
     const styles = useMemo(() => {
       let tempStyles: ReturnStyleToUse<Input>;
@@ -106,7 +105,7 @@ export const createStyles =
             isDarkMode,
             prefixCls,
             // 工具函数们
-            cx: reactCx,
+            cx: cxUtil,
             css: reactCss,
             responsive,
           },
@@ -145,6 +144,6 @@ export const createStyles =
 
     return useMemo(() => {
       const { prefixCls, ...res } = theme;
-      return { styles, cx: reactCx, theme: res, prefixCls };
+      return { styles, cx: cxUtil, theme: res, prefixCls };
     }, [styles, theme]);
   };

src/functions/css.ts

@@ -1,22 +1,21 @@
+import { ClassNamesUtil } from '@/types';
+import { createCX } from '@/utils';
 import createEmotion from '@emotion/css/create-instance';
 
 export const emotion = createEmotion({
   key: 'ant-css',
   speedy: false,
 });
 
-export const {
-  css,
-  cx,
-  injectGlobal,
-  keyframes,
-  sheet,
-  flush,
-  merge,
-  hydrate,
-  getRegisteredStyles,
-  cache,
-} = emotion;
+export const { injectGlobal, keyframes, sheet, flush, merge, hydrate, getRegisteredStyles, cache } =
+  emotion;
 
 export type { Emotion } from '@emotion/css/create-instance';
+export { css } from '@emotion/react';
 export { createEmotion };
+
+/**
+ * 用于将 css 生成的 styles 创建为 className
+ * @param classNames
+ */
+export const cx: ClassNamesUtil = createCX(emotion.css, emotion.cx);

src/utils/css.ts

@@ -1,6 +1,21 @@
+import { ClassNamesUtil } from '@/types';
+import { Emotion } from '@emotion/css/create-instance';
+
 /**
  * 判断是否是 ReactCss 的编译产物
  * @param params
  */
 export const isReactCssResult = (params: any) =>
   typeof params === 'object' && 'styles' in params && 'name' in params && 'toString' in params;
+
+export const createCX =
+  (css: Emotion['css'], cx: Emotion['cx']): ClassNamesUtil =>
+  (...classNames) => {
+    return cx(
+      ...(classNames.map((c) =>
+        // 由于使用了 reactCss 作为基础样式工具，因此在使用 cx 级联 className 时需要使用特殊处理的 cx
+        // 要将 reactCss 的产出转为 css 产物
+        isReactCssResult(c) ? css(c) : c,
+      ) as any[]),
+    );
+  };

tests/containers/ThemeProvider.test.tsx

@@ -1,6 +1,6 @@
 import { act, render, renderHook } from '@testing-library/react';
 import { App, theme } from 'antd';
-import { css, GetCustomToken, ThemeProvider, useTheme, useThemeMode } from 'antd-style';
+import { css, cx, GetCustomToken, ThemeProvider, useTheme, useThemeMode } from 'antd-style';
 import { MappingAlgorithm } from 'antd/es/config-provider/context';
 import { MessageInstance } from 'antd/es/message/interface';
 import { NotificationInstance } from 'antd/es/notification/interface';
@@ -100,7 +100,7 @@ describe('ThemeProvider', () => {
     it('自定义 Stylish', () => {
       const App = () => {
         const theme = useTheme();
-        return <div className={css(theme.stylish.defaultText)}>普通文本</div>;
+        return <div className={cx(css(theme.stylish.defaultText))}>普通文本</div>;
       };
 
       const { container } = render(
@@ -198,11 +198,11 @@ describe('ThemeProvider', () => {
         <Demo id={'without'} />
         <ThemeProvider>
           <App
-            className={css`
+            className={cx(css`
               .container {
                 color: red;
               }
-            `}
+            `)}
           >
             <Demo id={'within'} />
           </App>

tests/functions/styled.test.tsx

@@ -60,7 +60,7 @@ describe('styled', () => {
 
       expect(container).toMatchSnapshot();
 
-      rerender(<Card primary>卡片</Card>);
+      rerender(<Card primary={true}>卡片</Card>);
 
       expect(content).toHaveStyleRule('border-radius', '8px');
       expect(content).toHaveStyleRule('padding', '24px');