feat(comp:theme): supports prefix for token register (#1865)

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))

packages/components/theme/src/composables/useTokenRegister.ts

@@ -38,6 +38,7 @@ export type RegisterToken<K extends ThemeKeys | keyof Ext, Ext extends object =
   key: K,
   getTokens: TokenGetter<K, Ext>,
   transforms?: TokenTransforms<K, Ext> | undefined,
+  prefix?: string,
   hashed?: boolean,
   hashId?: string,
 ) => string | undefined
@@ -67,19 +68,13 @@ export function useTokenRegister(
   const tokenGettersMap = new Map<ThemeKeys, TokenGetter<ThemeKeys>>()
   const tokenTransformsMap = new Map<ThemeKeys, TokenTransforms<ThemeKeys> | undefined>()
   const tokenHashedMap = new Map<ThemeKeys, boolean | undefined>()
+  const tokenPrefixMap = new Map<ThemeKeys, string | undefined>()
 
   const updateThemeStyle = useDynamicCss(mergedAttachTo)
 
   const [globalHashId, setGlobalHashId] = useState<string>('')
 
-  const _updateToken = <K extends ThemeKeys>(
-    key: K,
-    getTokens: TokenGetter<K>,
-    transforms: TokenTransforms<K> | undefined,
-    force: boolean,
-    hashed?: boolean,
-    existedHashId?: string,
-  ) => {
+  const _updateToken = <K extends ThemeKeys>(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<K>
+    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<string>,
+        prefix,
         transforms,
       )
       updateThemeStyle(cssContent, record.hashId, oldHashId)
@@ -146,22 +148,24 @@ export function useTokenRegister(
     key: K,
     getTokens: TokenGetter<K>,
     transforms: TokenTransforms<K> | 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 = <K extends ThemeKeys>(key: K, hashId?: string) => {
     if (!isTokensRegistered(key)) {
       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) => {

packages/components/theme/src/useThemeToken.ts

@@ -31,7 +31,7 @@ export interface ScopedUseThemeTokenContext<K extends UseThemeTokenScope | keyof
   globalHashId: ComputedRef<string>
   hashId: ComputedRef<string>
   themeTokens: ComputedRef<CertainThemeTokens<K, Ext>>
-  registerToken: (getTokens: TokenGetter<K, Ext>, transforms?: TokenTransforms<K, Ext>) => string
+  registerToken: (getTokens: TokenGetter<K, Ext>, transforms?: TokenTransforms<K, Ext>, prefixCls?: string) => string
 }
 
 export interface GlobalUseThemeTokenContext {
@@ -94,8 +94,12 @@ export function useThemeToken<Ext extends object, K extends UseThemeTokenScope |
     const hashId = computed(() => (hashed.value ? getThemeHashId(key) ?? '' : ''))
     const themeTokens = computed(() => getThemeTokens(key))
 
-    const registerToken = (getTokens: TokenGetter<NotNullKey, Ext>, transforms?: TokenTransforms<NotNullKey, Ext>) => {
-      return _registerToken(key, getTokens, transforms as TokenTransforms<ThemeKeys | keyof Ext, Ext>) ?? ''
+    const registerToken = (
+      getTokens: TokenGetter<NotNullKey, Ext>,
+      transforms?: TokenTransforms<NotNullKey, Ext>,
+      prefixCls?: string,
+    ) => {
+      return _registerToken(key, getTokens, transforms as TokenTransforms<ThemeKeys | keyof Ext, Ext>, prefixCls) ?? ''
     }
 
     return {

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<string>, transforms?: TokenTransforms<string>): string {
+export function tokenToCss(record: TokenRecord<string>, prefix?: string, transforms?: TokenTransforms<string>): 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<string>