fix: should not clean token when token change (#217)

Author: MadCcc

docs/examples/components/Button.tsx

@@ -12,6 +12,7 @@ import { useToken } from './theme';
 
 interface ButtonToken extends DerivativeToken {
   buttonPadding: string;
+  buttonBorderBottomWidth: string;
 }
 
 // 通用框架
@@ -62,6 +63,7 @@ const genDefaultButtonStyle = (
   genSolidButtonStyle(prefixCls, token, () => ({
     backgroundColor: token.componentBackgroundColor,
     color: token.textColor,
+    borderWidth: token.buttonBorderBottomWidth,
 
     '&:hover': {
       borderColor: token.primaryColor,
@@ -137,6 +139,7 @@ const Button = ({ className, type, ...restProps }: ButtonProps) => {
     },
     () => ({
       buttonPadding: '4px 8px',
+      buttonBorderBottomWidth: `calc(${token.borderWidth} * 2)`,
     }),
   );
 

docs/examples/css-var.tsx

@@ -15,8 +15,8 @@ const Demo = () => (
 
 export default function App() {
   const [show, setShow] = React.useState(true);
-
   const [, forceUpdate] = React.useState({});
+  const [color, setColor] = React.useState('royalblue');
   React.useEffect(() => {
     forceUpdate({});
   }, []);
@@ -30,13 +30,15 @@ export default function App() {
         Show Components
       </label>
 
+      <button onClick={() => { setColor((prev) => prev === 'royalblue' ? 'mediumslateblue' : 'royalblue')}}>Change theme</button>
+
       {show && (
         <div>
           <Demo />
           <br />
           <DesignTokenProvider
             value={{
-              token: { primaryColor: 'green' },
+              token: { primaryColor: color },
             }}
           >
             <Demo />

src/hooks/useCacheToken.tsx

@@ -210,7 +210,7 @@ export default function useCacheToken<
       ) as [any, string];
       tokenWithCssVar._hashId = hashId;
 
-      recordCleanToken(hashId);
+      recordCleanToken(cssVar.key);
       return [tokenWithCssVar, hashCls, actualToken, cssVarsStr, cssVar.key];
     },
     ([, , , , themeKey]) => {