feat: createGlobal

docs/api/global-styles.md

@@ -18,3 +18,9 @@ group: 创建样式
 利用 antd v5 的 token 系统，我们可以自行组织实现一个在 Ant Design 中并不存在的 Button 样式。
 
 <code src="../demos/globalStyles/AntdToken.tsx"></code>
+
+## 与 `createStyles` 相似的使用方法
+
+`createGlobal` 同样可以用于插入全局样式，但拥有与 `createStyles` 相似的 api。
+
+<code src="../demos/globalStyles/createGlobal.tsx"></code>

docs/demos/globalStyles/createGlobal.tsx

@@ -0,0 +1,35 @@
+import { createGlobal, ThemeProvider } from 'antd-style';
+
+const Global = createGlobal(
+  ({ token, css }) => css`
+    .ant-custom-button-secondary {
+      color: ${token.colorSuccess};
+      background: ${token.colorSuccessBg};
+      height: ${token.controlHeight}px;
+      border-radius: ${token.borderRadius}px;
+      padding: 0 ${token.paddingContentHorizontal}px;
+
+      :hover {
+        background: ${token.colorSuccessBgHover};
+        color: ${token.colorSuccessTextHover};
+      }
+
+      :active {
+        background: ${token.colorSuccessBorder};
+        color: ${token.colorSuccessTextActive};
+      }
+
+      border: none;
+      cursor: pointer;
+    }
+  `,
+);
+
+export default () => {
+  return (
+    <ThemeProvider>
+      <Global />
+      <button className="ant-custom-button-secondary">antd 中不存在的按钮</button>
+    </ThemeProvider>
+  );
+};

src/factories/createGlobalStyle.tsx

@@ -1,8 +1,8 @@
-import { Global } from '@emotion/react';
+import { Global, css as emotionCss } from '@emotion/react';
 import { serializeStyles } from '@emotion/serialize';
 import { memo } from 'react';
 
-import { CSSStyle, Theme } from '@/types';
+import { CSSStyle, FullToken, Theme } from '@/types';
 
 export interface GlobalTheme {
   theme: Theme;
@@ -18,3 +18,20 @@ export const createGlobalStyleFactory =
       const theme = useTheme();
       return <Global styles={serializeStyles(styles, undefined, { ...props, theme })} />;
     });
+
+export const createGlobalFactory =
+  (useTheme: () => Theme) =>
+  (
+    styleFn: ({
+      token,
+      css,
+    }: {
+      token: FullToken;
+      css: typeof emotionCss;
+    }) => ReturnType<typeof emotionCss>,
+  ) => {
+    return memo(() => {
+      const token = useTheme();
+      return <Global styles={styleFn({ token, css: emotionCss })} />;
+    });
+  };

src/functions/createInstance.ts

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 import { CacheManager, createCSS, createEmotion, serializeCSS } from '@/core';
 
 import { createEmotionContext } from '@/factories/createEmotionContext';
-import { createGlobalStyleFactory } from '@/factories/createGlobalStyle';
+import { createGlobalFactory, createGlobalStyleFactory } from '@/factories/createGlobalStyle';
 import { createStylishFactory } from '@/factories/createStyish';
 import { createStyleProvider } from '@/factories/createStyleProvider';
 import { createStylesFactory } from '@/factories/createStyles';
@@ -99,6 +99,8 @@ export const createInstance = <T = any>(options: CreateOptions<T>) => {
 
   const createGlobalStyle = createGlobalStyleFactory(useTheme);
 
+  const createGlobal = createGlobalFactory(useTheme);
+
   const createStylish = createStylishFactory(createStyles);
 
   const ThemeProvider = createThemeProvider({
@@ -117,6 +119,7 @@ export const createInstance = <T = any>(options: CreateOptions<T>) => {
     // ******************** //
     createStyles,
     createGlobalStyle,
+    createGlobal,
     createStylish,
     // ******************** //
     // **** 基础样式方法 **** //

src/functions/index.ts

@@ -12,6 +12,7 @@ export const {
   createStyles,
   createGlobalStyle,
   createStylish,
+  createGlobal,
   // **** 基础样式方法 **** //
   css,
   cx,