cssinjs/jss

Function Values in Keyframes

Open

#1216 opened on Oct 15, 2019

View on GitHub
 (3 comments) (1 reaction) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
complexity:highfeature requesthelp wanted

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:

"@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

Tech stack
javascriptcssreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JSS basicsReact knowledgeCSS keyframes
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate how JSS processes function values inside @keyframes rules. Check if the function value resolution is applied correctly for keyframes, possibly related to issue #471. Look at the source code for keyframe handling in src/. Consider the codesandbox example for reproduction.