Change:
We happen to "support" hyphenated keys to the style object on initial render (because we attempt to hyphenate camelcased keys) but those styles will never be updated on subsequent renders because we never attempt to unhyphenate. So we should warn when we see a hyphenated style.
Some browsers support assigning with hyphenated keys, but probably not all do.
AFAIK only Webkit does. (And I guess by association, Blink)
Perhaps another one for you!
OK
Sorry for the long delay, been busy. I'll try to do this today.
No problem, whenever you have time.
Curious: why do we not want to hyphenate names on subsequent updates, and instead show a warning? Because there should be “one way to do that”?
Yes, this matches our existing practice of requiring camel-cased attributes in general, which makes it easier to make warpper components that modify props in some way because you only need to look in one place to find the original value. In addition, you don't need to worry about what happens if someone were to specify both and in the same style block. (One last advantage: if the warnings happen only in the dev version, then there's no runtime cost in the production build.)
Do you think it's worth adding for the sake of providing a suggestive warning? (e.g. )
There you go! I also updated the docs about prefix, since it's not clear right now.
A warning would be very helpful, this just sucked up a lot of my time. If anyone is interested, chrome seems to handle hyphenated CSS props OK but FF doesn't

Discussion:
var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', <del> WebkitTransition: 'all' // note the capital 'W' here </del> <ins> WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix </ins> }; React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode); ``` <del> Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W". </del> <ins> Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W". </ins>

var CSSProperty = require('CSSProperty'); <ins> var camelizeStyleName = require('camelizeStyleName'); </ins> var dangerousStyleValue = require('dangerousStyleValue'); var hyphenateStyleName = require('hyphenateStyleName'); var memoizeStringOnly = require('memoizeStringOnly'); <ins> var warning = require('warning'); </ins> var processStyleName = memoizeStringOnly(function(styleName) { return hyphenateStyleName(styleName); }); <ins> if (__DEV__) { var warnedStyleNames = {}; var warnHyphenatedStyleName = function(name) { if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { return; } warnedStyleNames[name] = true; warning( false, 'Unsupported style property ' + name + '. Did you mean ' + camelizeStyleName(name) + '?' ); }; } </ins> /** * Operations for dealing with CSS properties. */

if (!styles.hasOwnProperty(styleName)) { continue; } <ins> if (__DEV__) { if (styleName.indexOf('-') > -1) { warnHyphenatedStyleName(styleName); } } </ins> var styleValue = styles[styleName]; if (styleValue != null) { serialized += processStyleName(styleName) + ':';

if (!styles.hasOwnProperty(styleName)) { continue; } <ins> if (__DEV__) { if (styleName.indexOf('-') > -1) { warnHyphenatedStyleName(styleName); } } </ins> var styleValue = dangerousStyleValue(styleName, styles[styleName]); if (styleValue) { style[styleName] = styleValue;

expect(/style=".*"/.test(root.innerHTML)).toBe(false); }); <ins> it('should warn when using hyphenated style names', function() { spyOn(console, 'warn'); expect(CSSPropertyOperations.createMarkupForStyles({ 'background-color': 'crimson' })).toBe('background-color:crimson;'); expect(console.warn.argsForCall.length).toBe(1); expect(console.warn.argsForCall[0][0]).toContain('backgroundColor'); }); it('should warn when updating hyphenated style names', function() { spyOn(console, 'warn'); var root = document.createElement('div'); var styles = { '-ms-transform': 'translate3d(0, 0, 0)', '-webkit-transform': 'translate3d(0, 0, 0)' }; React.renderComponent(<div />, root); React.renderComponent(<div style={styles} />, root); expect(console.warn.argsForCall.length).toBe(2); expect(console.warn.argsForCall[0][0]).toContain('msTransform'); expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform'); }); </ins> });

<ins> /** * Copyright 2014 Facebook, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * * @providesModule camelizeStyleName * @typechecks */ "use strict"; var camelize = require('camelize'); var msPattern = /^-ms-/; /** * Camelcases a hyphenated CSS property name, for example: * *   > camelizeStyleName('background-color') *   < "backgroundColor" *   > camelizeStyleName('-moz-transition') *   < "MozTransition" *   > camelizeStyleName('-ms-transition') *   < "msTransition" * * As Andi Smith suggests * (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix * is converted to lowercase `ms`. * * @param {string} string * @return {string} */ function camelizeStyleName(string) { return camelize(string.replace(msPattern, 'ms-')); } module.exports = camelizeStyleName; </ins>

/** * Hyphenates a camelcased CSS property name, for example: * <del> *   > hyphenate('backgroundColor') </del> <ins> *   > hyphenateStyleName('backgroundColor') </ins> *   < "background-color" <del> *   > hyphenate('MozTransition') </del> <ins> *   > hyphenateStyleName('MozTransition') </ins> *   < "-moz-transition" <del> *   > hyphenate('msTransition') </del> <ins> *   > hyphenateStyleName('msTransition') </ins> *   < "-ms-transition" * * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix