Warn on initial render when style contains a NaN value.

src/renderers/dom/shared/CSSPropertyOperations.js

@@ -48,6 +48,7 @@ if (__DEV__) {
   // style values shouldn't contain a semicolon
   var badStyleValueWithSemicolonPattern = /;\s*$/;
 
+  var warnedForNaNValue = false;
   var warnedStyleNames = {};
   var warnedStyleValues = {};
 
@@ -93,6 +94,19 @@ if (__DEV__) {
       value.replace(badStyleValueWithSemicolonPattern, '')
     );
   };
+
+  var warnStyleValueWithNaN = function(name) {
+    if (warnedForNaNValue) {
+      return;
+    }
+
+    warnedForNaNValue = true;
+    warning(
+      false,
+      '`NaN` is an invalid value for the `%s` style property.',
+      name
+    );
+  };
 
   /**
    * @param {string} name
@@ -105,6 +119,8 @@ if (__DEV__) {
       warnBadVendoredStyleName(name);
     } else if (badStyleValueWithSemicolonPattern.test(value)) {
       warnStyleValueWithSemicolon(name, value);
+    } else if (typeof value === 'number' && isNaN(value)) {
+      warnStyleValueWithNaN(name);
     }
   };
 }

src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js

@@ -166,4 +166,15 @@ describe('CSSPropertyOperations', function() {
     expect(console.error.argsForCall[0][0]).toContain('Try "backgroundColor: blue" instead');
     expect(console.error.argsForCall[1][0]).toContain('Try "color: red" instead');
   });
+
+  it('should warn when style contains a NaN value', function() {
+    spyOn(console, 'error');
+
+    CSSPropertyOperations.createMarkupForStyles({
+      fontSize: NaN,
+    });
+
+    expect(console.error.calls.length).toBe(1);
+    expect(console.error.argsForCall[0][0]).toContain('`NaN` is an invalid value for the `fontSize` style property.');
+  });
 });

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -188,23 +188,6 @@ describe('ReactDOMComponent', function() {
       expect(console.error.calls.length).toBe(2);
     });
 
-    it('should warn semi-nicely about NaN in style', function() {
-      spyOn(console, 'error');
-
-      var style = {fontSize: NaN};
-      var div = document.createElement('div');
-      ReactDOM.render(<span style={style}></span>, div);
-      ReactDOM.render(<span style={style}></span>, div);
-
-      expect(console.error.argsForCall.length).toBe(1);
-      expect(console.error.argsForCall[0][0]).toEqual(
-        'Warning: `span` was passed a style object that has previously been ' +
-        'mutated. Mutating `style` is deprecated. Consider cloning it ' +
-        'beforehand. Check the `render` using <span>. Previous style: ' +
-        '{fontSize: NaN}. Mutated style: {fontSize: NaN}.'
-      );
-    });
-
     it('should update styles if initially null', function() {
       var styles = null;
       var container = document.createElement('div');