Function Values in Keyframes
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
I've been stuck on this for a few days and I believe that it is a bug.
Thanks for making this awesome library!
__Expected behavior:__
Function values used in `@keyframes` do not appear to attach correctly to the style sheet.
__Describe the bug:__
The function is run, but not applied to the style sheet. Looking in chrome's inspector I can see that the keyframe is setup, but does not have properties inside of it.
__Codesandbox link:__
https://codesandbox.io/s/react-jss-playground-5w8nc?fontsize=14
Basically this:
```js
"@keyframes my-animation": {
"25%": {
backgroundColor: ({ customColor }) => customColor
}
}
```
__Versions (please complete the following information):__
10.0.0
Based on issue https://github.com/cssinjs/jss/issues/471 I thought this problem was fixed. I could be using the tool incorrectly.
Contributor guide
Research direction
Start with the linked CodeSandbox and reproduce the `@keyframes` example using the function value at `25%`. Inspect the generated stylesheet in Chrome’s inspector; done means the keyframe contains the expected `backgroundColor` property when using version 10.0.0.
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
- Mostly clear
- Newbie friendliness
- 35/100