radium-plugin-prefix-all

npm install radium-plugin-prefix-all --save

Radium plugin that adds all vendor prefixes independent of which userAgent was passed. It works similar to Autoprefixer which also adds every possible vendor prefix, but uses inline-style-prefixer: a prefixer especially for inline styles written in javascript.

Warning

For now it does not resolve special plugins such as legacy specifications of flexbox. Therefore be sure to also include Radium's default prefixer which is also based on inline-style-prefixer to resolve those.

Opera prefixes

It will not add Opera's O-prefix since Opera switched to Webkit since version 15.

What you get

// input
{
	flexDirection: 'row'
}

// output
{
	WebkitFlexDirection: 'row',
	MozFlexDirection: 'row',
	msFlexDirection: 'row',
	flexDirection: 'row'
}

Usage

NOTE: This usage guide was directly copied from one of Ian Obermiller (Radium maintainer)'s Radium Plugins.

radium-plugin-prefix-all should be added directly after Radium's build-in Radium.Plugins.prefix. Radium plugins are setup by passing a config object to @Radium. Since you'll d probably want to use this plugin everywhere you use Radium, you can create your own module with a configured version of Radium:

ConfiguredRadium.js

var Radium = require('radium');
var prefixAll = require('radium-plugin-prefix-all');

function ConfiguredRadium(component) {
  return Radium({
    plugins: [
      Radium.Plugins.mergeStyleArray,
      Radium.Plugins.checkProps,
      Radium.Plugins.resolveMediaQueries,
      Radium.Plugins.resolveInteractionStyles,
      Radium.Plugins.prefix,

			prefixAll,

      Radium.Plugins.checkProps
    ]
  })(component);
}

module.exports = ConfiguredRadium;

Then you just use @ConfiguredRadium instead of @Radium. Or ConfiguredRadium(MyComponent) instead of Radium(MyComponent).

@ConfiguredRadium
class MyComponent extends Component {
  // ...
}