Validate styles during reconciliation

Previously, Fiber validated styles at the same time setting properties. However, since properties get updated during the commit phase, validation in updates did not have access to the current owner.

We have moved validation to prepareUpdate() since it has all the necessary information. Now Fiber has access to the owner when validating styles. We can add more validations to the same place later.

Author: gaearon

scripts/fiber/tests-passing-except-dev.txt

@@ -1,9 +1,6 @@
 src/addons/transitions/__tests__/ReactTransitionGroup-test.js
 * should warn for duplicated keys with component stack info
 
-src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
-* should warn when updating hyphenated style names
-
 src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
 * should warn for unknown prop
 * should group multiple unknown prop warnings together

scripts/fiber/tests-passing.txt

@@ -553,6 +553,7 @@ src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
 * should set style attribute when styles exist
 * should not set style attribute when no styles exist
 * should warn when using hyphenated style names
+* should warn when updating hyphenated style names
 * warns when miscapitalizing vendored style names
 * should warn about style having a trailing semicolon
 * should warn about style containing a NaN value

src/renderers/dom/fiber/ReactDOMFiber.js

@@ -35,6 +35,7 @@ var {
   createElement,
   getChildNamespace,
   setInitialProperties,
+  validateProperties,
   updateProperties,
 } = ReactDOMFiberComponent;
 var { precacheFiberNode } = ReactDOMComponentTree;
@@ -101,6 +102,9 @@ var DOMRenderer = ReactFiberReconciler({
     props : Props,
     rootContainerInstance : Container,
   ) : void {
+    if (__DEV__) {
+      validateProperties(domElement, type, null, props);
+    }
     setInitialProperties(domElement, type, props, rootContainerInstance);
   },
 
@@ -110,6 +114,9 @@ var DOMRenderer = ReactFiberReconciler({
     oldProps : Props,
     newProps : Props
   ) : boolean {
+    if (__DEV__) {
+      validateProperties(domElement, type, oldProps, newProps);
+    }
     return true;
   },
 

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -424,16 +424,38 @@ function updateDOMProperties(
     }
   }
   if (styleUpdates) {
-    if (__DEV__) {
-      CSSPropertyOperations.warnValidStyles(styleUpdates);
-    }
     CSSPropertyOperations.setValueForStyles(
       domElement,
       styleUpdates,
     );
   }
 }
 
+function validateStyles(lastStyle : Object | null, nextStyle : Object) {
+  if (__DEV__) {
+    let styleUpdates = null;
+    // Find all styles that changed.
+    if (lastStyle != null) {
+      for (let styleName in nextStyle) {
+        if (
+          nextStyle.hasOwnProperty(styleName) &&
+          lastStyle[styleName] !== nextStyle[styleName]
+        ) {
+          styleUpdates = styleUpdates || {};
+          styleUpdates[styleName] = nextStyle[styleUpdates];
+        }
+      }
+      if (styleUpdates == null) {
+        // Nothing changed.
+        return;
+      }
+    } else {
+      styleUpdates = nextStyle;
+    }
+    CSSPropertyOperations.warnValidStyles(styleUpdates);
+  }
+}
+
 // Assumes there is no parent namespace.
 function getIntrinsicNamespace(type : string) : string | null {
   switch (type) {
@@ -694,6 +716,21 @@ var ReactDOMFiberComponent = {
     }
   },
 
+  validateProperties(
+    domElement : Element,
+    tag : string,
+    lastProps : Object | null,
+    nextProps : Object,
+  ) : void {
+    if (__DEV__) {
+      const nextStyle = nextProps.style;
+      if (nextStyle != null) {
+        const lastStyle = lastProps == null ? null : lastProps.style;
+        validateStyles(lastStyle, nextStyle);
+      }
+    }
+  },
+
   restoreControlledState(domElement : Element, tag : string, props : Object) : void {
     switch (tag) {
       case 'input':