cssinjs / cssinjs/jss

Function Values in Keyframes

Open
#1,216 3 comments 1 reaction 0 assignees View on GitHub
complexity:high feature request help wanted
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.