diff --git a/docs/demos/genStyleUtils.md b/docs/demos/genStyleUtils.md index 397349d..f118dcd 100644 --- a/docs/demos/genStyleUtils.md +++ b/docs/demos/genStyleUtils.md @@ -10,11 +10,14 @@ nav: ## 入参介绍 -### `genStyleUtils(getConfigProviderContext?, getThemeProviderContext?)` +### `genStyleUtils(config)` - `config`: 可选,配置 - `useCSP`: 使用 CSP 的钩子函数 - `usePrefix`: 使用样式前缀的钩子函数 - `useToken`: 使用 token 的钩子函数 + - `getResetStyles`: 获取重置样式函数 + - `getCommonStyle`: 获取通用样式函数 + - `getCompUnitless`: 获取组件无单位样式函数 - `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..dda8051 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, @@ -112,6 +119,13 @@ export default function genStyleUtils< useToken: UseToken; useCSP?: UseCSP; getResetStyles?: GetResetStyles, + getCommonStyle?: ( + token: OverrideTokenMap, + componentPrefixCls: string, + rootCls?: string, + resetFont?: boolean, + ) => CSSObject; + getCompUnitless?: GetCompUnitless, } ) { // Dependency inversion for preparing basic config. @@ -120,6 +134,8 @@ export default function genStyleUtils< useToken, usePrefix, getResetStyles, + getCommonStyle, + getCompUnitless, } = config; function genStyleHooks>( @@ -165,8 +181,11 @@ export default function genStyleUtils< // Fill unitless const originUnitless = options?.unitless || {}; + + const originCompUnitless = typeof getCompUnitless === 'function' ? getCompUnitless(component) : {}; + const compUnitless: any = { - ...originUnitless, + ...originCompUnitless, [prefixToken('zIndexPopup')]: true, }; Object.keys(originUnitless).forEach((key) => { @@ -315,12 +334,6 @@ export default function genStyleUtils< unitless?: { [key in ComponentTokenKey]: boolean; }; - genCommonStyle?: ( - token: OverrideTokenMap, - componentPrefixCls: string, - rootCls?: string, - resetFont?: boolean, - ) => CSSObject; } = {}, ) { const cells = ( @@ -364,8 +377,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, @@ -382,7 +394,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( @@ -398,7 +410,7 @@ export default function genStyleUtils< CompTokenMap, AliasToken, C - >(component, realToken, getDefaultToken) ?? {}; + >(component, realToken, getDefaultToken); const componentCls = `.${prefixCls}`; const componentToken = getComponentToken( @@ -410,7 +422,7 @@ export default function genStyleUtils< }, ); - if (cssVar) { + if (cssVar && typeof defaultComponentToken === 'object') { Object.keys(defaultComponentToken).forEach((key) => { defaultComponentToken[key] = `var(${token2CSSVar( key, @@ -423,8 +435,8 @@ export default function genStyleUtils< { componentCls, prefixCls, - iconCls: !!iconPrefixCls.length ? '' : `.${iconPrefixCls}`, - antCls: !!rootPrefixCls.length ? '' : `.${rootPrefixCls}`, + iconCls: `.${iconPrefixCls}`, + antCls: `.${rootPrefixCls}`, calc, // @ts-ignore max, @@ -441,15 +453,18 @@ export default function genStyleUtils< iconPrefixCls, }); flush(component, componentToken); + const commonStyle = typeof getCommonStyle === 'function' + ? getCommonStyle( + mergedToken, + prefixCls, + rootCls, + options.resetFont + ) + : null; return [ options.resetStyle === false ? null - : options?.genCommonStyle?.( - mergedToken, - prefixCls, - rootCls, - options.resetFont, - ) ?? {}, + : commonStyle, styleInterpolation, ]; }, 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) => {