fixup! Make IE 11 not complain about non-crucial style attribute hydr…

…ation mismatch
facebook · Sep 3, 2018 · 923c9e7 · 923c9e7
1 parent 41171b8
commit 923c9e7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js
@@ -261,40 +261,62 @@ describe('ReactDOMServerHydration', () => {
   it('should warn when the style property differs', () => {
     const element = document.createElement('div');
     element.innerHTML = ReactDOMServer.renderToString(
-      <div style={{textDecoration: 'none', color: 'black'}} />,
+      <div style={{textDecoration: 'none', color: 'black', height: '10px'}} />,
     );
     expect(element.firstChild.style.textDecoration).toBe('none');
     expect(element.firstChild.style.color).toBe('black');
 
     expect(() =>
       ReactDOM.hydrate(
-        <div style={{textDecoration: 'none', color: 'white'}} />,
+        <div
+          style={{textDecoration: 'none', color: 'white', height: '10px'}}
+        />,
         element,
       ),
     ).toWarnDev(
       'Warning: Prop `style` did not match. Server: ' +
-        '"text-decoration:none;color:black" Client: ' +
-        '"text-decoration:none;color:white"',
+        '"text-decoration:none;color:black;height:10px" Client: ' +
+        '"text-decoration:none;color:white;height:10px"',
       {withoutStack: true},
     );
   });
 
-  it('should not warn when the style property differs on whitespace only', () => {
+  it('should not warn when the style property differs on whitespace in IE', () => {
+    document.documentMode = 11;
     const element = document.createElement('div');
-    element.innerHTML = ReactDOMServer.renderToString(
-      <div style={{textDecoration: 'none', color: 'black'}} />,
-    );
-    expect(element.firstChild.style.textDecoration).toBe('none');
-    expect(element.firstChild.style.color).toBe('black');
 
-    spyOnDevAndProd(console, 'error');
+    // Simulate IE normalizing the style attribute. IE makes it equal to
+    // what's available under `node.style.cssText`.
+    element.innerHTML =
+      '<div style="text-decoration: none; color: black; height: 10px;" data-reactroot=""></div>';
 
     ReactDOM.hydrate(
-      <div style={{textDecoration: 'none', color: 'black'}} />,
+      <div style={{textDecoration: 'none', color: 'black', height: '10px'}} />,
       element,
     );
 
-    expect(console.error).not.toHaveBeenCalled();
+    delete document.documentMode;
+  });
+
+  it('should warn when the style property differs on whitespace in non-IE browsers', () => {
+    const element = document.createElement('div');
+
+    element.innerHTML =
+      '<div style="text-decoration: none; color: black; height: 10px;" data-reactroot=""></div>';
+
+    expect(() =>
+      ReactDOM.hydrate(
+        <div
+          style={{textDecoration: 'none', color: 'black', height: '10px'}}
+        />,
+        element,
+      ),
+    ).toWarnDev(
+      'Warning: Prop `style` did not match. Server: ' +
+        '"text-decoration: none; color: black; height: 10px;" Client: ' +
+        '"text-decoration:none;color:black;height:10px"',
+      {withoutStack: true},
+    );
   });
 
   it('should throw rendering portals on the server', () => {

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -111,15 +111,15 @@ if (__DEV__) {
     const markupNormalized = markupString
       .replace(NORMALIZE_NEWLINES_REGEX, '\n')
       .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');
-    if (propName !== 'style') {
+    if (propName !== 'style' || !document.documentMode) {
       return markupNormalized;
     }
     // IE 11 parses & normalizes the style attribute as opposed to other
     // browsers. The following normalization will still fail if the style
     // attribute contains invalid CSS declarations but the majority of
     // false warnings comes from spacing issues.
     // See https://github.com/facebook/react/issues/11807
-    return markupNormalized.replace(/\s*([:;])\s*/, '$1').replace(/;$/, '');
+    return markupNormalized.replace(/\s*([:;])\s*/g, '$1').replace(/;$/, '');
   };
 
   warnForTextDifference = function(