-
Notifications
You must be signed in to change notification settings - Fork 65
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: update stylis to avoid leading '&' generate invalid css #201
Conversation
📝 WalkthroughWalkthrough本次更改主要涉及 Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
tests/util.spec.tsx (1)
149-168
: 测试用例完整验证了样式规范化功能测试用例很好地覆盖了以下关键点:
- 验证了
parseStyle
保留前导&
的行为- 验证了
normalizeStyle
正确移除前导&
的功能- 使用了实际场景中的选择器模式进行测试
建议添加以下测试场景以提高覆盖率:
- 嵌套选择器中的前导
&
处理- 多层嵌套中的
&
处理- 伪类选择器中的
&
处理示例补充测试用例:
it('should handle nested selectors with leading &', () => { const [str] = parseStyle({ '.parent': { '&.child': { '&:hover': { color: 'red' } } } }, { hashId: 'hashed' }); const normalized = normalizeStyle(str); expect(normalized).toContain('.hashed.parent.child:hover'); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- package.json (1 hunks)
- tests/util.spec.tsx (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- package.json
🔇 Additional comments (2)
tests/util.spec.tsx (2)
151-158
: 测试数据结构清晰且符合实际场景测试用例中使用的选择器模式
&.btn-variant-outline,&.btn-variant-dashed
与 PR 中描述的实际问题相符,这有助于确保修复的有效性。
161-166
: 断言验证了完整的转换流程测试用例通过两个断言完整验证了样式处理流程:
- 首先验证
parseStyle
的输出包含前导&
- 然后验证
normalizeStyle
正确移除了前导&
这种分步验证的方式有助于快速定位潜在问题。
same as #200 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #201 +/- ##
=======================================
Coverage 95.07% 95.07%
=======================================
Files 33 33
Lines 2883 2883
Branches 456 456
=======================================
Hits 2741 2741
Misses 142 142 ☔ View full report in Codecov by Sentry. |
升级 stylis 修复 bad css 如
stylis@v4.3.4 normalize 可以去除
:where(.css-ni1kz0)&.ant-btn-variant-outlined
中的&
demo
https://codesandbox.io/p/sandbox/8vn48p?file=%2Fmain.js%3A11%2C2
在 external
react
/react-dom
/dayjs
/@ant-design/cssinjs
/antd
后,<antd.Button></antd.Button>
没有边框, 是因为border-color
css 不生效, 可以看动图@ant-design/cssinjs/1.21.1/files/dist/umd/cssinjs.min.js 刚好是 stylis 4.3.3 打包的
https://unpkg.com/browse/@ant-design/cssinjs@1.21.1/package.json
Summary by CodeRabbit
新功能
stylis
依赖的版本,提升了样式处理的稳定性和性能。测试
normalizeStyle
函数的测试套件,确保样式处理的准确性。