menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Help
view-forward
# jest
view-forward
# Off Topic
view-forward
# Website
view-forward
Team

I keep getting an "keyframe" error in Jest tests

June 3, 2019 at 3:22pm

I keep getting an "keyframe" error in Jest tests

June 3, 2019 at 3:22pm
I have a strange bug, that I have had problems reproducing outside of our environment and as such have a hard time filing as an actual bug, but it is linked to my update of styled-components from version 4.1.2 to 4.2.1. I hope any of you have any ideas.
Our setup We have two repos:
  • "styleguide" with all our ui components
  • "main repo" with all the logic
"styleguide" is being included into the main repo via a direct git reference (git+ssh://...).
The error I can only reproduce this in tests on the main repo, the styleguide test all pass and neither the main repo nor the styleguide have any problems when loading in the browser.
When using [email protected] I have no errors. When upgrading to [email protected] I keep getting getting the error It seems you are interpolating a keyframe declaration (gvldLL) into an untagged string
The strange thing though is when I copy my code from the styleguide and put it directly into my code in the main repo it works fine (also if it is imported from a file placed at the same level). So it is really only because it comes from this other repo. Which also makes it a bit hard to actually reproduce and file as a bug.
The Code styleguide/ui/atoms/animations/fade-and-move/fadeAndMove
import { keyframes, css } from 'styled-components';
export const fadeAndMoveKeyframes = (from, to) => keyframes`
0% {
opacity: 0;
transform: translate(${from.join(',')});
}
100% {
opacity: 1;
transform: translate(${to.join(',')});
}
`;
const fadeAndMove = (from, to) => css`
animation: ${fadeAndMoveKeyframes(from, to)} 0.5s ease;
animation-fill-mode: forwards;
`;
/** @component */
export default fadeAndMove;
In my file on the main repo
import fadeAndMove from 'ui/atoms/animations/fade-and-move/fadeAndMove';
...
const modalAnim = fadeAndMove(modalFrom, modalTo);
const Modal = styled(Window)`
...
&.exit {
${modalAnim}
...
}
&.enter-active {
${modalAnim}
...
}
...
`;
System:
  • OS: Windows 10
  • CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  • Memory: 5.11 GB / 15.86 GB
Binaries:
  • Node: 11.13.0 - C:\Program Files\nodejs\node.EXE
  • npm: 6.9.0 - ~\AppData\Roaming\npm\npm.CMD
Modules

June 3, 2019 at 3:53pm
Ok Nevermind... In the end was resolved by making sure to install a styleguide branch that had the exact same version of styled-components. Go figure
Edited
  • reply
  • like

June 4, 2019 at 2:24pm
The site I work on has a similar component architecture. I ran into the same issue yesterday (upgrading from 4.2.0 to 4.2.1) and tried everything I could think of to "fix" the issue. One component in our "main repo" had the animation that was the source of the bug. It was completely baffling, since the keyframes function was being passed into the css function. I read your comment this morning, I updated the "styledguide" repo and now everything works.
So for everyone who is updating to SC 4.2.1 (especially those of you who already have migrated to v4), do take note that if you have any dependencies that also use SC, this keyframe error likely has nothing to do with your actual keyframe.
Edited
like-fill
1
  • reply
  • like