feat: cssVar support preserve token (#161)

* feat: cssVar support preserve token

* feat: use computed tokenKey for hash

* test: add test case

Author: MadCcc

src/hooks/useCSSVarRegister.ts

@@ -14,8 +14,8 @@ import { uniqueHash } from './useStyleRegister';
 
 export const CSS_VAR_PREFIX = 'cssVar';
 
-type CSSVarCacheValue<T> = [
-  cssVarToken: TokenWithCSSVar<T>,
+type CSSVarCacheValue<V, T extends Record<string, V> = Record<string, V>> = [
+  cssVarToken: TokenWithCSSVar<V, T>,
   cssVarStr: string,
   styleId: string,
   cssVarKey: string,
@@ -42,12 +42,12 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
 
   const stylePath = [...config.path, key, scope, tokenKey];
 
-  const cache = useGlobalCache<CSSVarCacheValue<T>>(
+  const cache = useGlobalCache<CSSVarCacheValue<V, T>>(
     CSS_VAR_PREFIX,
     stylePath,
     () => {
       const originToken = fn();
-      const [mergedToken, cssVarsStr] = transformToken(originToken, key, {
+      const [mergedToken, cssVarsStr] = transformToken<V, T>(originToken, key, {
         prefix,
         unitless,
         ignore,

src/hooks/useCacheToken.tsx

@@ -62,6 +62,8 @@ export interface Option<DerivativeToken, DesignToken> {
     unitless?: Record<string, boolean>;
     /** Tokens that should not be transformed to css variables */
     ignore?: Record<string, boolean>;
+    /** Tokens that preserves origin value */
+    preserve?: Record<string, boolean>;
     /** Key for current theme. Useful for customizing and should be unique */
     key?: string;
   };
@@ -195,6 +197,7 @@ export default function useCacheToken<
             prefix: cssVar.prefix,
             ignore: cssVar.ignore,
             unitless: cssVar.unitless,
+            preserve: cssVar.preserve,
           },
         );
       }
@@ -208,9 +211,7 @@ export default function useCacheToken<
       mergedDerivativeToken._themeKey = themeKey;
       recordCleanToken(themeKey);
 
-      const hashId = cssVar
-        ? `${hashPrefix}-${hash(`${salt}${cssVar.prefix ?? ''}`)}`
-        : `${hashPrefix}-${hash(tokenKey)}`;
+      const hashId = `${hashPrefix}-${hash(tokenKey)}`;
       mergedDerivativeToken._hashId = hashId; // Not used
 
       return [

src/util/css-variables.ts

@@ -23,8 +23,11 @@ export const serializeCSSVar = <T extends Record<string, any>>(
     .join('')}}`;
 };
 
-export type TokenWithCSSVar<T> = {
-  [key in keyof T]?: string;
+export type TokenWithCSSVar<
+  V,
+  T extends Record<string, V> = Record<string, V>,
+> = {
+  [key in keyof T]?: string | V;
 };
 
 export const transformToken = <
@@ -41,13 +44,18 @@ export const transformToken = <
     unitless?: {
       [key in keyof T]?: boolean;
     };
+    preserve?: {
+      [key in keyof T]?: boolean;
+    };
     scope?: string;
   },
-): [TokenWithCSSVar<T>, string] => {
+): [TokenWithCSSVar<V, T>, string] => {
   const cssVars: Record<string, string> = {};
-  const result: TokenWithCSSVar<T> = {};
+  const result: TokenWithCSSVar<V, T> = {};
   Object.entries(token).forEach(([key, value]) => {
-    if (
+    if (config?.preserve?.[key]) {
+      result[key as keyof T] = value;
+    } else if (
       (typeof value === 'string' || typeof value === 'number') &&
       !config?.ignore?.[key]
     ) {

tests/__snapshots__/css-variables.spec.tsx.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CSS Variables > support ssr 1`] = `"<style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"8y225z\\">.apple{--rc-primary-color:#1890ff;--rc-text-color:#333333;--rc-border-radius:2px;--rc-border-color:black;--rc-border-width:1px;--rc-line-height:1.5;--rc-primary-color-disabled:rgba(24, 144, 255, 0.5);}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"j9jql8\\">.apple.box{--rc-box-box-color:#5c21ff;}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"0\\" data-token-hash=\\"302na3\\" data-css-hash=\\"nq18cu\\">:where(.css-dev-only-do-not-override-xcmczj).box{line-height:var(--rc-line-height);border:var(--rc-border-width) solid var(--rc-border-color);color:var(--rc-box-box-color);background-color:var(--rc-primary-color);}</style><style data-ant-cssinjs-cache-path=\\"data-ant-cssinjs-cache-path\\">.data-ant-cssinjs-cache-path{content:\\"302na3|Box:nq18cu\\";}</style>"`;
+exports[`CSS Variables > support ssr 1`] = `"<style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"1iuujbx\\">.apple{--rc-primary-color:#1890ff;--rc-text-color:#333333;--rc-border-radius:2px;--rc-border-color:black;--rc-border-width:1px;--rc-line-height:1.5;--rc-primary-color-disabled:rgba(24, 144, 255, 0.5);}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"fjuhit\\">.apple.box{--rc-box-box-color:#5c21ff;}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"0\\" data-token-hash=\\"lt4t7l\\" data-css-hash=\\"1pik734\\">:where(.css-dev-only-do-not-override-tkc50g).box{line-height:var(--rc-line-height);border:var(--rc-border-width) solid var(--rc-border-color);color:var(--rc-box-box-color);background-color:var(--rc-primary-color);content:\\"800\\";}</style><style data-ant-cssinjs-cache-path=\\"data-ant-cssinjs-cache-path\\">.data-ant-cssinjs-cache-path{content:\\"lt4t7l|Box:1pik734\\";}</style>"`;

tests/css-variables.spec.tsx

@@ -25,6 +25,8 @@ export interface DesignToken {
 
   lineHeight: number;
   lineHeightBase: number;
+
+  smallScreen: number;
 }
 
 export interface DerivativeToken extends DesignToken {
@@ -41,6 +43,8 @@ const defaultDesignToken: DesignToken = {
 
   lineHeight: 1.5,
   lineHeightBase: 1.5,
+
+  smallScreen: 800,
 };
 
 // 模拟推导过程
@@ -119,6 +123,9 @@ function useToken(): [DerivativeToken, string, string, DerivativeToken] {
       ignore: {
         lineHeightBase: true,
       },
+      preserve: {
+        smallScreen: true,
+      },
     },
   });
   return [token, hashed ? hashId : '', cssVar?.key || '', realToken];
@@ -168,6 +175,7 @@ const useStyle = () => {
           }`,
           color: mergedToken.boxColor,
           backgroundColor: mergedToken.primaryColor,
+          content: `"${mergedToken.smallScreen}"`,
         },
       };
     },
@@ -210,11 +218,13 @@ describe('CSS Variables', () => {
     expect(styles[0].textContent).toContain('.apple{');
     expect(styles[0].textContent).toContain('--rc-line-height:1.5;');
     expect(styles[0].textContent).not.toContain('--rc-line-height-base:1.5;');
+    expect(styles[0].textContent).not.toContain('--rc-small-screen:800;');
     expect(styles[1].textContent).toContain('--rc-box-box-color:#5c21ff');
     expect(styles[1].textContent).toContain('.apple.box{');
     expect(styles[2].textContent).toContain(
       'line-height:var(--rc-line-height);',
     );
+    expect(styles[2].textContent).toContain('content:"800"');
     expect(box).toHaveClass('apple');
     expect(box).toHaveStyle({
       '--rc-line-height': '1.5',