add extractStyleNode function to extract style as ReactNode. - #100
add extractStyleNode function to extract style as ReactNode.#100tonny008 wants to merge 3 commits into
Conversation
This comment was marked as abuse.
This comment was marked as abuse.
|
冲突 |
📝 WalkthroughWalkthrough在 ChangesextractStyleNode 导出
Estimated code review effort: 1 (Trivial) | ~5 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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/hooks/useStyleRegister.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. src/index.tsESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/hooks/useStyleRegister.tsx`:
- Around line 578-593: extractStyleNode is destructuring StyleCacheValue
incorrectly, so it uses the wrong tuple slots for token/style metadata and skips
the clientOnly/effectStyle handling. Update extractStyleNode to follow the same
destructuring and filtering logic as extract, using the proper StyleCacheValue
order from cache.cache.get(key)![1], and ensure only non-client-only styles are
emitted with the correct ATTR_TOKEN, ATTR_MARK, key, and innerHTML values.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c6349cd0-385e-41d1-affe-2e8c357ad5fb
📒 Files selected for processing (2)
src/hooks/useStyleRegister.tsxsrc/index.ts
| export function extractStyleNode(cache: Cache) { | ||
| const styleKeys = Array.from(cache.cache.keys()).filter((key) => | ||
| key.startsWith('style%') | ||
| ); | ||
|
|
||
| return styleKeys.map((key) => { | ||
| const [styleStr, tokenKey, styleId]: [string, string, string] = | ||
| cache.cache.get(key)![1]; | ||
| const props = { | ||
| [ATTR_TOKEN]: tokenKey, | ||
| [ATTR_MARK]: styleId, | ||
| dangerouslySetInnerHTML: { __html: styleStr }, | ||
| }; | ||
| return <style key={styleId} {...props} />; | ||
| }); | ||
| } |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n -B2 -A10 'StyleCacheValue' src/hooks/useStyleRegister.tsxRepository: ant-design/cssinjs
Length of output: 1287
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '560,620p' src/hooks/useStyleRegister.tsx
printf '\n---\n'
rg -n -B3 -A8 'cache\.cache\.get\(key\)!?\[1\]|STYLE_PREFIX|useGlobalCache<StyleCacheValue>|type Cache|interface Cache' src/hooks/useStyleRegister.tsxRepository: ant-design/cssinjs
Length of output: 2078
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Show the cache type / entry shape and how extractStyleNode is used.
ast-grep outline src/hooks/useStyleRegister.tsx --view expanded
printf '\n---\n'
rg -n -A6 -B6 'extractStyleNode\(|cache\.cache\.set\(|cache\.cache\.get\(|useGlobalCache<StyleCacheValue>|type Cache|interface Cache|type CachePath|type CacheValue' src/hooks/useStyleRegister.tsxRepository: ant-design/cssinjs
Length of output: 2594
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -A4 -B4 'extractStyleNode\(|cache\.set\(|cache\.get\(|class Cache|interface Cache|type Cache' src
printf '\n---\n'
rg -n -A6 -B6 'style%|ATTR_TOKEN|ATTR_MARK|clientOnly|effectStyle' src/hooks/useStyleRegister.tsx srcRepository: ant-design/cssinjs
Length of output: 50374
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,140p' src/Cache.ts
printf '\n---\n'
sed -n '1,220p' src/hooks/useGlobalCache.tsxRepository: ant-design/cssinjs
Length of output: 4734
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n 'extractStyleNode\(' src .
printf '\n---\n'
sed -n '1,220p' src/extractStyle.tsRepository: ant-design/cssinjs
Length of output: 3313
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '536,548p' src/hooks/useStyleRegister.tsx
printf '\n---\n'
rg -n 'tokenKey' src/hooks/useStyleRegister.tsxRepository: ant-design/cssinjs
Length of output: 686
修正 extractStyleNode 的 StyleCacheValue 解构
StyleCacheValue 实际顺序是 [styleStr, styleId, effectStyle, clientOnly, order]，这里把第 2/3 项当成了 tokenKey/styleId，会把 effectStyle 误写进 data-css-hash 和 key，同时漏掉 clientOnly 过滤和 effectStyle 的输出。建议直接复用 extract 的解构与处理逻辑。
🧰 Tools
🪛 ast-grep (0.44.1)
[warning] 588-588: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation
(react-unsafe-html-injection)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/hooks/useStyleRegister.tsx` around lines 578 - 593, extractStyleNode is
destructuring StyleCacheValue incorrectly, so it uses the wrong tuple slots for
token/style metadata and skips the clientOnly/effectStyle handling. Update
extractStyleNode to follow the same destructuring and filtering logic as
extract, using the proper StyleCacheValue order from cache.cache.get(key)![1],
and ensure only non-client-only styles are emitted with the correct ATTR_TOKEN,
ATTR_MARK, key, and innerHTML values.
3 participants
这样使得 SSR 更容易在 React 中直接渲染。例如在 nextjs 中:
Summary by CodeRabbit