Fix styles to prevent subtle diffing bugs, add support for vendor pre…

…fixing
facebook · May 4, 2016 · c4463a1 · c4463a1
1 parent c9504d9
commit c4463a1
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 23 deletions.
diff --git a/src/isomorphic/React.js b/src/isomorphic/React.js
@@ -11,6 +11,7 @@
 
 'use strict';
 
+var CSSPropertyOperations = require('CSSPropertyOperations');
 var ReactChildren = require('ReactChildren');
 var ReactComponent = require('ReactComponent');
 var ReactClass = require('ReactClass');
@@ -62,6 +63,10 @@ var React = {
     only: onlyChild,
   },
 
+  CSS: {
+    multi: CSSPropertyOperations.multi,
+  },
+
   Component: ReactComponent,
 
   createElement: createElement,

diff --git a/src/isomorphic/devtools/__tests__/ReactNativeOperationHistoryDevtool-test.js b/src/isomorphic/devtools/__tests__/ReactNativeOperationHistoryDevtool-test.js
@@ -94,10 +94,9 @@ describe('ReactNativeOperationHistoryDevtool', () => {
       if (ReactDOMFeatureFlags.useCreateElement) {
         assertHistoryMatches([{
           instanceID: inst._debugID,
-          type: 'update styles',
+          type: 'update attribute',
           payload: {
-            color: 'red',
-            backgroundColor: 'yellow',
+            style: 'color:red;background-color:yellow;',
           },
         }, {
           instanceID: inst._debugID,
@@ -130,20 +129,20 @@ describe('ReactNativeOperationHistoryDevtool', () => {
 
       assertHistoryMatches([{
         instanceID: inst._debugID,
-        type: 'update styles',
-        payload: { color: 'red' },
+        type: 'update attribute',
+        payload: { style: 'color:red;' },
       }, {
         instanceID: inst._debugID,
-        type: 'update styles',
-        payload: { color: 'blue', backgroundColor: 'yellow' },
+        type: 'update attribute',
+        payload: { style: 'color:blue;background-color:yellow;' },
       }, {
         instanceID: inst._debugID,
-        type: 'update styles',
-        payload: { color: '', backgroundColor: 'green' },
+        type: 'update attribute',
+        payload: { style: 'background-color:green;' },
       }, {
         instanceID: inst._debugID,
-        type: 'update styles',
-        payload: { backgroundColor: '' },
+        type: 'update attribute',
+        payload: { style: null },
       }]);
     });
 
@@ -164,10 +163,9 @@ describe('ReactNativeOperationHistoryDevtool', () => {
 
       assertHistoryMatches([{
         instanceID: inst._debugID,
-        type: 'update styles',
+        type: 'update attribute',
         payload: {
-          color: 'red',
-          backgroundColor: 'yellow',
+          style: 'color:red;background-color:yellow;',
         },
       }]);
     });

diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js
@@ -172,13 +172,26 @@ var CSSPropertyOperations = {
         continue;
       }
       var styleValue = styles[styleName];
-      if (__DEV__) {
-        warnValidStyle(styleName, styleValue, component);
-      }
+      var processedStyleName = processStyleName(styleName);
       if (styleValue != null) {
-        serialized += processStyleName(styleName) + ':';
-        serialized +=
-          dangerousStyleValue(styleName, styleValue, component) + ';';
+        if (styleValue.__isMultiCssValue) {
+          for (var i = 0; i < styleValue.length; i++) {
+            var elem = styleValue[i];
+            if (__DEV__) {
+              warnValidStyle(styleName, elem, component);
+            }
+            serialized += processedStyleName + ':';
+            serialized +=
+              dangerousStyleValue(styleName, elem, component) + ';';
+          }
+        } else {
+          if (__DEV__) {
+            warnValidStyle(styleName, styleValue, component);
+          }
+          serialized += processedStyleName + ':';
+          serialized +=
+            dangerousStyleValue(styleName, styleValue, component) + ';';
+        }
       }
     }
     return serialized || null;
@@ -236,6 +249,10 @@ var CSSPropertyOperations = {
     }
   },
 
+  multi: function() {
+    arguments.__isMultiCssValue = true;
+    return arguments;
+  },
 };
 
 ReactPerf.measureMethods(CSSPropertyOperations, 'CSSPropertyOperations', {

diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -39,6 +39,7 @@ var ReactPerf = require('ReactPerf');
 var ReactServerRenderingTransaction = require('ReactServerRenderingTransaction');
 
 var emptyFunction = require('emptyFunction');
+var emptyObject = require('emptyObject');
 var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
 var invariant = require('invariant');
 var isEventSupported = require('isEventSupported');
@@ -992,10 +993,14 @@ ReactDOMComponent.Mixin = {
       }
     }
     if (styleUpdates) {
-      CSSPropertyOperations.setValueForStyles(
+      var nextStyles = emptyObject;
+      if (nextProps != null && nextProps[STYLE] != null) {
+        nextStyles = nextProps[STYLE];
+      }
+      DOMPropertyOperations.setValueForAttribute(
         getNode(this),
-        styleUpdates,
-        this
+        'style',
+        CSSPropertyOperations.createMarkupForStyles(nextStyles, this)
       );
     }
   },

diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
@@ -177,6 +177,25 @@ describe('CSSPropertyOperations', function() {
     );
   });
 
+  it('should allow array of vendor prefixed values', function() {
+    var styles = {
+      padding: 0,
+      margin: 0,
+      listStyle: 'none',
+      display: React.CSS.multi('-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex'),
+      WebkitFlexFlow: 'row wrap',
+      justifyContent: 'space-around',
+    };
+
+    var markup = ReactDOMServer.renderToString(
+      <div style={styles} />
+    );
+
+    expect(markup).toContain('-ms-flexbox');
+    expect(markup).toContain('-webkit-flex');
+    expect(markup).toContain('-webkit-box');
+  });
+
   it('should warn about style having a trailing semicolon', function() {
     var Comp = React.createClass({
       displayName: 'Comp',