Styled-jsx: Keyframe animations

[HeyHugo]

Hi!
I was trying to do a keyframe animation with styled-jsx, but the produced css looks a bit strange and my animation doesn't work.

This is what I try to render:

<div>
  <span>test</span>
  <style jsx> {`
    span {
      animation-duration: 0.6s;
      animation-name: slidein;
      animation-iteration-count: infinite;
    }
    @keyframes slidein {
      from {
        margin-left: 100%;
        width: 300%;
      }

      to {
        margin-left: 0%;
        width: 100%;
      }
    }
  `}</style jsx>
</div>

and this is the produced css:

span[data-jsx="1065293759"] {-webkit-animation-duration:10652937590.6s;-moz-animation-duration:10652937590.6s;animation-duration:10652937590.6s;-webkit-animation-name:1065293759slidein;-moz-animation-name:1065293759slidein;animation-name:1065293759slidein;-webkit-animation-iteration-count:1065293759infinite;-moz-animation-iteration-count:1065293759infinite;animation-iteration-count:1065293759infinite;}@-webkit-keyframes 1065293759slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}}@-moz-keyframes 1065293759slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}}@keyframes 1065293759slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}}

As you can see the data-jsx number (1065293759) seem to be prefixed before all animation property values.

Am I doing this wrong or could this be a real issue?

[rauchg]

weird :D

[rauchg]

Good catch @HeyHugo we should fix it!

[thysultan]

Stylis does prefix keyframes and animations but there is an option to disable this @rauchg, I think a lot of these issue will be solved with updating the fork up stream.

[rauchg]

In this case it's a bug with prefixing duration though, right?

Btw @thysultan would love to merge with upstream, but keep in mind we made the following changes:

• disabling non-standard behavior (like top level properties without selectors)
• we decided to add css-modules-like :global to skip prefixing. I saw you support :host etc now, but since we can't really emulate web components 100%, I thought it was better _not to fake it_
• using attribute selectors suffixing. in the future we might also have an option to use classes too (#27)

[thysultan]

@rauchg Yes upstream handles 2 ':global' and attribute selectors. I could send a PR that that updates it upstream with 1. And ':host' disabled?

[rauchg]

@thysultan that would be wonderful. Thanks for your awesome work on stylis

[rauchg]

Pushed a few patches for animations until we have @thysultan's permanent solution. 🕺

[HeyHugo]

Nice, now my first example works. However I think the shorthand version for animation is still broken.

e.g.

animation: 0.6s infinite slidein;

Produced css:

span[data-jsx="3080172011"] {-webkit-animation:a30801720110.6s infinite slidein;-moz-animation:a30801720110.6s infinite slidein;animation:a30801720110.6s infinite slidein;}@-webkit-keyframes a3080172011slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}}@-moz-keyframes a3080172011slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}}@keyframes a3080172011slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}}

[thysultan]

@HeyHugo once https://github.com/zeit/styled-jsx/pull/73 is merged it should handle all cases, previously it was making the assumption that the animation name will always come first, but really it can be anywhere in the declaration.

[rauchg]

That's remarkably helpful @thysultan, thank you so much!

[aga5tya]

@giuseppeg @thysultan , I'm getting conflict in animation keyframe when i use only point based value in animation timing shorthands. Like .8s instead of 0.8s for example. The former syntax is accepted in the browser afaik. Not so important, just came across this.

Input:

animation: moveR .8s 1s linear;

@keyframes moveR {
        ...
        }

Output:

-webkit-animation: a1838729535moveR a1838729535.8s 1s linear;
-moz-animation: a1838729535moveR a1838729535.8s 1s linear;
animation: a1838729535moveR a1838729535.8s 1s linear;

@-webkit-keyframes a1838729535moveR {
  ...
}

@-moz-keyframes a1838729535moveR {
   ...
}

@keyframes a1838729535moveR {
   ...
}

[thysultan]

@aga5tya Can't reproduce in stylis, what version of styled-jsx are you using?