diff --git a/src/util/genStyleUtils.ts b/src/util/genStyleUtils.ts index 26763dc..8ebbf3b 100644 --- a/src/util/genStyleUtils.ts +++ b/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]; }); } diff --git a/tests/genStyleUtils.test.tsx b/tests/genStyleUtils.test.tsx index 1c71a19..875267d 100644 --- a/tests/genStyleUtils.test.tsx +++ b/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( + 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
Test
; + }; + + render( + + + , + ); + + 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)'); + }); + }); });