Upgrade inline-style-prefixer to 1.0.4 or 2.0.1 will break the style when userAgent=all

[philiptzou]

The inline-style-prefix-all 2.0 (and version 1.10) did a break change when a style value needs to be prefixed (robinweser/inline-style-prefix-all@1.0.2...master#diff-d08d9eb987b15590f557b151834aecfa). For example, prior 2.0 {display: "flex"} will be prefixed as {display: "-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex"} but in 2.0 and 2.0.1 the result became {display: ["-webkit-box", "-moz-box", "-ms-flexbox", "-webkit-flex", "flex"]}. This different result caused css-rule-set-to-string.js and plugins/prefix-plugin.js gave weird outputs like display:-webkit-box,-moz-box,-ms-flexbox,-webkit-flex,flex; which can not be recognized by any CSS engine.

I used npm-shrinkwrap.json to forcefully downgrade inline-style-prefixer and inline-style-prefixed. But this should be an easy fix for Radium and I cannot contribute patches at this point.

[chriswalkr]

Also seen this when using a UserAgent which isn't matched.

[evtuhovdo]

For me work this:

Now i use inline-style-prefixer 2.0.4 and radium 0.18.1.

RadiumPrefixAllPlugin.js

'use strict';

import inlineStylePrefixer from "inline-style-prefixer";
import _ from "lodash";

export default config => {
  const prefixedStyle = inlineStylePrefixer.prefixAll(config.style);

  // https://github.com/FormidableLabs/radium/issues/822
  _.each(prefixedStyle, (styleValue, stylePropertyName) => {
    if (_.isArray(styleValue)) {
      let newValue = styleValue[0];
      styleValue = _.drop(styleValue);

      _.each(styleValue, (value) => {
        newValue = newValue + ';' + stylePropertyName + ':' + value;
      });

      prefixedStyle[stylePropertyName] = newValue;
    }
  });

  return {style: prefixedStyle}
}

ConfiguredRadium.js

'use strict';

import Radium from 'radium';
import RadiumPrefixAllPlugin from './RadiumPrefixAllPlugin';

export default function ConfiguredRadium(component) {

  return Radium({
    plugins: [
      Radium.Plugins.mergeStyleArray,
      Radium.Plugins.checkProps,
      Radium.Plugins.resolveMediaQueries,
      Radium.Plugins.resolveInteractionStyles,
      RadiumPrefixAllPlugin,
      Radium.Plugins.checkProps
    ]
  })(component);
}

And in component i use decorator

'use strict';

import React, {Component, PropTypes} from 'react';
import ConfiguredRadium from './../../../ConfiguredRadium';

@ConfiguredRadium
class LogInButton extends Component {

I try move to radium mater and see that everything ok at this branch. mb make release 0.18.2 ? =)

[alexlande]

Resolved this through an inline-style-prefixer version bump, going to work further to get inline-style-prefixer upgraded to v3 (#918).