feat: add CSS compatibility processing with vendor prefixing support #229
Conversation
📝 WalkthroughWalkthrough本次更新为样式注册和上下文系统引入了自动 CSS 前缀功能。主要内容包括增加自动前缀转换器、支持通过上下文和 hooks 控制是否添加供应商前缀，并补充了相关测试与文档示例。类型声明和导出也相应调整。 Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant StyleProvider
participant useStyleRegister
participant stylis
App->>StyleProvider: 传入 transformers（含 autoPrefixTransformer）
StyleProvider->>StyleProvider: 检查 transformers 是否包含 AUTO_PREFIX
StyleProvider->>useStyleRegister: 提供 compatibility.prefixer 标志
useStyleRegister->>stylis: 调用 normalizeStyle(styleStr, { prefixer })
stylis-->>useStyleRegister: 返回带前缀的 CSS 字符串
useStyleRegister-->>App: 渲染带前缀的样式
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/index.tsOops! Something went wrong! :( ESLint: 7.32.0 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #229 +/- ##
==========================================
+ Coverage 94.89% 94.92% +0.02%
==========================================
Files 33 34 +1
Lines 2899 2953 +54
Branches 459 463 +4
==========================================
+ Hits 2751 2803 +52
- Misses 148 150 +2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
src/StyleContext.tsx
Outdated
| @@ -79,6 +79,11 @@ export interface StyleContextProps { | |||
| linters?: Linter[]; | |||
| /** Wrap css in a layer to avoid global style conflict */ | |||
| layer?: boolean; | |||
| /** Enable CSS compatibility processing (e.g. autoprefixer) */ | |||
| compatibility?: { | |||
Co-authored-by: zombieJ <[email protected]>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
tests/transform.spec.tsx (1)
397-443: 自动前缀测试覆盖全面且实现正确新增的
autoPrefix测试块很好地验证了供应商前缀功能：
- 正确使用
StyleProvider包装组件并传入autoPrefixTransformer- 测试了常见的需要前缀的 CSS 属性（transform、userSelect、display）
- 验证了生成的 CSS 中包含预期的
-webkit-前缀- 使用快照测试确保回归保护
测试实现遵循了文件中已有的模式，逻辑清晰完整。
建议考虑增加更多边界情况的测试，比如不需要前缀的属性是否保持不变。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/transform.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (8)
docs/demo/transformer.md(1 hunks)docs/examples/autoPrefix.tsx(1 hunks)src/StyleContext.tsx(4 hunks)src/hooks/useGlobalCache.tsx(1 hunks)src/hooks/useStyleRegister.tsx(8 hunks)src/index.ts(2 hunks)src/transformers/autoPrefix.ts(1 hunks)tests/transform.spec.tsx(4 hunks)
✅ Files skipped from review due to trivial changes (4)
- docs/demo/transformer.md
- src/index.ts
- src/transformers/autoPrefix.ts
- docs/examples/autoPrefix.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- src/StyleContext.tsx
- src/hooks/useStyleRegister.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
tests/transform.spec.tsx (3)
src/index.ts (5)
CSSInterpolation(58-58)useStyleRegister(29-29)StyleProvider(33-33)createCache(32-32)autoPrefixTransformer(42-42)src/hooks/useStyleRegister.tsx (2)
CSSInterpolation(69-72)useStyleRegister(389-572)src/StyleContext.tsx (2)
StyleProvider(106-154)createCache(16-52)
⏰ 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 (4)
src/hooks/useGlobalCache.tsx (1)
13-13: 类型扩展正确，支持新的供应商前缀功能新增的
vendorPrefix?: boolean选项完善了ExtractStyle类型定义，为样式提取时提供了可选的供应商前缀控制。这个改动与整体的自动前缀功能实现保持一致，且作为可选属性不会造成破坏性变更。tests/transform.spec.tsx (3)
5-5: 正确导入新的自动前缀转换器导入
autoPrefixTransformer是新增测试功能所必需的，符合预期。
163-169: 格式化改进提升代码可读性将单行断言拆分为多行形式，提高了代码的可读性和维护性。
189-189: 格式化改进添加尾随逗号符合现代 JavaScript/TypeScript 最佳实践。
background: ant-design/ant-design#54410
Summary by CodeRabbit
新功能
修复
测试