From e02eb3818d049647407852490cabc4d2ff5bb80a Mon Sep 17 00:00:00 2001 From: arvinxx Date: Mon, 2 Jan 2023 16:05:51 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat:=20=E6=96=B0=E5=A2=9E=20creat?= =?UTF-8?q?eGlobalStyle=20=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 18 +++--- docs/changelog.md | 8 +++ docs/demos/globalStyles/AntdToken.tsx | 33 +++++++++++ docs/demos/globalStyles/WithoutProvider.tsx | 33 +++++++++++ docs/demos/globalStyles/default.tsx | 17 ++++++ docs/guide/index.md | 6 ++ docs/index.md | 28 ++-------- docs/usage/globalStyles.md | 26 +++++++++ package.json | 3 +- src/createGlobalStyle.tsx | 21 +++++++ src/index.ts | 1 + src/styled.tsx | 1 + tests/createGlobalStyle.test.tsx | 62 +++++++++++++++++++++ tsconfig.json | 2 +- 14 files changed, 222 insertions(+), 37 deletions(-) create mode 100644 docs/changelog.md create mode 100644 docs/demos/globalStyles/AntdToken.tsx create mode 100644 docs/demos/globalStyles/WithoutProvider.tsx create mode 100644 docs/demos/globalStyles/default.tsx create mode 100644 docs/guide/index.md create mode 100644 docs/usage/globalStyles.md create mode 100644 src/createGlobalStyle.tsx create mode 100644 tests/createGlobalStyle.test.tsx diff --git a/README.md b/README.md index 31d115b9..08817a6c 100644 --- a/README.md +++ b/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 diff --git a/docs/changelog.md b/docs/changelog.md new file mode 100644 index 00000000..05e5f1a3 --- /dev/null +++ b/docs/changelog.md @@ -0,0 +1,8 @@ +--- +title: 更新日志 +nav: + title: 更新日志 + order: 999 +--- + + diff --git a/docs/demos/globalStyles/AntdToken.tsx b/docs/demos/globalStyles/AntdToken.tsx new file mode 100644 index 00000000..78a93791 --- /dev/null +++ b/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 ( + + + + + ); +}; diff --git a/docs/demos/globalStyles/WithoutProvider.tsx b/docs/demos/globalStyles/WithoutProvider.tsx new file mode 100644 index 00000000..14a64978 --- /dev/null +++ b/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 ( +
+ + +
+ ); +}; diff --git a/docs/demos/globalStyles/default.tsx b/docs/demos/globalStyles/default.tsx new file mode 100644 index 00000000..0c3c3ee7 --- /dev/null +++ b/docs/demos/globalStyles/default.tsx @@ -0,0 +1,17 @@ +import { createGlobalStyle } from 'antd-style'; + +const Global = createGlobalStyle` + .some-class { + color: hotpink; + } + +`; + +export default () => { + return ( +
+ +
猛男最喜欢的颜色
+
+ ); +}; diff --git a/docs/guide/index.md b/docs/guide/index.md new file mode 100644 index 00000000..3a90e924 --- /dev/null +++ b/docs/guide/index.md @@ -0,0 +1,6 @@ +--- +title: 快速上手 +group: 快速上手 +--- + +# 快速上手 diff --git a/docs/index.md b/docs/index.md index e7c7d4cc..d86afc33 100644 --- a/docs/index.md +++ b/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 -``` - -### 使用 - -核心功能简介 - -## 场景介绍 - -### 消费场景一 - -### 消费场景二 + diff --git a/docs/usage/globalStyles.md b/docs/usage/globalStyles.md new file mode 100644 index 00000000..dee9e1c5 --- /dev/null +++ b/docs/usage/globalStyles.md @@ -0,0 +1,26 @@ +--- +title: 全局样式 +group: 使用指南 +--- + +# 全局样式 + +使用 `createGlobalStyle` 可以创建注入到全局的样式。 该方法的使用和 styled-component 基本没有区别，但实现上是基于 `@emotion/react` 和 `@emotion/serialize` 做的封装。 + +## 默认用法 + + + +## 结合 antd 的 token 使用 + +利用 antd v5 的 token 系统，我们可以自行组织实现一个在 Ant Design 的 Button 中并不存在的样式。 + + + +:::warning + +`` 需要套在 `ThemeProvider` 组件下，token 才能生效，否则是无效的。 + +::: + + diff --git a/package.json b/package.json index eff6dadf..1e251221 100644 --- a/package.json +++ b/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", diff --git a/src/createGlobalStyle.tsx b/src/createGlobalStyle.tsx new file mode 100644 index 00000000..ff1575e3 --- /dev/null +++ b/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> +) => + memo((props) => { + const theme = useTheme(); + return ; + }); diff --git a/src/index.ts b/src/index.ts index 1e20e97a..62c4722d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ +export * from './createGlobalStyle'; export * from './createStyles'; export * from './styled'; export * from './types'; diff --git a/src/styled.tsx b/src/styled.tsx index ae6c726d..4261033b 100644 --- a/src/styled.tsx +++ b/src/styled.tsx @@ -36,4 +36,5 @@ export const ThemeProvider: FC> = memo( }, ); +export { useTheme } from '@emotion/react'; export { default as styled } from '@emotion/styled'; diff --git a/tests/createGlobalStyle.test.tsx b/tests/createGlobalStyle.test.tsx new file mode 100644 index 00000000..628c1460 --- /dev/null +++ b/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( +
+
pink txt
+ +
, + ); + + 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( +
+
pink txt
+ +
, + { 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( +
+
pink txt
+ +
, + ); + + const item = await findByTestId('content'); + + expect(item.firstChild).toHaveStyle({ color: '' }); + }); +}); diff --git a/tsconfig.json b/tsconfig.json index 819eef02..bde0dbb4 100644 --- a/tsconfig.json +++ b/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,