ant-design / ant-design/cssinjs
Missing effect style while mount/unmount due to globalEffectStyleKeys
- Dominant language
- TypeScript
- Stars
- 287
- Forks
- 80
- PR merge metrics
- No merged PRs in 30d
Description
related: https://github.com/ant-design/ant-design/issues/38911
A web component could be mount/unmount for multiple times. During when the actual dom could be created/recreated many times.
In such case, due to the [cache mechanism: useStyleRegister.tsx#L386](https://github.com/ant-design/cssinjs/blob/master/src/hooks/useStyleRegister.tsx#L386), some styles(particularly keyframes) are not able to be injected into the newly created dom element.
One way to solve this, is to use [`_cf`](https://github.com/ant-design/cssinjs/blob/master/src/hooks/useStyleRegister.tsx#L135), but obviously its not for `production`
---
Purpposal:
1. expose `_cf` in some way
2. execute some tear down actions during `unmount` phase
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in src/hooks/useStyleRegister.tsx, especially the _cf handling around line 135 and the globalEffectStyleKeys cache around line 386. Reproduce repeated mount and unmount of a web component, then trace how styles—particularly keyframes—are handled when a new DOM element is created. Done means the required effect styles are available after remounting without relying on the development-only _cf mechanism.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100