From ea526eb1f92c1ee60e9c2bd331b092b8db436e75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Mon, 22 Jul 2024 15:20:47 +0800 Subject: [PATCH 1/5] feat: add new config `config.getCommonStyle` for `genStyleUtils` --- docs/demos/genStyleUtils.md | 4 +++- src/index.ts | 1 + src/util/genStyleUtils.tsx | 30 ++++++++++++++++++++++-------- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/docs/demos/genStyleUtils.md b/docs/demos/genStyleUtils.md index 397349d..0de4d58 100644 --- a/docs/demos/genStyleUtils.md +++ b/docs/demos/genStyleUtils.md @@ -10,11 +10,13 @@ nav: ## 入参介绍 -### `genStyleUtils(getConfigProviderContext?, getThemeProviderContext?)` +### `genStyleUtils(config)` - `config`: 可选，配置 - `useCSP`: 使用 CSP 的钩子函数 - `usePrefix`: 使用样式前缀的钩子函数 - `useToken`: 使用 token 的钩子函数 + - `getResetStyles`: 获取重置样式函数 + - `getCommonStyle`: 获取通用样式函数 - `CompTokenMap`: 范型参数，表示组件 token 映射 - `AliasToken`: 范型参数，表示别名 token - `DesignToken`: 范型参数，表示设计 token diff --git a/src/index.ts b/src/index.ts index 601b439..a89f27b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,6 +3,7 @@ export { default as genCalc } from './util/calc'; export { default as statisticToken, merge as mergeToken, + statistic, } from './util/statistic'; export type { diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx index 8097a9f..de0fbe0 100644 --- a/src/util/genStyleUtils.tsx +++ b/src/util/genStyleUtils.tsx @@ -112,6 +112,12 @@ export default function genStyleUtils< useToken: UseToken; useCSP?: UseCSP; getResetStyles?: GetResetStyles, + getCommonStyle?: ( + token: OverrideTokenMap, + componentPrefixCls: string, + rootCls?: string, + resetFont?: boolean, + ) => CSSObject; } ) { // Dependency inversion for preparing basic config. @@ -120,6 +126,7 @@ export default function genStyleUtils< useToken, usePrefix, getResetStyles, + getCommonStyle, } = config; function genStyleHooks>( @@ -166,7 +173,20 @@ export default function genStyleUtils< // Fill unitless const originUnitless = options?.unitless || {}; const compUnitless: any = { - ...originUnitless, + // Todo: ...unitless, + // ...originUnitless, + lineHeight: true, + lineHeightSM: true, + lineHeightLG: true, + lineHeightHeading1: true, + lineHeightHeading2: true, + lineHeightHeading3: true, + lineHeightHeading4: true, + lineHeightHeading5: true, + opacityLoading: true, + fontWeightStrong: true, + zIndexPopupBase: true, + zIndexBase: true, [prefixToken('zIndexPopup')]: true, }; Object.keys(originUnitless).forEach((key) => { @@ -315,12 +335,6 @@ export default function genStyleUtils< unitless?: { [key in ComponentTokenKey]: boolean; }; - genCommonStyle?: ( - token: OverrideTokenMap, - componentPrefixCls: string, - rootCls?: string, - resetFont?: boolean, - ) => CSSObject; } = {}, ) { const cells = ( @@ -444,7 +458,7 @@ export default function genStyleUtils< return [ options.resetStyle === false ? null - : options?.genCommonStyle?.( + : getCommonStyle?.( mergedToken, prefixCls, rootCls, From f682a9f5c26ddc3ec748ebdc6bb4ea8e8c95cd31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Mon, 22 Jul 2024 16:06:41 +0800 Subject: [PATCH 2/5] fix: logic error inside `genComponentStyleHook` that caused a base style exception. --- src/util/genStyleUtils.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx index de0fbe0..587ff06 100644 --- a/src/util/genStyleUtils.tsx +++ b/src/util/genStyleUtils.tsx @@ -378,8 +378,7 @@ export default function genStyleUtils< const { max, min } = genMaxMin(type); // Shared config - const sharedConfig: Omit[0], 'path'> = - { + const sharedConfig: Omit[0], 'path'> = { theme, token, hashId, @@ -396,7 +395,7 @@ export default function genStyleUtils< // Generate style for all need reset tags. useStyleRegister( { ...sharedConfig, clientOnly: false, path: ['Shared', rootPrefixCls] }, - () => getResetStyles?.(token) ?? [], + () => typeof getResetStyles === 'function' ? getResetStyles(token) : [], ); const wrapSSR = useStyleRegister( @@ -412,7 +411,7 @@ export default function genStyleUtils< CompTokenMap, AliasToken, C - >(component, realToken, getDefaultToken) ?? {}; + >(component, realToken, getDefaultToken); const componentCls = `.${prefixCls}`; const componentToken = getComponentToken( @@ -437,8 +436,8 @@ export default function genStyleUtils< { componentCls, prefixCls, - iconCls: !!iconPrefixCls.length ? '' : `.${iconPrefixCls}`, - antCls: !!rootPrefixCls.length ? '' : `.${rootPrefixCls}`, + iconCls: `.${iconPrefixCls}`, + antCls: `.${rootPrefixCls}`, calc, // @ts-ignore max, @@ -455,15 +454,18 @@ export default function genStyleUtils< iconPrefixCls, }); flush(component, componentToken); - return [ - options.resetStyle === false - ? null - : getCommonStyle?.( + const commonStyle = typeof getCommonStyle === 'function' + ? getCommonStyle( mergedToken, prefixCls, rootCls, - options.resetFont, - ) ?? {}, + options.resetFont + ) + : null; + return [ + options.resetStyle === false + ? null + : commonStyle, styleInterpolation, ]; }, From fa59da399e5d06ad5904bfce9e9e390b7ae1fe84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Mon, 22 Jul 2024 17:25:40 +0800 Subject: [PATCH 3/5] feat: add new config `config.getCompUnitless` for `genStyleUtils` --- src/util/genStyleUtils.tsx | 37 ++++++++++++++++++------------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx index 587ff06..83fa63e 100644 --- a/src/util/genStyleUtils.tsx +++ b/src/util/genStyleUtils.tsx @@ -102,6 +102,13 @@ export type GetResetStyles< AliasToken extends TokenType, > = (token: Partial) => CSSInterpolation; +export type GetCompUnitless< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, +> = >(component: C | [C, string]) => { + [key in ComponentTokenKey]: boolean; +} + export default function genStyleUtils< CompTokenMap extends TokenMap, AliasToken extends TokenType, @@ -118,6 +125,7 @@ export default function genStyleUtils< rootCls?: string, resetFont?: boolean, ) => CSSObject; + getCompUnitless?: GetCompUnitless, } ) { // Dependency inversion for preparing basic config. @@ -127,6 +135,7 @@ export default function genStyleUtils< usePrefix, getResetStyles, getCommonStyle, + getCompUnitless, } = config; function genStyleHooks>( @@ -172,21 +181,11 @@ export default function genStyleUtils< // Fill unitless const originUnitless = options?.unitless || {}; + + const originCompUnitless = typeof getCompUnitless === 'function' ? getCompUnitless(component) : {}; + const compUnitless: any = { - // Todo: ...unitless, - // ...originUnitless, - lineHeight: true, - lineHeightSM: true, - lineHeightLG: true, - lineHeightHeading1: true, - lineHeightHeading2: true, - lineHeightHeading3: true, - lineHeightHeading4: true, - lineHeightHeading5: true, - opacityLoading: true, - fontWeightStrong: true, - zIndexPopupBase: true, - zIndexBase: true, + ...originCompUnitless, [prefixToken('zIndexPopup')]: true, }; Object.keys(originUnitless).forEach((key) => { @@ -456,11 +455,11 @@ export default function genStyleUtils< flush(component, componentToken); const commonStyle = typeof getCommonStyle === 'function' ? getCommonStyle( - mergedToken, - prefixCls, - rootCls, - options.resetFont - ) + mergedToken, + prefixCls, + rootCls, + options.resetFont + ) : null; return [ options.resetStyle === false From 9bf6acd070284df4fe46606d90de41b035454dd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Mon, 22 Jul 2024 17:32:17 +0800 Subject: [PATCH 4/5] docs: update `genStyleUtils` config --- docs/demos/genStyleUtils.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/demos/genStyleUtils.md b/docs/demos/genStyleUtils.md index 0de4d58..f118dcd 100644 --- a/docs/demos/genStyleUtils.md +++ b/docs/demos/genStyleUtils.md @@ -17,6 +17,7 @@ nav: - `useToken`: 使用 token 的钩子函数 - `getResetStyles`: 获取重置样式函数 - `getCommonStyle`: 获取通用样式函数 + - `getCompUnitless`: 获取组件无单位样式函数 - `CompTokenMap`: 范型参数，表示组件 token 映射 - `AliasToken`: 范型参数，表示别名 token - `DesignToken`: 范型参数，表示设计 token From f890ec837b09eba54ef8a1099404da7b1ee327a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Mon, 22 Jul 2024 17:50:06 +0800 Subject: [PATCH 5/5] fix: ci error --- src/util/genStyleUtils.tsx | 2 +- src/util/statistic.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx index 83fa63e..dda8051 100644 --- a/src/util/genStyleUtils.tsx +++ b/src/util/genStyleUtils.tsx @@ -422,7 +422,7 @@ export default function genStyleUtils< }, ); - if (cssVar) { + if (cssVar && typeof defaultComponentToken === 'object') { Object.keys(defaultComponentToken).forEach((key) => { defaultComponentToken[key] = `var(${token2CSSVar( key, diff --git a/src/util/statistic.ts b/src/util/statistic.ts index d04f8c3..cfcdc4d 100644 --- a/src/util/statistic.ts +++ b/src/util/statistic.ts @@ -21,6 +21,8 @@ export function merge(...objs: Partial { + if (typeof obj !== 'object') return; + const keys = Object.keys(obj); keys.forEach((key) => {