cssinjs/jss

jss-vendor-prefixer replaces animation: ['$spinner rotation'] on server but not client (has repro repository)

Open

#1.337 aberto em 22 de abr. de 2020

Ver no GitHub
 (4 comments) (0 reactions) (0 assignees)JavaScript (434 forks)batch import
bughelp wanted

Métricas do repositório

Stars
 (7.000 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 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

Guia do colaborador