Skip to content

Commit e02eb38

Browse files
arvinxxarvinxx
committed
✨ feat: 新增 createGlobalStyle 方法
1 parent 58ceed5 commit e02eb38

14 files changed

+222
-37
lines changed

‎README.md

+7-11
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939

4040
## 简介
4141

42-
基于 Ant Design V5 Token System 构建的业务级 `css-in-js` 解决方案。目前基于 `emotion` 提供 api。
42+
基于 Ant Design V5 Token System 构建的业务级 `css-in-js` 解决方案。目前基于 `emotion` 提供进行封装。
4343

4444
## 快速上手
4545

@@ -51,15 +51,11 @@
5151
pnpm i antd-style -S
5252
```
5353

54-
### 使用
54+
### 典型使用场景
5555

56-
`antd-style` 结合 `emotion` 使用，需要在项目中使用 `emotion` 依赖。
56+
#### 场景一：消费 token
5757

58-
## 场景介绍
59-
60-
### 场景一：消费 token
61-
62-
```tsx
58+
```ts
6359
import { css, useToken } from 'antd-style';
6460

6561
export const useStyle = () => {
@@ -70,9 +66,9 @@ export const useStyle = () => {
7066
};
7167
```
7268

73-
### 场景二：使用 styled 搭配 Token 创建自定义样式的组件
69+
#### 场景二：使用 styled 搭配 Token 创建自定义样式的组件
7470

75-
```tsx
71+
```tsx | pure
7672
import { styled } from 'antd-style';
7773

7874
const Card = styled.div<{ primary?: boolean }>`
@@ -95,7 +91,7 @@ const App = () => {
9591

9692
## CHANGELOG
9793

98-
详情：[CHANGELOG](./CHANGELOG.md)
94+
详情：[CHANGELOG](./CHANGELOG)
9995

10096
## License
10197

‎docs/changelog.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: 更新日志
3+
nav:
4+
title: 更新日志
5+
order: 999
6+
---
7+
8+
<embed src="../CHANGELOG.md"></embed>

‎docs/demos/globalStyles/AntdToken.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { createGlobalStyle, ThemeProvider } from 'antd-style';
2+
3+
const Global = createGlobalStyle`
4+
.ant-custom-button {
5+
color: ${(p) => p.theme.colorPrimary};
6+
background: ${(p) => p.theme.colorPrimaryBg};
7+
height: ${(p) => p.theme.controlHeight}px;
8+
border-radius: ${(p) => p.theme.borderRadius}px;
9+
padding: 0 ${(p) => p.theme.paddingContentHorizontal}px;
10+
11+
:hover {
12+
background: ${(p) => p.theme.colorPrimaryBgHover};
13+
color: ${(p) => p.theme.colorPrimaryTextActive};
14+
}
15+
16+
:active {
17+
background: ${(p) => p.theme.colorPrimaryBorder};
18+
color: ${(p) => p.theme.colorPrimaryText};
19+
}
20+
21+
border: none;
22+
cursor: pointer;
23+
}
24+
`;
25+
26+
export default () => {
27+
return (
28+
<ThemeProvider>
29+
<Global />
30+
<button className="ant-custom-button">antd 中不存在的按钮</button>
31+
</ThemeProvider>
32+
);
33+
};

‎docs/demos/globalStyles/WithoutProvider.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { createGlobalStyle } from 'antd-style';
2+
3+
const Global = createGlobalStyle`
4+
.no-token-button {
5+
color: ${(p) => p.theme.colorPrimary};
6+
background: ${(p) => p.theme.colorPrimaryBg};
7+
height: ${(p) => p.theme.controlHeight}px;
8+
border-radius: ${(p) => p.theme.borderRadius}px;
9+
padding: 0 ${(p) => p.theme.paddingContentHorizontal}px;
10+
11+
:hover {
12+
background: ${(p) => p.theme.colorPrimaryBgHover};
13+
color: ${(p) => p.theme.colorPrimaryTextActive};
14+
}
15+
16+
:active {
17+
background: ${(p) => p.theme.colorPrimaryBorder};
18+
color: ${(p) => p.theme.colorPrimaryText};
19+
}
20+
21+
border: none;
22+
cursor: pointer;
23+
}
24+
`;
25+
26+
export default () => {
27+
return (
28+
<div>
29+
<Global />
30+
<button className="no-token-button">没了 Provider 就会被打回原形，切记</button>
31+
</div>
32+
);
33+
};

‎docs/demos/globalStyles/default.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { createGlobalStyle } from 'antd-style';
2+
3+
const Global = createGlobalStyle`
4+
.some-class {
5+
color: hotpink;
6+
}
7+
8+
`;
9+
10+
export default () => {
11+
return (
12+
<div>
13+
<Global />
14+
<div className="some-class">猛男最喜欢的颜色</div>
15+
</div>
16+
);
17+
};

‎docs/guide/index.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: 快速上手
3+
group: 快速上手
4+
---
5+
6+
# 快速上手

‎docs/index.md

+4-24
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
11
---
2-
title: 介绍
2+
hero:
3+
title: antd-style
4+
description: a css-in-js application solution combine emotion with antd v5 token system
35
---
46

5-
## 简介
6-
7-
这是一个模块的简洁 demo
8-
9-
## 快速上手
10-
11-
### 安装
12-
13-
推荐使用 pnpm 安装
14-
15-
```bash
16-
pnpm i xxx --S
17-
```
18-
19-
### 使用
20-
21-
核心功能简介
22-
23-
## 场景介绍
24-
25-
### 消费场景一
26-
27-
### 消费场景二
7+
<embed src="../README.md"></embed>

‎docs/usage/globalStyles.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: 全局样式
3+
group: 使用指南
4+
---
5+
6+
# 全局样式
7+
8+
使用 `createGlobalStyle` 可以创建注入到全局的样式。 该方法的使用和 styled-component 基本没有区别，但实现上是基于 `@emotion/react` 和 `@emotion/serialize` 做的封装。
9+
10+
## 默认用法
11+
12+
<code src="../demos/globalStyles/default.tsx"></embed>
13+
14+
## 结合 antd 的 token 使用
15+
16+
利用 antd v5 的 token 系统，我们可以自行组织实现一个在 Ant Design 的 Button 中并不存在的样式。
17+
18+
<code src="../demos/globalStyles/AntdToken.tsx"></embed>
19+
20+
:::warning
21+
22+
`<Global />` 需要套在 `ThemeProvider` 组件下，token 才能生效，否则是无效的。
23+
24+
:::
25+
26+
<code src="../demos/globalStyles/WithoutProvider.tsx"></embed>

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"@babel/runtime": "^7.20",
6161
"@emotion/css": "^11",
6262
"@emotion/react": "^11",
63+
"@emotion/serialize": "^1",
6364
"@emotion/styled": "^11",
6465
"polished": "^4"
6566
},
@@ -94,7 +95,7 @@
9495
"react": "^18",
9596
"react-dom": "^18",
9697
"semantic-release": "^19",
97-
"semantic-release-config-gitmoji": "rc",
98+
"semantic-release-config-gitmoji": "^1",
9899
"stylelint": "^14",
99100
"ts-jest": "^29",
100101
"ts-node": "^10",

‎src/createGlobalStyle.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useTheme } from '@/styled';
2+
import { Global, Theme } from '@emotion/react';
3+
import { serializeStyles } from '@emotion/serialize';
4+
import { Interpolation } from '@emotion/styled';
5+
import { memo } from 'react';
6+
7+
interface GlobalTheme {
8+
theme: Theme;
9+
}
10+
11+
/**
12+
* 创建全局样式
13+
* @param styles
14+
*/
15+
export const createGlobalStyle = (
16+
...styles: Array<TemplateStringsArray | Interpolation<GlobalTheme>>
17+
) =>
18+
memo((props) => {
19+
const theme = useTheme();
20+
return <Global styles={serializeStyles(styles, undefined, { ...props, theme })} />;
21+
});

‎src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export * from './createGlobalStyle';
12
export * from './createStyles';
23
export * from './styled';
34
export * from './types';

‎src/styled.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,5 @@ export const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = memo(
3636
},
3737
);
3838

39+
export { useTheme } from '@emotion/react';
3940
export { default as styled } from '@emotion/styled';

‎tests/createGlobalStyle.test.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { render } from '@testing-library/react';
2+
import { createGlobalStyle, ThemeProvider } from 'antd-style';
3+
4+
describe('createGlobalStyle', () => {
5+
it('全局样式', async () => {
6+
const Global = createGlobalStyle`
7+
.some-class {
8+
color: pink;
9+
}
10+
`;
11+
12+
const { findByTestId } = render(
13+
<div data-testid={'content'}>
14+
<div className="some-class">pink txt</div>
15+
<Global />
16+
</div>,
17+
);
18+
19+
const item = await findByTestId('content');
20+
21+
expect(item.firstChild).toHaveStyle({ color: 'pink' });
22+
});
23+
24+
it('包裹 ThemeProvider 后可以获取主题样式', async () => {
25+
const Global = createGlobalStyle`
26+
.some-class {
27+
color: ${(p) => p.theme.colorPrimary};
28+
}
29+
`;
30+
31+
const { findByTestId } = render(
32+
<div data-testid={'content'}>
33+
<div className="some-class">pink txt</div>
34+
<Global />
35+
</div>,
36+
{ wrapper: ThemeProvider },
37+
);
38+
39+
const item = await findByTestId('content');
40+
41+
expect(item.firstChild).toHaveStyle({ color: '#1677FF' });
42+
});
43+
44+
it('不包裹 ThemeProvider 没法获得 token', async () => {
45+
const Global = createGlobalStyle`
46+
.some-class {
47+
color: ${(p) => p.theme.colorPrimary};
48+
}
49+
`;
50+
51+
const { findByTestId } = render(
52+
<div data-testid={'content'}>
53+
<div className="some-class">pink txt</div>
54+
<Global />
55+
</div>,
56+
);
57+
58+
const item = await findByTestId('content');
59+
60+
expect(item.firstChild).toHaveStyle({ color: '' });
61+
});
62+
});

‎tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"include": ["src", "tests", ".dumi/**/*", ".dumirc.ts", "*.ts"],
2+
"include": ["src", "tests", ".dumi/**/*", ".dumirc.ts", "*.ts", "docs"],
33
"compilerOptions": {
44
"strict": true,
55
"declaration": true,

0 commit comments

Comments
 (0)