cssinjs/jss

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

Open

#1.337 geöffnet am 22. Apr. 2020

Auf GitHub ansehen
 (4 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (434 Forks)batch import
bughelp wanted

Repository-Metriken

Stars
 (7.000 Stars)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

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

Contributor Guide