cssinjs / cssinjs/jss

Expanded animation does not pick up keyframes reference

Open
#1,398 1 comment 0 reactions 0 assignees View on GitHub
feature request
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

__Expected behavior:__
Using the expanded `animation` syntax would work with keyframe references.

__Describe the bug:__
Using `{ animation: { name: '$reference' } }` does not replace `$reference` with the related `@keyframes` name, whereas `{ animationName: '$reference' }` does.

__Codesandbox link:__
https://codesandbox.io/s/jss-nested-expand-keyframes-repro-tykpv

__Versions:__
- jss: 10.4.0
- Browser: Chrome 85
- OS: macOS

Contributor guide

Open the contributing guide

Research direction

Start with the CodeSandbox reproduction linked in the issue and trace how expanded animation objects are processed compared with animationName. Confirm the difference between { animation: { name: '$reference' } } and { animationName: '$reference' }. Done means the expanded syntax resolves the keyframes reference consistently with animationName, with the behavior verified against the reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.