From 094f62adef4496e2aff00c2dba830c1cb129df26 Mon Sep 17 00:00:00 2001 From: saller Date: Mon, 25 Mar 2024 15:56:12 +0800 Subject: [PATCH] feat(comp:theme): supports prefix for token register (#1865) --- .../theme/src/composables/useThemeProvider.ts | 9 +---- .../theme/src/composables/useTokenRegister.ts | 38 ++++++++++--------- .../components/theme/src/useThemeToken.ts | 10 +++-- .../components/theme/src/utils/tokenToCss.ts | 5 ++- 4 files changed, 33 insertions(+), 29 deletions(-) diff --git a/packages/components/theme/src/composables/useThemeProvider.ts b/packages/components/theme/src/composables/useThemeProvider.ts index 706f9d269..5ea89107b 100644 --- a/packages/components/theme/src/composables/useThemeProvider.ts +++ b/packages/components/theme/src/composables/useThemeProvider.ts @@ -83,6 +83,7 @@ export function createThemeProviderContext( () => (useSupper ? supperContext!.getThemeTokens(globalTokenKey) : mergedTokens.value.global), undefined, undefined, + undefined, useSupper ? supperContext!.getThemeHashId(globalTokenKey) : undefined, ) } else { @@ -98,6 +99,7 @@ export function createThemeProviderContext( resetTokenKey, globalTokens => (useSupper ? supperContext!.getThemeTokens(resetTokenKey) : getResetTokens(globalTokens)), undefined, + undefined, false, useSupper ? supperContext!.getThemeHashId(resetTokenKey) : undefined, ) @@ -136,11 +138,4 @@ export function createThemeProviderContext( } } -// export function useThemeProvider(props?: ThemeProviderProps) { -// let supperContext = inject(THEME_PROVIDER_TOKEN, null) -// supperContext = supperContext ?? useSharedThemeProvider() - -// return createThemeProviderContext(supperContext, props) -// } - export const useSharedThemeProvider = createSharedComposable(() => createThemeProviderContext(null)) diff --git a/packages/components/theme/src/composables/useTokenRegister.ts b/packages/components/theme/src/composables/useTokenRegister.ts index 41119d3e6..fd324fd0d 100644 --- a/packages/components/theme/src/composables/useTokenRegister.ts +++ b/packages/components/theme/src/composables/useTokenRegister.ts @@ -38,6 +38,7 @@ export type RegisterToken, transforms?: TokenTransforms | undefined, + prefix?: string, hashed?: boolean, hashId?: string, ) => string | undefined @@ -67,19 +68,13 @@ export function useTokenRegister( const tokenGettersMap = new Map>() const tokenTransformsMap = new Map | undefined>() const tokenHashedMap = new Map() + const tokenPrefixMap = new Map() const updateThemeStyle = useDynamicCss(mergedAttachTo) const [globalHashId, setGlobalHashId] = useState('') - const _updateToken = ( - key: K, - getTokens: TokenGetter, - transforms: TokenTransforms | undefined, - force: boolean, - hashed?: boolean, - existedHashId?: string, - ) => { + const _updateToken = (key: K, force: boolean, existedHashId?: string) => { let record = tokenRecordMap.get(key ?? globalTokenKey) if (record && !force) { @@ -94,6 +89,15 @@ export function useTokenRegister( return } + const getTokens = tokenGettersMap.get(key) as TokenGetter + const transforms = tokenTransformsMap.get(key) + const prefix = tokenPrefixMap.get(key) + const hashed = tokenHashedMap.get(key) + + if (!getTokens) { + return + } + const tokens = getTokens(globalTokens, mergedPresetTheme.value, mergedAlgorithms.value) if (!tokens) { @@ -117,14 +121,12 @@ export function useTokenRegister( } tokenRecordMap.set(key, record) - tokenGettersMap.set(key, getTokens) - tokenTransformsMap.set(key, transforms) - tokenHashedMap.set(key, hashed) // if hashId is already provided, we consider the style injected already, no need to inject it again if (injectThemeStyle.value && !existedHashId) { const cssContent = tokenToCss( { ...record, hashId: hashed ?? mergedHashed.value ? record.hashId : '' } as TokenRecord, + prefix, transforms, ) updateThemeStyle(cssContent, record.hashId, oldHashId) @@ -146,10 +148,16 @@ export function useTokenRegister( key: K, getTokens: TokenGetter, transforms: TokenTransforms | undefined, + prefix?: string, hashed?: boolean, hashId?: string, ) => { - return _updateToken(key, getTokens, transforms, false, hashed, hashId) + tokenGettersMap.set(key, getTokens) + tokenTransformsMap.set(key, transforms) + tokenPrefixMap.set(key, prefix) + tokenHashedMap.set(key, hashed) + + return _updateToken(key, false, hashId) } const updateToken = (key: K, hashId?: string) => { @@ -157,11 +165,7 @@ export function useTokenRegister( return } - const tokenGetter = tokenGettersMap.get(key)! - const tokenTransforms = tokenTransformsMap.get(key) - const tokenHashed = tokenHashedMap.get(key) - - return _updateToken(key, tokenGetter, tokenTransforms, true, tokenHashed, hashId) + return _updateToken(key, true, hashId) } const isTokensRegistered = (key: ThemeKeys) => { diff --git a/packages/components/theme/src/useThemeToken.ts b/packages/components/theme/src/useThemeToken.ts index b4dce7c07..e874a603f 100644 --- a/packages/components/theme/src/useThemeToken.ts +++ b/packages/components/theme/src/useThemeToken.ts @@ -31,7 +31,7 @@ export interface ScopedUseThemeTokenContext hashId: ComputedRef themeTokens: ComputedRef> - registerToken: (getTokens: TokenGetter, transforms?: TokenTransforms) => string + registerToken: (getTokens: TokenGetter, transforms?: TokenTransforms, prefixCls?: string) => string } export interface GlobalUseThemeTokenContext { @@ -94,8 +94,12 @@ export function useThemeToken (hashed.value ? getThemeHashId(key) ?? '' : '')) const themeTokens = computed(() => getThemeTokens(key)) - const registerToken = (getTokens: TokenGetter, transforms?: TokenTransforms) => { - return _registerToken(key, getTokens, transforms as TokenTransforms) ?? '' + const registerToken = ( + getTokens: TokenGetter, + transforms?: TokenTransforms, + prefixCls?: string, + ) => { + return _registerToken(key, getTokens, transforms as TokenTransforms, prefixCls) ?? '' } return { diff --git a/packages/components/theme/src/utils/tokenToCss.ts b/packages/components/theme/src/utils/tokenToCss.ts index b7b38077b..70473ebfe 100644 --- a/packages/components/theme/src/utils/tokenToCss.ts +++ b/packages/components/theme/src/utils/tokenToCss.ts @@ -10,11 +10,12 @@ import { kebabCase } from 'lodash-es' import { defaultTokenTransform } from './tokenTransforms' import { type ThemeTokenKey, type TokenRecord, type TokenTransforms, globalTokenKey, themeTokenPrefix } from '../types' -export function tokenToCss(record: TokenRecord, transforms?: TokenTransforms): string { +export function tokenToCss(record: TokenRecord, prefix?: string, transforms?: TokenTransforms): string { const { key, tokens, hashId } = record + const resolvedPrefix = prefix ?? themeTokenPrefix let cssVarContents = '' - const varNamePrefix = `--${themeTokenPrefix}${key === globalTokenKey ? '' : `-${kebabCase(key)}`}` + const varNamePrefix = `--${resolvedPrefix}${key === globalTokenKey ? '' : `-${kebabCase(key)}`}` Object.entries(tokens).forEach(([tokenName, value]) => { const _tokenName = tokenName as ThemeTokenKey