fix: should skip appendStyle when value is null or undefined #242
Conversation
📝 WalkthroughWalkthrough导出并使用新工具函数 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes 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 |
|
🎊 PR Preview e9b67dd has been successfully built and deployed to https://ant-design-cssinjs-preview-pr-242.surge.sh 🕐 Build time: 102.432s
🤖 By surge-preview |
Summary of ChangesHello @li-jia-nan, 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 addresses an issue where 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. 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
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #242 +/- ##
==========================================
+ Coverage 94.62% 94.63% +0.01%
==========================================
Files 32 32
Lines 2810 2817 +7
Branches 443 446 +3
==========================================
+ Hits 2659 2666 +7
Misses 151 151 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Code Review
This pull request aims to fix an issue where an undefined value for a style property is not handled correctly, by converting it to 0. The implementation focuses on the padding property. My review points out that the current fix is too specific and will not work for related properties like paddingTop. I've suggested a more robust solution to cover all padding-related properties and recommended updating the tests accordingly. Other changes include adding pnpm-lock.yaml to .gitignore and a new isNullable utility function, which look good.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
tests/index.spec.tsx (1)
952-982: 测试覆盖范围有限测试用例验证了
padding: undefined转换为padding:0的行为，但当前实现（useStyleRegister.tsx第 327 行）使用key.toLowerCase() === 'padding'进行精确匹配，这意味着paddingTop、paddingLeft、paddingRight、paddingBottom等属性的undefined值不会被转换。建议确认这是预期行为，或者考虑扩展覆盖范围。
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.gitignoresrc/hooks/useStyleRegister.tsxsrc/index.tssrc/util/index.tstests/index.spec.tsx
🧰 Additional context used
🧬 Code graph analysis (2)
tests/index.spec.tsx (2)
src/hooks/useStyleRegister.tsx (2)
CSSInterpolation(67-70)useStyleRegister(376-521)src/hooks/useCacheToken.tsx (1)
useCacheToken(152-237)
src/hooks/useStyleRegister.tsx (1)
src/util/index.ts (1)
isNullable(204-206)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Agent
- GitHub Check: preview
🔇 Additional comments (4)
.gitignore (1)
32-32: LGTM!添加
pnpm-lock.yaml到忽略列表是合理的，与现有的yarn.lock和package-lock.json保持一致。Also applies to: 47-47
src/index.ts (1)
54-64: LGTM!新增的类型导出块使库的公共 API 更加完整，所有导出的类型都已在文件顶部正确导入。
src/util/index.ts (1)
203-206: LGTM!
isNullable工具函数实现正确，类型守卫val is Extract<T, null | undefined>提供了良好的类型推断支持。src/hooks/useStyleRegister.tsx (1)
18-18: LGTM!正确导入了
isNullable工具函数。
There was a problem hiding this comment.
Pull request overview
This pull request addresses an issue where undefined CSS property values would be output as literal "undefined" strings in the generated CSS. The fix specifically converts undefined values to 0 for the padding property.
Changes:
- Added a new
isNullableutility function to check for null/undefined values - Modified style register hook to convert undefined padding values to 0
- Added a test case validating the padding undefined-to-0 conversion
- Updated .gitignore to include pnpm-lock.yaml
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/util/index.ts | Adds isNullable utility function to check for null/undefined values |
| src/hooks/useStyleRegister.tsx | Implements special handling to convert undefined padding values to 0 |
| tests/index.spec.tsx | Adds test case verifying undefined padding values are converted to 0 |
| .gitignore | Adds pnpm-lock.yaml to ignored files |
| src/index.ts | Minor formatting change (blank line) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/hooks/useStyleRegister.tsx (1)
326-331: 逻辑正确，但修复范围可能需要扩展。当前实现仅对
padding相关属性进行了undefined/null到0的转换。这个修复本身是正确的，但存在以下疑问：
一致性问题：为什么只处理
padding？margin、border-width等属性是否也存在类似问题？如果其他属性也需要类似处理，建议统一处理或至少在注释中说明只处理padding的原因。边界情况：
key.startsWith('padding')会匹配所有以padding开头的属性，包括paddingBlock、paddingInline等逻辑属性，请确认这是预期行为。如果确认只需处理
padding，建议在注释中补充说明原因：💡 建议的注释改进
- // 如果是 padding 属性，并且值为 undefined，则转换为 0 + // 如果是 padding 属性，并且值为 undefined/null，则转换为 0 + // 注意：目前只处理 padding，其他属性（如 margin）暂不需要此转换 if (key.startsWith('padding') && isNullable(actualValue)) {
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/hooks/useStyleRegister.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
src/hooks/useStyleRegister.tsx (1)
src/util/index.ts (1)
isNullable(204-206)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: preview
🔇 Additional comments (1)
src/hooks/useStyleRegister.tsx (1)
18-18: LGTM!正确引入了
isNullable工具函数。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/util/index.ts (1)
208-210: 考虑显式声明返回类型以提升类型安全性。当前返回类型由 TypeScript 推断为
0 | T，但当T包含null | undefined时，实际返回值类型应为0 | Exclude<T, null | undefined>。建议显式声明返回类型，避免下游使用时产生类型混淆。♻️ 建议的修改
-export const normalizeValue = <T>(val: T) => { - return isNullable(val) ? 0 : val; -}; +export const normalizeValue = <T>(val: T): T extends null | undefined ? 0 : T => { + return (isNullable(val) ? 0 : val) as T extends null | undefined ? 0 : T; +};或者使用更简洁的写法：
-export const normalizeValue = <T>(val: T) => { - return isNullable(val) ? 0 : val; -}; +export const normalizeValue = <T>(val: T): 0 | Exclude<T, null | undefined> => { + return isNullable(val) ? 0 : val; +};
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/hooks/useStyleRegister.tsxsrc/util/index.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/hooks/useStyleRegister.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: preview
🔇 Additional comments (1)
src/util/index.ts (1)
204-206: LGTM!
isNullable类型守卫实现正确，能够准确识别null和undefined值。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/hooks/useStyleRegister.tsx (1)
321-329: MULTI_VALUE 数组路径缺少相同的空值检查。非 MULTI_VALUE 路径（第 326-328 行）添加了
isNonNullable检查，但 MULTI_VALUE 数组路径（第 322-324 行）对数组元素没有应用相同的保护。如果数组包含null或undefined项，它们仍会被传递给appendStyle。建议在数组迭代时也添加空值检查以保持一致性。
♻️ 建议修复
if ( typeof value === 'object' && (value as any)?.[MULTI_VALUE] && Array.isArray(actualValue) ) { actualValue.forEach((item) => { - appendStyle(key, item); + if (isNonNullable(item)) { + appendStyle(key, item); + } }); } else { if (isNonNullable(actualValue)) { appendStyle(key, actualValue); } }
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/hooks/useStyleRegister.tsxsrc/util/index.tstests/index.spec.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- tests/index.spec.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
src/hooks/useStyleRegister.tsx (1)
src/util/index.ts (1)
isNonNullable(204-206)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: preview
🔇 Additional comments (2)
src/util/index.ts (1)
203-206: LGTM!类型守卫实现正确，使用 TypeScript 泛型和类型谓词进行类型收窄，是常见且标准的工具函数模式。
src/hooks/useStyleRegister.tsx (1)
18-18: LGTM!导入新增的
isNonNullable工具函数，与现有导入保持一致的风格。
Summary by CodeRabbit
发布说明
Bug Fixes
New Features
Tests
✏️ Tip: You can customize this high-level summary in your review settings.