Prevents adding units to css custom properties (#9966)

* Prevents adding units to css custom properties * Fix code style * Optimize custom property checking * Prevents adding units to css custom properties in markup creation * Update passing tests * Fix argument name and reuse check in DEV
facebook · Jun 14, 2017 · d44b7b6 · d44b7b6
1 parent ae94ea7
commit d44b7b6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 11 deletions.
diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js
@@ -128,10 +128,6 @@ if (__DEV__) {
    * @param {ReactDOMComponent} component
    */
   var warnValidStyle = function(name, value, component) {
-    // Don't warn for CSS variables
-    if (name.indexOf('--') === 0) {
-      return;
-    }
     var owner;
     if (component) {
       owner = component._currentElement._owner;
@@ -173,14 +169,22 @@ var CSSPropertyOperations = {
       if (!styles.hasOwnProperty(styleName)) {
         continue;
       }
+      var isCustomProperty = styleName.indexOf('--') === 0;
       var styleValue = styles[styleName];
       if (__DEV__) {
-        warnValidStyle(styleName, styleValue, component);
+        if (!isCustomProperty) {
+          warnValidStyle(styleName, styleValue, component);
+        }
       }
       if (styleValue != null) {
         serialized += processStyleName(styleName) + ':';
         serialized +=
-          dangerousStyleValue(styleName, styleValue, component) + ';';
+          dangerousStyleValue(
+            styleName,
+            styleValue,
+            component,
+            isCustomProperty,
+          ) + ';';
       }
     }
     return serialized || null;
@@ -208,18 +212,22 @@ var CSSPropertyOperations = {
       if (!styles.hasOwnProperty(styleName)) {
         continue;
       }
+      var isCustomProperty = styleName.indexOf('--') === 0;
       if (__DEV__) {
-        warnValidStyle(styleName, styles[styleName], component);
+        if (!isCustomProperty) {
+          warnValidStyle(styleName, styles[styleName], component);
+        }
       }
       var styleValue = dangerousStyleValue(
         styleName,
         styles[styleName],
         component,
+        isCustomProperty,
       );
       if (styleName === 'float' || styleName === 'cssFloat') {
         styleName = styleFloatAccessor;
       }
-      if (styleName.indexOf('--') === 0) {
+      if (isCustomProperty) {
         style.setProperty(styleName, styleValue);
       } else if (styleValue) {
         style[styleName] = styleValue;

diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
@@ -101,6 +101,14 @@ describe('CSSPropertyOperations', () => {
     ).toBe('-ms-transition:none;-moz-transition:none;');
   });
 
+  it('should create markup with unitless css custom property', () => {
+    expect(
+      CSSPropertyOperations.createMarkupForStyles({
+        '--foo': 5,
+      }),
+    ).toBe('--foo:5');
+  });
+
   it('should set style attribute when styles exist', () => {
     var styles = {
       backgroundColor: '#000',
@@ -254,7 +262,7 @@ describe('CSSPropertyOperations', () => {
     );
   });
 
-  it('should not warn when setting CSS variables', () => {
+  it('should not warn when setting CSS custom properties', () => {
     class Comp extends React.Component {
       render() {
         return <div style={{'--foo-primary': 'red', backgroundColor: 'red'}} />;
@@ -267,4 +275,17 @@ describe('CSSPropertyOperations', () => {
 
     expect(console.error.calls.count()).toBe(0);
   });
+
+  it('should not add units to CSS custom properties', () => {
+    class Comp extends React.Component {
+      render() {
+        return <div style={{'--foo': 5}} />;
+      }
+    }
+
+    var root = document.createElement('div');
+    ReactDOM.render(<Comp />, root);
+
+    expect(root.children[0].style.Foo).toEqual('5');
+  });
 });
diff --git a/src/renderers/dom/shared/dangerousStyleValue.js b/src/renderers/dom/shared/dangerousStyleValue.js
@@ -27,7 +27,7 @@ var styleWarnings = {};
  * @param {ReactDOMComponent} component
  * @return {string} Normalized style value with dimensions applied.
  */
-function dangerousStyleValue(name, value, component) {
+function dangerousStyleValue(name, value, component, isCustomProperty) {
   // Note that we've removed escapeTextForBrowser() calls here since the
   // whole string will be escaped when the attribute is injected into
   // the markup. If you provide unsafe user data here they can inject
@@ -45,7 +45,7 @@ function dangerousStyleValue(name, value, component) {
 
   var isNonNumeric = isNaN(value);
   if (
-    isNonNumeric ||
+    (!isCustomProperty && isNonNumeric) ||
     value === 0 ||
     (isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])
   ) {