feat(theme): add zeroRuntime support#1737
feat(theme): add zeroRuntime support#1737seanparmelee wants to merge 3 commits intoant-design:mainfrom
Conversation
|
|
Summary of ChangesHello @seanparmelee, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request integrates Ant Design's Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
📝 WalkthroughWalkthrough向设计令牌系统添加并传递可选布尔属性 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 分钟 Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds support for the zeroRuntime theme option, which allows disabling runtime CSS injection. The changes correctly propagate the zeroRuntime flag from Ant Design's theme context down to cssinjs-utils. The implementation is straightforward and accompanied by a comprehensive set of tests that verify the new functionality, including default behavior, behavior with zeroRuntime: true, and edge cases. The code quality is good. I have one minor suggestion regarding type consistency to improve future maintainability.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/x/components/theme/context.ts (1)
22-38:⚠️ Potential issue | 🟡 Minor
@default true与实际默认行为不一致JSDoc 中标注
@default true，但该属性为可选类型 (zeroRuntime?: boolean)，未设置时为undefined。在useToken.ts中通过!!zeroRuntime转换后，实际默认值为false（即默认会注入运行时样式）。这会误导使用者认为默认就是零运行时模式。此外，第 29 行的
todo: 导出 antd 样式文件应被跟踪或移除。建议修复
* `@descEN` Enable zero-runtime mode, which will not generate style at runtime, need to import additional CSS file. - * `@default` true + * `@default` false * `@since` 2.0.0 * `@example` * ```tsx * import { XProvider } from '@ant-design/x'; - * todo: 导出 antd 样式文件 + * // TODO: import antd CSS file,
需要我创建一个 issue 来跟踪 TODO 中提到的 CSS 文件导出工作吗？
🤖 Fix all issues with AI agents
In `@packages/x/components/theme/genStyleUtils.ts`:
- Around line 19-22: The returned tuple from useInternalToken does not match its
TypeScript signature; update the signature to reflect the actual return order
(theme, realToken, hashId, token, cssVar?, zeroRuntime?) or change the actual
return array to match the declared signature ([theme, token, hashId, realToken,
cssVar?, zeroRuntime?]); specifically fix the type declaration for
useInternalToken (and any exported types) so it matches the runtime order used
by genStyleUtils.ts's useToken destructuring, and ensure zeroRuntime is typed as
optional boolean to match the boolean coercion (!!zeroRuntime) used in the
implementation.
In `@packages/x/components/theme/useToken.ts`:
- Around line 109-116: You're using the private API antdTheme._internalContext
to read zeroRuntime in useToken; make this resilient by feature-detecting the
context shape (check antdTheme._internalContext exists and has
token/zeroRuntime) and provide a safe fallback (e.g., default zeroRuntime value)
so upgrades won't break; update useToken to guard reads of
token/hashed/theme/override/cssVar/zeroRuntime, keep the existing
zeroRuntime.test.tsx and JSDoc (`@since` 2.0.0, `@default` true) to document
stability, and add a short comment noting to verify _internalContext structure
when bumping antd major.
🧹 Nitpick comments (2)
packages/x/components/x-provider/__tests__/zeroRuntime.test.tsx (1)
14-24:findComponentStyles的正则表达式存在边界情况第 22 行的正则
/[\w-]+:/在去除 CSS 变量声明后，可能匹配到非属性内容（如伪选择器::before中的冒号、URL 中的冒号等），导致误判。不过在当前测试场景下影响有限。如果未来需要更精确的判断，可以考虑排除常见的非属性模式：
可选的更精确匹配
- return /[\w-]+:/.test(withoutVars); + // Match property declarations but exclude selectors (e.g., ::before, :hover) + return /(?<!:)[\w-]+\s*:/.test(withoutVars);packages/x/components/theme/useToken.ts (1)
101-107: 返回类型声明与实际返回值不一致第 107 行将
zeroRuntime声明为zeroRuntime?: boolean（可选，即可能为undefined），但第 145 行始终返回!!zeroRuntime，这是一个确定的boolean值，永远不会是undefined。建议将类型从可选改为必需，以准确反映运行时行为，避免调用方进行不必要的空值检查。
建议修复
export function useInternalToken(): [ theme: Theme<SeedToken, AliasToken>, token: GlobalToken, hashId: string, realToken: GlobalToken, cssVar?: DesignTokenProviderProps['cssVar'], - zeroRuntime?: boolean, + zeroRuntime: boolean, ] {
| const { | ||
| token: rootDesignToken, | ||
| hashed, | ||
| theme, | ||
| override, | ||
| cssVar: ctxCssVar, | ||
| zeroRuntime, | ||
| } = React.useContext(antdTheme._internalContext); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, check for zeroRuntime references in the codebase
echo "=== Searching for zeroRuntime ==="
rg "zeroRuntime" --type=ts --type=tsx -n
echo -e "\n=== Checking antd version in dependencies ==="
cat package.json | grep -A 5 -B 5 "antd" | head -20
echo -e "\n=== Searching for _internalContext ==="
rg "_internalContext" --type=ts --type=tsx -n | head -30
echo -e "\n=== Looking for DesignTokenContext or similar type defs ==="
fd -e "d.ts" -o -e "tsx" -o -e "ts" | xargs grep -l "_internalContext\|DesignTokenContext" 2>/dev/null | head -10Repository: ant-design/x
Length of output: 978
🏁 Script executed:
#!/bin/bash
# Find and read the actual file mentioned
echo "=== Reading the target file ==="
if [ -f "packages/x/components/theme/useToken.ts" ]; then
echo "File found. Reading lines 100-120:"
sed -n '100,120p' "packages/x/components/theme/useToken.ts" | cat -n
else
echo "File not found at expected path"
# Try to find it
find . -name "useToken.ts" -type f 2>/dev/null
fi
echo -e "\n=== Searching for zeroRuntime in all file types ==="
rg "zeroRuntime" -n 2>/dev/null | head -20
echo -e "\n=== Searching for _internalContext in all file types ==="
rg "_internalContext" -n 2>/dev/null | head -20
echo -e "\n=== Checking node_modules antd types ==="
if [ -d "node_modules/antd" ]; then
find node_modules/antd -name "*.d.ts" -type f 2>/dev/null | xargs grep -l "_internalContext" 2>/dev/null | head -5
fiRepository: ant-design/x
Length of output: 2457
🏁 Script executed:
#!/bin/bash
echo "=== Searching for _internalContext definition in antd types ==="
find node_modules/antd -type f \( -name "*.d.ts" -o -name "*.ts" \) 2>/dev/null | \
xargs grep -l "_internalContext" 2>/dev/null
echo -e "\n=== Looking for DesignTokenContext or ThemeContextType definition ==="
find node_modules/antd -type f -name "*.d.ts" 2>/dev/null | \
xargs grep -B 5 -A 15 "internalContext\|DesignTokenContext" 2>/dev/null | head -100
echo -e "\n=== Checking antd version and theme exports ==="
cat node_modules/antd/package.json | grep '"version"'
echo -e "\n=== Searching context.ts in antd to see context definition ==="
find node_modules/antd -name "context.ts" -o -name "context.tsx" 2>/dev/null | \
xargs cat 2>/dev/null | head -150Repository: ant-design/x
Length of output: 383
🏁 Script executed:
#!/bin/bash
echo "=== Finding where antdTheme is imported ==="
rg "import.*antd" packages/x/components/theme/useToken.ts -A 5 -B 5
echo -e "\n=== Checking imports at top of useToken.ts ==="
head -30 packages/x/components/theme/useToken.ts
echo -e "\n=== Looking for type definitions of _internalContext in packages/x ==="
find packages/x -name "*.d.ts" -o -name "*.ts" | xargs grep -l "_internalContext\|DesignTokenContext" 2>/dev/null
echo -e "\n=== Searching for antd import statement and usage ==="
rg "from 'antd'" packages/x -n | head -20
echo -e "\n=== Checking context.ts for context type definition ==="
cat -n packages/x/components/theme/context.ts
echo -e "\n=== Looking for any documentation or comments about zeroRuntime ==="
rg "zeroRuntime" -B 3 -A 3 packages/x/components/theme/ --type=tsRepository: ant-design/x
Length of output: 7689
_internalContext 是 antd 的私有 API，但该属性在 v6.1.1 中已被使用并正式文档化
虽然 _internalContext 确实是 antd 的内部 API，但 zeroRuntime 属性已在 antd v6.1.1 中被定义且可访问。本项目中该功能经过充分测试（见 zeroRuntime.test.tsx）且在 JSDoc 中有文档记录（@since 2.0.0，@default true），表明这是一个相对稳定的内部接口。
不过，由于依赖于私有 API，建议在升级 antd 主版本时重点检查 _internalContext 的结构变更。
🤖 Prompt for AI Agents
In `@packages/x/components/theme/useToken.ts` around lines 109 - 116, You're using
the private API antdTheme._internalContext to read zeroRuntime in useToken; make
this resilient by feature-detecting the context shape (check
antdTheme._internalContext exists and has token/zeroRuntime) and provide a safe
fallback (e.g., default zeroRuntime value) so upgrades won't break; update
useToken to guard reads of token/hashed/theme/override/cssVar/zeroRuntime, keep
the existing zeroRuntime.test.tsx and JSDoc (`@since` 2.0.0, `@default` true) to
document stability, and add a short comment noting to verify _internalContext
structure when bumping antd major.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1737 +/- ##
=======================================
Coverage 97.34% 97.34%
=======================================
Files 144 144
Lines 4598 4599 +1
Branches 1303 1288 -15
=======================================
+ Hits 4476 4477 +1
Misses 120 120
Partials 2 2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportChanges will increase total bundle size by 23.69kB (0.72%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antdx-array-pushAssets Changed:
view changes for bundle: x-markdown-array-pushAssets Changed:
|
1 participant
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
I'm using the new zero runtime mode in Ant Design v6 and I noticed
@ant-design/xinjects its CSS even though I'm settingzeroRuntime: true.This PR forwards the
zeroRuntimeflag from antd'sDesignTokenContextthroughuseInternalTokenandgenStyleUtils, so that@ant-design/cssinjs-utilscan skip runtime style injection whentheme={{ zeroRuntime: true }}is set onXProviderorConfigProvider.📝 Change Log
zeroRuntimesupportzeroRuntime的支持。Summary by CodeRabbit
发布说明
新功能
修复 / 改进
测试