@undefined result with Radium.Keyframes method

[LanF3usT]

I'm having an error with the keyframes method. When I try to use it, I get a @undefined as return value in the style definition.

With the example:

const React = require("react") // v16.2.0
const Radium = require("radium") // vO.22.0
const ReactDOMServer = require("react-dom/server") // v16.2.0

class Spinner extends React.Component {
  render () {
    return (
      <Radium.StyleRoot>
        <div style={styles.inner} />
      </Radium.StyleRoot>
    )
  }
}

const pulseKeyframes = Radium.keyframes({
  '0%': { width: '10%' },
  '50%': { width: '50%' },
  '100%': { width: '10%' },
}, 'pulse')

const styles = {
  inner: {
    animation: 'x 3s ease 0s infinite',
    animationName: pulseKeyframes,
    background: 'blue',
    height: '4px',
    margin: '0 auto',
  }
}

ReactDOMServer.renderToString(<Spinner />)

The output for the style part is:

<style>
@undefined pulse-radium-animation-cbe223d5 {
0%{width: 10%;}
50%{width: 50%;}
100%{width: 10%;}
}
</style>

When I add <Radium.StyleRoot radiumConfig={{ userAgent: 'all' }}>, it's worked again.

[ryan-roemer]

@LanF3usT -- Can you create a minimal repository with your source code plus all the necessary stuff to build and see this in action and then give us install + error reproduction steps? We can jump in and figure out what's going on. Thanks!

[LanF3usT]

@ryan-roemer: I made an example with RunKit that represents my case without the userAgent on the StyleRoot component: https://runkit.com/lanf3ust/5a8e03a4b2d20f0012cafff2.

[sunny]

Seems related to inline style prefixing that was fixed in #962 (but not for keyframes).

[alexlande]

Yeah, looks like inline-style-prefixer's Prefixer.prefixedKeyframes is undefined if you pass in an invalid UA string (or if it can't detect one and a valid one isn't passed in, as I imagine the server behavior is).

https://github.com/FormidableLabs/radium/blob/master/src/prefixer.js#L127-L129

I expect we'd want to default to a value of keyframes if it's undefined:

return getPrefixer(userAgent).prefixedKeyframes || 'keyframes';

As far as I can tell it works as expected on the client and if you pass in a valid UA or "all".

[ryan-roemer]

Thanks @alexlande ! I'm working on this now starting with regression tests.

[alexlande]

:+1: Easiest way to see the incorrect behavior is to pass in a nonsense UA string in config.