Inline dangerousStyleValue

Author: sebmarkbage

packages/react-dom-bindings/src/client/CSSPropertyOperations.js

@@ -7,9 +7,10 @@
 
 import {shorthandToLonghand} from './CSSShorthandProperty';
 
-import dangerousStyleValue from './dangerousStyleValue';
 import hyphenateStyleName from '../shared/hyphenateStyleName';
 import warnValidStyle from '../shared/warnValidStyle';
+import {isUnitlessNumber} from '../shared/CSSProperty';
+import {checkCSSPropertyStringCoercion} from 'shared/CheckStringCoercion';
 
 /**
  * Operations for dealing with CSS properties.
@@ -29,19 +30,36 @@ export function createDangerousStringForStyles(styles) {
       if (!styles.hasOwnProperty(styleName)) {
         continue;
       }
-      const styleValue = styles[styleName];
-      if (styleValue != null) {
+      const value = styles[styleName];
+      if (value != null && typeof value !== 'boolean' && value !== '') {
         const isCustomProperty = styleName.indexOf('--') === 0;
-        serialized +=
-          delimiter +
-          (isCustomProperty ? styleName : hyphenateStyleName(styleName)) +
-          ':';
-        serialized += dangerousStyleValue(
-          styleName,
-          styleValue,
-          isCustomProperty,
-        );
-
+        if (isCustomProperty) {
+          if (__DEV__) {
+            checkCSSPropertyStringCoercion(value, styleName);
+          }
+          serialized += delimiter + styleName + ':' + ('' + value).trim();
+        } else {
+          if (
+            typeof value === 'number' &&
+            value !== 0 &&
+            !(
+              isUnitlessNumber.hasOwnProperty(styleName) &&
+              isUnitlessNumber[styleName]
+            )
+          ) {
+            serialized +=
+              delimiter + hyphenateStyleName(styleName) + ':' + value + 'px';
+          } else {
+            if (__DEV__) {
+              checkCSSPropertyStringCoercion(value, styleName);
+            }
+            serialized +=
+              delimiter +
+              hyphenateStyleName(styleName) +
+              ':' +
+              ('' + value).trim();
+          }
+        }
         delimiter = ';';
       }
     }
@@ -58,28 +76,46 @@ export function createDangerousStringForStyles(styles) {
  */
 export function setValueForStyles(node, styles) {
   const style = node.style;
-  for (let styleName in styles) {
+  for (const styleName in styles) {
     if (!styles.hasOwnProperty(styleName)) {
       continue;
     }
+    const value = styles[styleName];
     const isCustomProperty = styleName.indexOf('--') === 0;
     if (__DEV__) {
       if (!isCustomProperty) {
-        warnValidStyle(styleName, styles[styleName]);
+        warnValidStyle(styleName, value);
       }
     }
-    const styleValue = dangerousStyleValue(
-      styleName,
-      styles[styleName],
-      isCustomProperty,
-    );
-    if (styleName === 'float') {
-      styleName = 'cssFloat';
-    }
-    if (isCustomProperty) {
-      style.setProperty(styleName, styleValue);
+
+    if (value == null || typeof value === 'boolean' || value === '') {
+      if (isCustomProperty) {
+        style.setProperty(styleName, '');
+      } else if (styleName === 'float') {
+        style.cssFloat = '';
+      } else {
+        style[styleName] = '';
+      }
+    } else if (isCustomProperty) {
+      style.setProperty(styleName, value);
+    } else if (
+      typeof value === 'number' &&
+      value !== 0 &&
+      !(
+        isUnitlessNumber.hasOwnProperty(styleName) &&
+        isUnitlessNumber[styleName]
+      )
+    ) {
+      style[styleName] = value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
     } else {
-      style[styleName] = styleValue;
+      if (styleName === 'float') {
+        style.cssFloat = value;
+      } else {
+        if (__DEV__) {
+          checkCSSPropertyStringCoercion(value, styleName);
+        }
+        style[styleName] = ('' + value).trim();
+      }
     }
   }
 }

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

@@ -70,7 +70,6 @@ import {
   DOCUMENT_TYPE_NODE,
   DOCUMENT_FRAGMENT_NODE,
 } from './HTMLNodeType';
-import dangerousStyleValue from './dangerousStyleValue';
 
 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
@@ -750,7 +749,12 @@ export function unhideInstance(instance: Instance, props: Props): void {
     styleProp.hasOwnProperty('display')
       ? styleProp.display
       : null;
-  instance.style.display = dangerousStyleValue('display', display);
+  instance.style.display =
+    display == null || typeof display === 'boolean'
+      ? ''
+      : // The value would've errored already if it wasn't safe.
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        ('' + display).trim();
 }
 
 export function unhideTextInstance(