[Suspense] Use style.setProperty to set display

Follow up to #15861.

Turns out you can't set `!important` using a normal property assignment.
You have to use `style.setProperty`.

Maybe Andrew *should* just learn CSS.

IE9 doesn't support `style.setProperty` so we'll fall back to setting
`display: none` without `important`, like we did before #15861 Our
advice for apps that need to support IE9 will be to avoid using
`!important`. Which seems like good advice in general, but IANACSSE.

Tested on FB and using our Suspense DOM fixture.

Author: acdlite

packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js

@@ -83,25 +83,25 @@ describe('ReactDOMSuspensePlaceholder', () => {
           <div ref={divs[1]}>
             <AsyncText ms={500} text="B" />
           </div>
-          <div style={{display: 'block'}} ref={divs[2]}>
+          <div style={{display: 'span'}} ref={divs[2]}>
             <Text text="C" />
           </div>
         </Suspense>
       );
     }
     ReactDOM.render(<App />, container);
-    expect(divs[0].current.style.display).toEqual('none !important');
-    expect(divs[1].current.style.display).toEqual('none !important');
-    expect(divs[2].current.style.display).toEqual('none !important');
+    expect(window.getComputedStyle(divs[0].current).display).toEqual('none');
+    expect(window.getComputedStyle(divs[1].current).display).toEqual('none');
+    expect(window.getComputedStyle(divs[2].current).display).toEqual('none');
 
     await advanceTimers(500);
 
     Scheduler.flushAll();
 
-    expect(divs[0].current.style.display).toEqual('');
-    expect(divs[1].current.style.display).toEqual('');
+    expect(window.getComputedStyle(divs[0].current).display).toEqual('block');
+    expect(window.getComputedStyle(divs[1].current).display).toEqual('block');
     // This div's display was set with a prop.
-    expect(divs[2].current.style.display).toEqual('block');
+    expect(window.getComputedStyle(divs[2].current).display).toEqual('span');
   });
 
   it('hides and unhides timed out text nodes', async () => {
@@ -156,14 +156,14 @@ describe('ReactDOMSuspensePlaceholder', () => {
         ReactDOM.render(<App />, container);
       });
       expect(container.innerHTML).toEqual(
-        '<span style="display: none !important;">Sibling</span><span style=' +
-          '"display: none !important;"></span>Loading...',
+        '<span style="display: none;">Sibling</span><span style=' +
+          '"display: none;"></span>Loading...',
       );
 
       act(() => setIsVisible(true));
       expect(container.innerHTML).toEqual(
-        '<span style="display: none !important;">Sibling</span><span style=' +
-          '"display: none !important;"></span>Loading...',
+        '<span style="display: none;">Sibling</span><span style=' +
+          '"display: none;"></span>Loading...',
       );
 
       await advanceTimers(500);

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -589,7 +589,12 @@ export function hideInstance(instance: Instance): void {
   // TODO: Does this work for all element types? What about MathML? Should we
   // pass host context to this method?
   instance = ((instance: any): HTMLElement);
-  instance.style.display = 'none !important';
+  const style = instance.style;
+  if (typeof style.setProperty === 'function') {
+    style.setProperty('display', 'none', 'important');
+  } else {
+    style.display = 'none';
+  }
 }
 
 export function hideTextInstance(textInstance: TextInstance): void {

packages/react-fresh/src/__tests__/ReactFresh-test.js

@@ -1359,7 +1359,7 @@ describe('ReactFresh', () => {
       const fallbackChild = container.childNodes[1];
       expect(primaryChild.textContent).toBe('Content 1');
       expect(primaryChild.style.color).toBe('green');
-      expect(primaryChild.style.display).toBe('none !important');
+      expect(primaryChild.style.display).toBe('none');
       expect(fallbackChild.textContent).toBe('Fallback 0');
       expect(fallbackChild.style.color).toBe('green');
       expect(fallbackChild.style.display).toBe('');
@@ -1373,7 +1373,7 @@ describe('ReactFresh', () => {
       expect(container.childNodes[1]).toBe(fallbackChild);
       expect(primaryChild.textContent).toBe('Content 1');
       expect(primaryChild.style.color).toBe('green');
-      expect(primaryChild.style.display).toBe('none !important');
+      expect(primaryChild.style.display).toBe('none');
       expect(fallbackChild.textContent).toBe('Fallback 1');
       expect(fallbackChild.style.color).toBe('green');
       expect(fallbackChild.style.display).toBe('');
@@ -1397,7 +1397,7 @@ describe('ReactFresh', () => {
       expect(container.childNodes[1]).toBe(fallbackChild);
       expect(primaryChild.textContent).toBe('Content 1');
       expect(primaryChild.style.color).toBe('red');
-      expect(primaryChild.style.display).toBe('none !important');
+      expect(primaryChild.style.display).toBe('none');
       expect(fallbackChild.textContent).toBe('Fallback 1');
       expect(fallbackChild.style.color).toBe('red');
       expect(fallbackChild.style.display).toBe('');