fix: declare component css var when it matches the global token

src/util/genStyleUtils.ts

@@ -281,7 +281,11 @@ function genStyleUtils<
           );
           if (defaultToken) {
             Object.keys(defaultToken).forEach((key) => {
-              componentToken[prefixToken(key)] = componentToken[key];
+              // Dropped by `getComponentToken` means same as global token, alias it
+              componentToken[prefixToken(key)] =
+                key in componentToken
+                  ? componentToken[key]
+                  : `var(${token2CSSVar(key, cssVar.prefix)})`;
               delete componentToken[key];
             });
           }

tests/genStyleUtils.test.tsx

@@ -9,6 +9,11 @@ interface TestCompTokenMap {
   TestComponent: object;
 }
 
+interface TestAliasToken {
+  borderRadius: number;
+  fontSize: number;
+}
+
 describe('genStyleUtils', () => {
   const mockConfig = {
     usePrefix: jest.fn().mockReturnValue({
@@ -226,4 +231,56 @@ describe('genStyleUtils', () => {
       expect(hasNonce).toBe(true);
     });
   });
+
+  describe('component token same as global token', () => {
+    it('should alias the global css var', () => {
+      const config = {
+        ...mockConfig,
+        useToken: jest.fn().mockReturnValue({
+          theme: {},
+          realToken: { borderRadius: 4, fontSize: 14 },
+          hashId: 'hash',
+          token: { borderRadius: 4, fontSize: 14 },
+          cssVar: {
+            prefix: 'ant',
+            key: 'test-key',
+          },
+        }),
+      };
+
+      const { genStyleHooks: gen } = genStyleUtils<TestCompTokenMap, TestAliasToken, object>(
+        config,
+      );
+
+      const useStyle = gen(
+        'TestComponent',
+        (token) => ({
+          [`${token.componentCls}`]: {
+            borderRadius: token.borderRadius,
+            fontSize: token.fontSize,
+          },
+        }),
+        () => ({ borderRadius: 4, fontSize: 16 }),
+      );
+
+      const TestComponent: React.FC<{ prefixCls: string }> = ({ prefixCls }) => {
+        useStyle(prefixCls);
+        return <div data-testid="test-component">Test</div>;
+      };
+
+      render(
+        <StyleProvider cache={createCache()}>
+          <TestComponent prefixCls="test-prefix" />
+        </StyleProvider>,
+      );
+
+      const totalStyle = Array.from(document.querySelectorAll('style'))
+        .map((el) => el.textContent)
+        .join('\n');
+
+      expect(totalStyle).toContain('--ant-test-component-border-radius:var(--ant-border-radius)');
+      expect(totalStyle).toContain('--ant-test-component-font-size:16px');
+      expect(totalStyle).toContain('border-radius:var(--ant-test-component-border-radius)');
+    });
+  });
 });