feat: Add formatToken support

src/useCacheToken.tsx

@@ -7,13 +7,24 @@ import { flattenToken, token2key } from './util';
 
 const EMPTY_OVERRIDE = {};
 
-export interface Option {
+export interface Option<DerivativeToken> {
   /**
    * Generate token with salt.
    * This is used to generate different hashId even same derivative token for different version.
    */
   salt?: string;
   override?: object;
+  /**
+   * Format token as you need. Such as:
+   *
+   * - rename token
+   * - merge token
+   * - delete token
+   *
+   * This should always be the same since it's one time process.
+   * It's ok to useMemo outside but this has better cache strategy.
+   */
+  formatToken?: (mergedToken: any) => DerivativeToken;
 }
 
 const tokenKeys = new Map<string, number>();
@@ -63,9 +74,9 @@ export default function useCacheToken<
 >(
   theme: Theme<any, any>,
   tokens: Partial<DesignToken>[],
-  option: Option = {},
+  option: Option<DerivativeToken> = {},
 ): [DerivativeToken & { _tokenKey: string }, string] {
-  const { salt = '', override = EMPTY_OVERRIDE } = option;
+  const { salt = '', override = EMPTY_OVERRIDE, formatToken } = option;
 
   // Basic - We do basic cache here
   const mergedToken = React.useMemo(
@@ -90,11 +101,16 @@ export default function useCacheToken<
       const derivativeToken = theme.getDerivativeToken(mergedToken);
 
       // Merge with override
-      const mergedDerivativeToken = {
+      let mergedDerivativeToken = {
         ...derivativeToken,
         ...override,
       };
 
+      // Format if needed
+      if (formatToken) {
+        mergedDerivativeToken = formatToken(mergedDerivativeToken);
+      }
+
       // Optimize for `useStyleRegister` performance
       const tokenKey = token2key(mergedDerivativeToken, salt);
       mergedDerivativeToken._tokenKey = tokenKey;

tests/index.spec.tsx

@@ -212,11 +212,16 @@ describe('csssinjs', () => {
   });
 
   describe('override', () => {
-    const genStyle = (token: DerivativeToken): CSSInterpolation => ({
+    interface MyDerivativeToken extends DerivativeToken {
+      color: string;
+    }
+
+    const genStyle = (token: MyDerivativeToken): CSSInterpolation => ({
       '.box': {
         width: 93,
         lineHeight: 1,
         backgroundColor: token.primaryColor,
+        color: token.color,
       },
     });
 
@@ -226,8 +231,12 @@ describe('csssinjs', () => {
       propToken?: DesignToken;
       override: object;
     }) => {
-      const [token] = useCacheToken<DerivativeToken>(theme, [baseToken], {
+      const [token] = useCacheToken<MyDerivativeToken>(theme, [baseToken], {
         override,
+        formatToken: (origin: DerivativeToken) => ({
+          ...origin,
+          color: origin.primaryColor,
+        }),
       });
 
       useStyleRegister({ theme, token, path: ['.box'] }, () => [
@@ -255,6 +264,7 @@ describe('csssinjs', () => {
 
       const style = styles[0];
       expect(style.innerHTML).toContain('background-color:#010203;');
+      expect(style.innerHTML).toContain('color:#010203;');
 
       wrapper.unmount();
     });