ant-design / ant-design/cssinjs

Missing effect style while mount/unmount due to globalEffectStyleKeys

Open
#60 0 comments 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.