react-doctor/no-global-css-variable-animation
Set the variable on the nearest element instead of a parent, or use `@property` with `inherits: false` to prevent cascade. Better yet, use targeted `element.style.transform` updates
- Category: Performance
- Severity: error
- Source:
oxlint-plugin-react-doctor - Framework: global
- Enabled when: always
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Confirm a CSS custom property (string literal starting with --) is set via .setProperty() inside a requestAnimationFrame or setInterval callback. Each write forces style recalculation on every descendant that inherits the variable, every frame. False positive: the element has no descendants, so cascade cost is bounded.
Fix prompt
Use this once validation confirms the diagnostic is real.
Set the variable on the nearest element instead of an ancestor, declare it with @property { inherits: false } to halt the cascade, or skip CSS variables entirely and write element.style.transform = ... directly each frame for compositor-only updates. See https://developer.mozilla.org/en-US/docs/Web/CSS/@property