Fix facebook#1357. Don't append "px" suffix to strings.

pluma · Oct 12, 2015 · 3176377 · 3176377
1 parent 01817c1
commit 3176377
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/docs/tips/06-style-props-value-px.md b/docs/tips/06-style-props-value-px.md
@@ -44,3 +44,10 @@ Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of pr
 - `widows`
 - `zIndex`
 - `zoom`
+
+Alternatively you can simply pass the unitless value as a string:
+
+```js
+var divStyle = {WebkitMagic: "10"}; // rendered as "-webkit-magic:10"
+ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);
+```
diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
@@ -60,12 +60,12 @@ describe('CSSPropertyOperations', function() {
     })).toBe('left:0;margin:16px;opacity:0.5;padding:4px;');
   });
 
-  it('should trim values so `px` will be appended correctly', function() {
+  it('should trim string values', function() {
     expect(CSSPropertyOperations.createMarkupForStyles({
       margin: '16 ',
       opacity: 0.5,
-      padding: ' 4 ',
-    })).toBe('margin:16px;opacity:0.5;padding:4px;');
+      xmagic: ' 4 ',
+    })).toBe('margin:16;opacity:0.5;xmagic:4;');
   });
 
   it('should not append `px` to styles that might need a number', function() {

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -52,10 +52,10 @@ describe('ReactDOMComponent', function() {
       var stubStyle = container.firstChild.style;
 
       // set initial style
-      var setup = {display: 'block', left: '1', top: 2, fontFamily: 'Arial'};
+      var setup = {display: 'block', WebkitMagic: '1', top: 2, fontFamily: 'Arial'};
       ReactDOM.render(<div style={setup} />, container);
       expect(stubStyle.display).toEqual('block');
-      expect(stubStyle.left).toEqual('1px');
+      expect(stubStyle.WebkitMagic).toEqual('1');
       expect(stubStyle.fontFamily).toEqual('Arial');
 
       // reset the style to their default state

diff --git a/src/renderers/dom/shared/dangerousStyleValue.js b/src/renderers/dom/shared/dangerousStyleValue.js
@@ -48,7 +48,7 @@ function dangerousStyleValue(name, value) {
   }
 
   if (typeof value === 'string') {
-    value = value.trim();
+    return value.trim();
   }
   return value + 'px';
 }