cssinjs/jss
View on GitHubjss-vendor-prefixer replaces animation: ['$spinner rotation'] on server but not client (has repro repository)
Open
#1,337 opened on Apr 22, 2020
bughelp wanted
Repository metrics
- Stars
- (7,000 stars)
- PR merge metrics
- (No merged PRs in 30d)
Description
As mentioned in #1334
Expected behavior: I have these styles. I don't know if arrays in animation are supported, but I expect it to either work on both the client and server, or fail on both the client server.
const styles = {
'@keyframes spinner-rotation': {
from: {transform: 'rotate(0deg)'},
to: {transform: 'rotate(360deg)'},
},
spinner: {
animation: [
'$spinner-rotation linear infinite 1s',
],
},
}
Describe the bug: On the server it converts the animation name:
animation: keyframes-spinner-rotation-0-2-1 linear infinite 1s;
On the client it doesn't:
animation: $spinner-rotation linear infinite 1s;
Codesandbox link: Can't use code sandbox because I have to demonstrate output on the server side. I made a repo to demonstrate: https://github.com/jedwards1211/jss-plugin-vendor-prefixer-issue Just run
git clone https://github.com/jedwards1211/jss-plugin-vendor-prefixer-issue
cd jss-plugin-vendor-prefixer-issue
npm i
npm start
Versions (please complete the following information):
- jss: 10.1.1
- Browser [e.g. chrome, safari]: Chrome 80.0.3987.163
- OS [e.g. Windows, macOS]: macOS 10.15.3