Wrap shorthand CSS property collision warning in feature flag

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

@@ -146,141 +146,6 @@ describe('ReactDOMComponent', () => {
       }
     });
 
-    it('should warn for conflicting CSS shorthand updates', () => {
-      const container = document.createElement('div');
-      ReactDOM.render(
-        <div style={{font: 'foo', fontStyle: 'bar'}} />,
-        container,
-      );
-      expect(() =>
-        ReactDOM.render(<div style={{font: 'foo'}} />, container),
-      ).toWarnDev(
-        'Warning: Removing a style property during rerender (fontStyle) ' +
-          'when a conflicting property is set (font) can lead to styling ' +
-          "bugs. To avoid this, don't mix shorthand and non-shorthand " +
-          'properties for the same value; instead, replace the shorthand ' +
-          'with separate values.' +
-          '\n    in div (at **)',
-      );
-
-      // These updates are OK and don't warn:
-      ReactDOM.render(
-        <div style={{font: 'qux', fontStyle: 'bar'}} />,
-        container,
-      );
-      ReactDOM.render(
-        <div style={{font: 'foo', fontStyle: 'baz'}} />,
-        container,
-      );
-
-      expect(() =>
-        ReactDOM.render(
-          <div style={{font: 'qux', fontStyle: 'baz'}} />,
-          container,
-        ),
-      ).toWarnDev(
-        'Warning: Updating a style property during rerender (font) when ' +
-          'a conflicting property is set (fontStyle) can lead to styling ' +
-          "bugs. To avoid this, don't mix shorthand and non-shorthand " +
-          'properties for the same value; instead, replace the shorthand ' +
-          'with separate values.' +
-          '\n    in div (at **)',
-      );
-      expect(() =>
-        ReactDOM.render(<div style={{fontStyle: 'baz'}} />, container),
-      ).toWarnDev(
-        'Warning: Removing a style property during rerender (font) when ' +
-          'a conflicting property is set (fontStyle) can lead to styling ' +
-          "bugs. To avoid this, don't mix shorthand and non-shorthand " +
-          'properties for the same value; instead, replace the shorthand ' +
-          'with separate values.' +
-          '\n    in div (at **)',
-      );
-
-      // A bit of a special case: backgroundPosition isn't technically longhand
-      // (it expands to backgroundPosition{X,Y} but so does background)
-      ReactDOM.render(
-        <div style={{background: 'yellow', backgroundPosition: 'center'}} />,
-        container,
-      );
-      expect(() =>
-        ReactDOM.render(<div style={{background: 'yellow'}} />, container),
-      ).toWarnDev(
-        'Warning: Removing a style property during rerender ' +
-          '(backgroundPosition) when a conflicting property is set ' +
-          "(background) can lead to styling bugs. To avoid this, don't mix " +
-          'shorthand and non-shorthand properties for the same value; ' +
-          'instead, replace the shorthand with separate values.' +
-          '\n    in div (at **)',
-      );
-      ReactDOM.render(
-        <div style={{background: 'yellow', backgroundPosition: 'center'}} />,
-        container,
-      );
-      // But setting them  at the same time is OK:
-      ReactDOM.render(
-        <div style={{background: 'green', backgroundPosition: 'top'}} />,
-        container,
-      );
-      expect(() =>
-        ReactDOM.render(<div style={{backgroundPosition: 'top'}} />, container),
-      ).toWarnDev(
-        'Warning: Removing a style property during rerender (background) ' +
-          'when a conflicting property is set (backgroundPosition) can lead ' +
-          "to styling bugs. To avoid this, don't mix shorthand and " +
-          'non-shorthand properties for the same value; instead, replace the ' +
-          'shorthand with separate values.' +
-          '\n    in div (at **)',
-      );
-
-      // A bit of an even more special case: borderLeft and borderStyle overlap.
-      ReactDOM.render(
-        <div style={{borderStyle: 'dotted', borderLeft: '1px solid red'}} />,
-        container,
-      );
-      expect(() =>
-        ReactDOM.render(
-          <div style={{borderLeft: '1px solid red'}} />,
-          container,
-        ),
-      ).toWarnDev(
-        'Warning: Removing a style property during rerender (borderStyle) ' +
-          'when a conflicting property is set (borderLeft) can lead to ' +
-          "styling bugs. To avoid this, don't mix shorthand and " +
-          'non-shorthand properties for the same value; instead, replace the ' +
-          'shorthand with separate values.' +
-          '\n    in div (at **)',
-      );
-      expect(() =>
-        ReactDOM.render(
-          <div style={{borderStyle: 'dashed', borderLeft: '1px solid red'}} />,
-          container,
-        ),
-      ).toWarnDev(
-        'Warning: Updating a style property during rerender (borderStyle) ' +
-          'when a conflicting property is set (borderLeft) can lead to ' +
-          "styling bugs. To avoid this, don't mix shorthand and " +
-          'non-shorthand properties for the same value; instead, replace the ' +
-          'shorthand with separate values.' +
-          '\n    in div (at **)',
-      );
-      // But setting them  at the same time is OK:
-      ReactDOM.render(
-        <div style={{borderStyle: 'dotted', borderLeft: '2px solid red'}} />,
-        container,
-      );
-      expect(() =>
-        ReactDOM.render(<div style={{borderStyle: 'dotted'}} />, container),
-      ).toWarnDev(
-        'Warning: Removing a style property during rerender (borderLeft) ' +
-          'when a conflicting property is set (borderStyle) can lead to ' +
-          "styling bugs. To avoid this, don't mix shorthand and " +
-          'non-shorthand properties for the same value; instead, replace the ' +
-          'shorthand with separate values.' +
-          '\n    in div (at **)',
-      );
-    });
-
     it('should warn for unknown prop', () => {
       const container = document.createElement('div');
       expect(() =>

packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.internal.js

@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+describe('ReactDOMShorthandCSSPropertyCollision', () => {
+  let ReactFeatureFlags;
+  let React;
+  let ReactDOM;
+
+  beforeEach(() => {
+    jest.resetModules();
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.warnAboutShorthandPropertyCollision = true;
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should warn for conflicting CSS shorthand updates', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(<div style={{font: 'foo', fontStyle: 'bar'}} />, container);
+    expect(() =>
+      ReactDOM.render(<div style={{font: 'foo'}} />, container),
+    ).toWarnDev(
+      'Warning: Removing a style property during rerender (fontStyle) ' +
+        'when a conflicting property is set (font) can lead to styling ' +
+        "bugs. To avoid this, don't mix shorthand and non-shorthand " +
+        'properties for the same value; instead, replace the shorthand ' +
+        'with separate values.' +
+        '\n    in div (at **)',
+    );
+
+    // These updates are OK and don't warn:
+    ReactDOM.render(<div style={{font: 'qux', fontStyle: 'bar'}} />, container);
+    ReactDOM.render(<div style={{font: 'foo', fontStyle: 'baz'}} />, container);
+
+    expect(() =>
+      ReactDOM.render(
+        <div style={{font: 'qux', fontStyle: 'baz'}} />,
+        container,
+      ),
+    ).toWarnDev(
+      'Warning: Updating a style property during rerender (font) when ' +
+        'a conflicting property is set (fontStyle) can lead to styling ' +
+        "bugs. To avoid this, don't mix shorthand and non-shorthand " +
+        'properties for the same value; instead, replace the shorthand ' +
+        'with separate values.' +
+        '\n    in div (at **)',
+    );
+    expect(() =>
+      ReactDOM.render(<div style={{fontStyle: 'baz'}} />, container),
+    ).toWarnDev(
+      'Warning: Removing a style property during rerender (font) when ' +
+        'a conflicting property is set (fontStyle) can lead to styling ' +
+        "bugs. To avoid this, don't mix shorthand and non-shorthand " +
+        'properties for the same value; instead, replace the shorthand ' +
+        'with separate values.' +
+        '\n    in div (at **)',
+    );
+
+    // A bit of a special case: backgroundPosition isn't technically longhand
+    // (it expands to backgroundPosition{X,Y} but so does background)
+    ReactDOM.render(
+      <div style={{background: 'yellow', backgroundPosition: 'center'}} />,
+      container,
+    );
+    expect(() =>
+      ReactDOM.render(<div style={{background: 'yellow'}} />, container),
+    ).toWarnDev(
+      'Warning: Removing a style property during rerender ' +
+        '(backgroundPosition) when a conflicting property is set ' +
+        "(background) can lead to styling bugs. To avoid this, don't mix " +
+        'shorthand and non-shorthand properties for the same value; ' +
+        'instead, replace the shorthand with separate values.' +
+        '\n    in div (at **)',
+    );
+    ReactDOM.render(
+      <div style={{background: 'yellow', backgroundPosition: 'center'}} />,
+      container,
+    );
+    // But setting them  at the same time is OK:
+    ReactDOM.render(
+      <div style={{background: 'green', backgroundPosition: 'top'}} />,
+      container,
+    );
+    expect(() =>
+      ReactDOM.render(<div style={{backgroundPosition: 'top'}} />, container),
+    ).toWarnDev(
+      'Warning: Removing a style property during rerender (background) ' +
+        'when a conflicting property is set (backgroundPosition) can lead ' +
+        "to styling bugs. To avoid this, don't mix shorthand and " +
+        'non-shorthand properties for the same value; instead, replace the ' +
+        'shorthand with separate values.' +
+        '\n    in div (at **)',
+    );
+
+    // A bit of an even more special case: borderLeft and borderStyle overlap.
+    ReactDOM.render(
+      <div style={{borderStyle: 'dotted', borderLeft: '1px solid red'}} />,
+      container,
+    );
+    expect(() =>
+      ReactDOM.render(<div style={{borderLeft: '1px solid red'}} />, container),
+    ).toWarnDev(
+      'Warning: Removing a style property during rerender (borderStyle) ' +
+        'when a conflicting property is set (borderLeft) can lead to ' +
+        "styling bugs. To avoid this, don't mix shorthand and " +
+        'non-shorthand properties for the same value; instead, replace the ' +
+        'shorthand with separate values.' +
+        '\n    in div (at **)',
+    );
+    expect(() =>
+      ReactDOM.render(
+        <div style={{borderStyle: 'dashed', borderLeft: '1px solid red'}} />,
+        container,
+      ),
+    ).toWarnDev(
+      'Warning: Updating a style property during rerender (borderStyle) ' +
+        'when a conflicting property is set (borderLeft) can lead to ' +
+        "styling bugs. To avoid this, don't mix shorthand and " +
+        'non-shorthand properties for the same value; instead, replace the ' +
+        'shorthand with separate values.' +
+        '\n    in div (at **)',
+    );
+    // But setting them  at the same time is OK:
+    ReactDOM.render(
+      <div style={{borderStyle: 'dotted', borderLeft: '2px solid red'}} />,
+      container,
+    );
+    expect(() =>
+      ReactDOM.render(<div style={{borderStyle: 'dotted'}} />, container),
+    ).toWarnDev(
+      'Warning: Removing a style property during rerender (borderLeft) ' +
+        'when a conflicting property is set (borderStyle) can lead to ' +
+        "styling bugs. To avoid this, don't mix shorthand and " +
+        'non-shorthand properties for the same value; instead, replace the ' +
+        'shorthand with separate values.' +
+        '\n    in div (at **)',
+    );
+  });
+});

packages/react-dom/src/shared/CSSPropertyOperations.js

@@ -12,6 +12,8 @@ import hyphenateStyleName from './hyphenateStyleName';
 import warnValidStyle from './warnValidStyle';
 import warning from 'shared/warning';
 
+import {warnAboutShorthandPropertyCollision} from 'shared/ReactFeatureFlags';
+
 /**
  * Operations for dealing with CSS properties.
  */
@@ -123,6 +125,10 @@ export function validateShorthandPropertyCollisionInDev(
   styleUpdates,
   nextStyles,
 ) {
+  if (!warnAboutShorthandPropertyCollision) {
+    return;
+  }
+
   if (!nextStyles) {
     return;
   }

packages/shared/ReactFeatureFlags.js

@@ -47,3 +47,5 @@ export const disableInputAttributeSyncing = false;
 // These APIs will no longer be "unstable" in the upcoming 16.7 release,
 // Control this behavior with a flag to support 16.6 minor releases in the meanwhile.
 export const enableStableConcurrentModeAPIs = false;
+
+export const warnAboutShorthandPropertyCollision = false;

packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js

@@ -23,6 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const disableInputAttributeSyncing = false;
 export const enableStableConcurrentModeAPIs = false;
+export const warnAboutShorthandPropertyCollision = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js

@@ -23,6 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const disableInputAttributeSyncing = false;
 export const enableStableConcurrentModeAPIs = false;
+export const warnAboutShorthandPropertyCollision = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -28,6 +28,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableStableConcurrentModeAPIs = false;
+export const warnAboutShorthandPropertyCollision = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -23,6 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const disableInputAttributeSyncing = false;
 export const enableStableConcurrentModeAPIs = false;
+export const warnAboutShorthandPropertyCollision = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.persistent.js

@@ -23,6 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const disableInputAttributeSyncing = false;
 export const enableStableConcurrentModeAPIs = false;
+export const warnAboutShorthandPropertyCollision = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -23,6 +23,7 @@ export const enableSchedulerTracing = false;
 export const enableSuspenseServerRenderer = false;
 export const disableInputAttributeSyncing = false;
 export const enableStableConcurrentModeAPIs = false;
+export const warnAboutShorthandPropertyCollision = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.www.js

@@ -18,6 +18,7 @@ export const {
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   warnAboutDeprecatedLifecycles,
   disableInputAttributeSyncing,
+  warnAboutShorthandPropertyCollision,
 } = require('ReactFeatureFlags');
 
 // The rest of the flags are static for better dead code elimination.