Radium transition checksum was invalid

[Palgie]

I'm looking at using a CSS transition in Radium in a React isomorphic setting.

However the error returned is:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) 0;padding:10px 20px;transition:backgroun
 (server) 0;padding:10px 20px;font-size:14px;backg

Here is the source:

import { global } from '../../config/styles';
import Color from 'color';

const color = global.color;
const radius = global.radius;
const styles = {
  base: {
    borderRadius: radius.base,
    color: color.white.base,
    border: 0,
    padding: '10px 20px',
    transition: 'background .5s',
    fontSize: 14,
    ':hover': {
      cursor: 'pointer',
    },
    ':focus': {
      outline: 0,
    },
  },
}

All other properties are working correctly. Is this a known bug? I can't find any reference to this issue anywhere.

[alexlande]

Don't think this is a known issue. If you could create a minimal reproduction, that would be really helpful in tracking it down.

[Palgie]

No problem @alexlande.

Node: v4.4.1 Babel: v6.5.2 Radium: v0.17.0

Just stripped these from the project.

Button.js

import radium from 'radium';
import React, { Component } from 'react';
import styles from './Button.styles.js';
import camelcase from 'camelcase';

class Button extends Component {

  static propTypes = {
    kind: React.PropTypes.oneOf(['primary', 'secondary', 'warning']).isRequired,
    step: React.PropTypes.oneOf(['success', 'loading', 'failure', 'default']).isRequired,
    children: React.PropTypes.node,
    handleClick: React.PropTypes.func,
  };

  static defaultProps = {
    step: 'default',
  }

  render() {
    return (
      <button
        style={[
          styles.base,
          styles[this.props.kind],
          styles[this.props.step],
          styles[camelcase(`${this.props.kind}-${this.props.step}`)],
        ]}
        onClick={this.props.handleClick}
      >
        {this.props.children}
      </button>
    );
  }
}

export default radium(Button);

Button.styles.js

import { global } from '../../config/styles';

const color = global.color;
const radius = global.radius;
const styles = {
  base: {
    borderRadius: radius.base,
    color: color.white.base,
    border: 0,
    padding: '10px 20px',
    transitionProperty: 'background',
    transitionDuration: '.4s',
    fontSize: 14,
    ':hover': {
      cursor: 'pointer',
    },
    ':focus': {
      outline: 0,
    },
  }
}

I've been able to happily use other CSS properties thus far without issue and removal of transition property will also remove the warning. I've also tried some short hand and long hand variants with the same result.