✨ feat: 新增 createGlobalStyle 方法

README.md

@@ -39,7 +39,7 @@
 
 ## 简介
 
-基于 Ant Design V5 Token System 构建的业务级 `css-in-js` 解决方案。目前基于 `emotion` 提供 api。
+基于 Ant Design V5 Token System 构建的业务级 `css-in-js` 解决方案。目前基于 `emotion` 提供进行封装。
 
 ## 快速上手
 
@@ -51,15 +51,11 @@
 pnpm i antd-style -S
 ```
 
-### 使用
+### 典型使用场景
 
-`antd-style` 结合 `emotion` 使用，需要在项目中使用 `emotion` 依赖。
+#### 场景一：消费 token
 
-## 场景介绍
-
-### 场景一：消费 token
-
-```tsx
+```ts
 import { css, useToken } from 'antd-style';
 
 export const useStyle = () => {
@@ -70,9 +66,9 @@ export const useStyle = () => {
 };
 ```
 
-### 场景二：使用 styled 搭配 Token 创建自定义样式的组件
+#### 场景二：使用 styled 搭配 Token 创建自定义样式的组件
 
-```tsx
+```tsx | pure
 import { styled } from 'antd-style';
 
 const Card = styled.div<{ primary?: boolean }>`
@@ -95,7 +91,7 @@ const App = () => {
 
 ## CHANGELOG
 
-详情：[CHANGELOG](./CHANGELOG.md)
+详情：[CHANGELOG](./CHANGELOG)
 
 ## License
 

docs/changelog.md

@@ -0,0 +1,8 @@
+---
+title: 更新日志
+nav:
+  title: 更新日志
+  order: 999
+---
+
+<embed src="../CHANGELOG.md"></embed>

docs/demos/globalStyles/AntdToken.tsx

@@ -0,0 +1,33 @@
+import { createGlobalStyle, ThemeProvider } from 'antd-style';
+
+const Global = createGlobalStyle`
+  .ant-custom-button {
+    color: ${(p) => p.theme.colorPrimary};
+    background: ${(p) => p.theme.colorPrimaryBg};
+    height: ${(p) => p.theme.controlHeight}px;
+    border-radius: ${(p) => p.theme.borderRadius}px;
+    padding: 0 ${(p) => p.theme.paddingContentHorizontal}px;
+
+    :hover {
+      background: ${(p) => p.theme.colorPrimaryBgHover};
+      color: ${(p) => p.theme.colorPrimaryTextActive};
+    }
+
+    :active {
+      background: ${(p) => p.theme.colorPrimaryBorder};
+      color: ${(p) => p.theme.colorPrimaryText};
+    }
+
+    border: none;
+    cursor: pointer;
+  }
+`;
+
+export default () => {
+  return (
+    <ThemeProvider>
+      <Global />
+      <button className="ant-custom-button">antd 中不存在的按钮</button>
+    </ThemeProvider>
+  );
+};

docs/demos/globalStyles/WithoutProvider.tsx

@@ -0,0 +1,33 @@
+import { createGlobalStyle } from 'antd-style';
+
+const Global = createGlobalStyle`
+  .no-token-button {
+    color: ${(p) => p.theme.colorPrimary};
+    background: ${(p) => p.theme.colorPrimaryBg};
+    height: ${(p) => p.theme.controlHeight}px;
+    border-radius: ${(p) => p.theme.borderRadius}px;
+    padding: 0 ${(p) => p.theme.paddingContentHorizontal}px;
+
+    :hover {
+      background: ${(p) => p.theme.colorPrimaryBgHover};
+      color: ${(p) => p.theme.colorPrimaryTextActive};
+    }
+
+    :active {
+      background: ${(p) => p.theme.colorPrimaryBorder};
+      color: ${(p) => p.theme.colorPrimaryText};
+    }
+
+    border: none;
+    cursor: pointer;
+  }
+`;
+
+export default () => {
+  return (
+    <div>
+      <Global />
+      <button className="no-token-button">没了 Provider 就会被打回原形，切记</button>
+    </div>
+  );
+};

docs/demos/globalStyles/default.tsx

@@ -0,0 +1,17 @@
+import { createGlobalStyle } from 'antd-style';
+
+const Global = createGlobalStyle`
+  .some-class {
+    color: hotpink;
+  }
+
+`;
+
+export default () => {
+  return (
+    <div>
+      <Global />
+      <div className="some-class">猛男最喜欢的颜色</div>
+    </div>
+  );
+};

docs/guide/index.md

@@ -0,0 +1,6 @@
+---
+title: 快速上手
+group: 快速上手
+---
+
+# 快速上手

docs/index.md

@@ -1,27 +1,7 @@
 ---
-title: 介绍
+hero:
+  title: antd-style
+  description: a css-in-js application solution combine emotion with antd v5 token system
 ---
 
-## 简介
-
-这是一个模块的简洁 demo
-
-## 快速上手
-
-### 安装
-
-推荐使用 pnpm 安装
-
-```bash
-pnpm i xxx --S
-```
-
-### 使用
-
-核心功能简介
-
-## 场景介绍
-
-### 消费场景一
-
-### 消费场景二
+<embed src="../README.md"></embed>

docs/usage/globalStyles.md

@@ -0,0 +1,26 @@
+---
+title: 全局样式
+group: 使用指南
+---
+
+# 全局样式
+
+使用 `createGlobalStyle` 可以创建注入到全局的样式。 该方法的使用和 styled-component 基本没有区别，但实现上是基于 `@emotion/react` 和 `@emotion/serialize` 做的封装。
+
+## 默认用法
+
+<code src="../demos/globalStyles/default.tsx"></embed>
+
+## 结合 antd 的 token 使用
+
+利用 antd v5 的 token 系统，我们可以自行组织实现一个在 Ant Design 的 Button 中并不存在的样式。
+
+<code src="../demos/globalStyles/AntdToken.tsx"></embed>
+
+:::warning
+
+`<Global />` 需要套在 `ThemeProvider` 组件下，token 才能生效，否则是无效的。
+
+:::
+
+<code src="../demos/globalStyles/WithoutProvider.tsx"></embed>

package.json

@@ -60,6 +60,7 @@
     "@babel/runtime": "^7.20",
     "@emotion/css": "^11",
     "@emotion/react": "^11",
+    "@emotion/serialize": "^1",
     "@emotion/styled": "^11",
     "polished": "^4"
   },
@@ -94,7 +95,7 @@
     "react": "^18",
     "react-dom": "^18",
     "semantic-release": "^19",
-    "semantic-release-config-gitmoji": "rc",
+    "semantic-release-config-gitmoji": "^1",
     "stylelint": "^14",
     "ts-jest": "^29",
     "ts-node": "^10",

src/createGlobalStyle.tsx

@@ -0,0 +1,21 @@
+import { useTheme } from '@/styled';
+import { Global, Theme } from '@emotion/react';
+import { serializeStyles } from '@emotion/serialize';
+import { Interpolation } from '@emotion/styled';
+import { memo } from 'react';
+
+interface GlobalTheme {
+  theme: Theme;
+}
+
+/**
+ * 创建全局样式
+ * @param styles
+ */
+export const createGlobalStyle = (
+  ...styles: Array<TemplateStringsArray | Interpolation<GlobalTheme>>
+) =>
+  memo((props) => {
+    const theme = useTheme();
+    return <Global styles={serializeStyles(styles, undefined, { ...props, theme })} />;
+  });

src/index.ts

@@ -1,3 +1,4 @@
+export * from './createGlobalStyle';
 export * from './createStyles';
 export * from './styled';
 export * from './types';

src/styled.tsx

@@ -36,4 +36,5 @@ export const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = memo(
   },
 );
 
+export { useTheme } from '@emotion/react';
 export { default as styled } from '@emotion/styled';

tests/createGlobalStyle.test.tsx

@@ -0,0 +1,62 @@
+import { render } from '@testing-library/react';
+import { createGlobalStyle, ThemeProvider } from 'antd-style';
+
+describe('createGlobalStyle', () => {
+  it('全局样式', async () => {
+    const Global = createGlobalStyle`
+      .some-class {
+        color: pink;
+      }
+    `;
+
+    const { findByTestId } = render(
+      <div data-testid={'content'}>
+        <div className="some-class">pink txt</div>
+        <Global />
+      </div>,
+    );
+
+    const item = await findByTestId('content');
+
+    expect(item.firstChild).toHaveStyle({ color: 'pink' });
+  });
+
+  it('包裹 ThemeProvider 后可以获取主题样式', async () => {
+    const Global = createGlobalStyle`
+      .some-class {
+        color: ${(p) => p.theme.colorPrimary};
+      }
+    `;
+
+    const { findByTestId } = render(
+      <div data-testid={'content'}>
+        <div className="some-class">pink txt</div>
+        <Global />
+      </div>,
+      { wrapper: ThemeProvider },
+    );
+
+    const item = await findByTestId('content');
+
+    expect(item.firstChild).toHaveStyle({ color: '#1677FF' });
+  });
+
+  it('不包裹 ThemeProvider 没法获得 token', async () => {
+    const Global = createGlobalStyle`
+      .some-class {
+        color: ${(p) => p.theme.colorPrimary};
+      }
+    `;
+
+    const { findByTestId } = render(
+      <div data-testid={'content'}>
+        <div className="some-class">pink txt</div>
+        <Global />
+      </div>,
+    );
+
+    const item = await findByTestId('content');
+
+    expect(item.firstChild).toHaveStyle({ color: '' });
+  });
+});

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src", "tests", ".dumi/**/*", ".dumirc.ts", "*.ts"],
+  "include": ["src", "tests", ".dumi/**/*", ".dumirc.ts", "*.ts", "docs"],
   "compilerOptions": {
     "strict": true,
     "declaration": true,