Animation won't run using JSX inline styles

[mallendeo]

The animation won't run since a css selector/property can't start with a number.

[nkzawa]

What version of next.js do you use ? It looks styled-jsx is already fixed vercel/styled-jsx@5377347 and vercel/styled-jsx@1605947

[mallendeo]

@nkzawa Just upgraded to 2.0.0-beta.17
After the upgrade, this is the output:

Note that forwards also gets prefixed.

LoadingIndicator.js

export default ({ active }) =>
  <div className={`loadingIndicator ${active ? 'active' : ''}`}>
    {
      [
        '#80DEEA',
        '#26C6DA',
        '#00ACC1',
        '#00838F',
        '#006064'
      ].map((color, i) =>
        <div
          style={{ backgroundColor: color, animationDelay: `-${1 - i / 20}s` }}
          key={`stripe${i}`}
          className='stripe'
        />
      )
    }
    <style jsx>{`
      .loadingIndicator,
      .stripe {
        left: 0;
        bottom: 0;
        width: 100%;
        position: absolute;
      }
      .loadingIndicator {
        color: #333;
        height: .2rem;
        opacity: 0;
        transition: opacity 1s 1s ease;
      }
      .stripe {
        height: 100%;
        animation: loading 1s ease infinite forwards;
      }
      .loadingIndicator.active {
        opacity: 1;
        transition-delay: 0s;
      }
      .loadingIndicator.active .stripe {
        animation: loading 1s ease infinite forwards;
      }
      @keyframes loading {
        0% {
          transform: scaleX(0);
          opacity: 1;
        }
        80% {
          transform: scaleX(100%);
        }
        100% {
          opacity: 0;
        }
      }
    `}</style>
  </div>

[nkzawa]

@mallendeo thanks for your feedback. I created the issue vercel/styled-jsx#77.
I think you can define animations using non-shorthand properties like animation-name instead of animation for now.

[mallendeo]

@nkzawa Thanks!

[timneutkens]

This will be fixed in the next beta release.