fix(comp:theme): calculated hash of unhashed tokens should be differe…

…nt (#1973)
IDuxFE · Jul 30, 2024 · 8bf3d66 · 8bf3d66
1 parent 8456922
commit 8bf3d66
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/components/theme/src/composables/useTokenRegister.ts b/packages/components/theme/src/composables/useTokenRegister.ts
@@ -92,7 +92,7 @@ export function useTokenRegister(
     const getTokens = tokenGettersMap.get(key) as TokenGetter<K>
     const transforms = tokenTransformsMap.get(key)
     const prefix = tokenPrefixMap.get(key)
-    const hashed = tokenHashedMap.get(key)
+    const hashed = tokenHashedMap.get(key) ?? mergedHashed.value
 
     if (!getTokens) {
       return
@@ -106,7 +106,7 @@ export function useTokenRegister(
 
     const mergedCompTokens = getMergedTokens(key, tokens)
 
-    const hashId = existedHashId ?? createTokensHash(key, mergedCompTokens as Record<string, string | number>)
+    const hashId = existedHashId ?? createTokensHash(key, mergedCompTokens as Record<string, string | number>, hashed)
 
     if (record?.hashId === hashId) {
       return hashId
@@ -125,7 +125,7 @@ export function useTokenRegister(
     // 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>,
+        { ...record, hashId: hashed ? record.hashId : '' } as TokenRecord<string>,
         prefix,
         transforms,
       )

diff --git a/packages/components/theme/src/utils/createTokensHash.ts b/packages/components/theme/src/utils/createTokensHash.ts
@@ -9,16 +9,24 @@ import hash from '@emotion/hash'
 
 import { themeTokenPrefix } from '../types'
 
+const unhasedHashSalt = '__unhashed__'
+
 const sequenceCache = new Map<string, string[]>()
-export function createTokensHash(key: string, tokens: Record<string, string | number>): string {
+export function createTokensHash(key: string, tokens: Record<string, string | number>, hashed = true): string {
   let sequence = sequenceCache.get(key)
 
   if (!sequence) {
     sequence = getTokenSequence(tokens)
     sequenceCache.set(key, sequence)
   }
 
-  return `${themeTokenPrefix}-${key}-${hash(flattenTokens(tokens, sequence))}`
+  let str = flattenTokens(tokens, sequence)
+
+  if (!hashed) {
+    str += unhasedHashSalt
+  }
+
+  return `${themeTokenPrefix}-${key}-${hash(str)}`
 }
 
 function flattenTokens(tokens: Record<string, string | number>, sequence: string[]): string {