Setting the animation duration from a variable in the `animation` shorthand transpiles incorrectly

[tomadimitrie]

Do you want to request a feature or report a bug?

Bug report

What is the current behavior?

const kAnimationDuration = 500;

.letter.bounce {
    animation: bounce ${kAnimationDuration}ms cubic-bezier(0.16, 1, 0.3, 1);
}

This transpiles as:

animation: bounce-jsx-1052199699 ms-jsx-1052199699 cubic-bezier(0.16,1,0.3,1)

What is the expected behavior?

To transpile as

animation: bounce-jsx-1052199699 500ms cubic-bezier(0.16,1,0.3,1)

Workaround

Setting properties separately.

 .letter.bounce {
    animation-name: bounce;
    animation-duration: ${kAnimationDuration}ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

Environment (include versions)

• OS: macOS 10.15.3
• Browser: Safari
• styled-jsx (version): 3.2.4

Did this work in previous versions?

No