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

[lazerg]

getComponentToken drops a component token whose value is identical to the global token of the same name, so its CSS variable is never declared. The style layer still points at var(--ant-<component>-<key>), which then resolves to nothing.

It shows up in antd as ant-design/ant-design#59241: with borderRadius set to 4, borderRadiusLG derives to 4 as well, Alert's borderRadius component token gets dropped, and --ant-alert-border-radius is missing, so the Alert loses its radius. The two are only equal by coincidence here, Alert really wants borderRadiusLG, so they can't be conflated.

Those keys now get declared as an alias of the global variable. Doing it on the declaration side keeps the style rules themselves free of any token value, which matters because useStyleRegister caches them per prefix rather than per theme.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 563a3c93-56e1-414f-bd25-853aecbe1dd2

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[MadCcc]

The root issue is that Alert defines a Component Token named borderRadius, which conflicts with the existing Global Token. Component configuration already supports overriding Global Tokens locally, so introducing a Component Token with the same name makes the meaning ambiguous. This patch fixes the missing CSS variable, but we should fix the conflicting token definition in Alert first.

[lazerg]

Agreed on Alert. The docs already describe components.Alert.borderRadius as a way to override the global token for one component. A component token with the same name gives that key two meanings.

The missing declaration is still a separate problem in this repo. Both paths start from the same getDefaultComponentToken keys, then treat them differently. useStyleRegister rewrites every key to var(--ant-<component>-<key>). genCSSVarRegister drops the keys that getComponentToken removed. The rule then points at a variable that nothing declares.

This is current master, with a plain test component and no Alert involved:

:where(.hash).test-prefix{border-radius:var(--ant-test-component-border-radius);font-size:var(--ant-test-component-font-size);}
.test-key.test-prefix{--ant-test-component-font-size:16px;}

fontSize differs from the global token, so it gets declared. borderRadius matches it, so it only gets referenced.

Alert and Notification are the only components that name tokens this way today, so fixing Alert does clear the visible bug. The failure is still silent. It only shows when the two values match, and nothing catches that at review time.

The patch only covers keys that getComponentToken deleted for being equal. Notification sets its color*Bg tokens to undefined on purpose, and that path stays as it is.

Happy to fix Alert too. Tell me if you would rather this repo warn about the collision instead of aliasing the variable.