Merge pull request #34 from kevinzwhuang/master

Fix empty inline style attribute bug from breaking React renders

Author: peternewnham

karma.conf.js

@@ -15,7 +15,8 @@ module.exports = function(karma) {
     singleRun: false,
     frameworks: [
       'jasmine',
-      'phantomjs-shim'
+      'phantomjs-shim',
+      'es6-shim'
     ],
     preprocessors: {
       'tests.webpack.js': 'webpack'

package-lock.json

@@ -58,6 +58,7 @@
     "json-loader": "^0.5.4",
     "karma": "^0.13.22",
     "karma-coverage": "^1.0.0",
+    "karma-es6-shim": "^1.0.0",
     "karma-jasmine": "^1.0.2",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-phantomjs-shim": "^1.4.0",

package.json

@@ -12,9 +12,12 @@ export default function generatePropsFromAttributes(attributes, key) {
   // generate props
   const props = Object.assign({}, htmlAttributesToReact(attributes), { key });
 
-  // if there is a style prop then convert it to a React style object
-  if (props.style) {
+  // if there is an inline/string style prop then convert it to a React style object
+  // otherwise, it is invalid and omitted
+  if (typeof props.style === 'string' || props.style instanceof String) {
     props.style = inlineStyleToObject(props.style);
+  } else {
+    delete props.style;
   }
 
   return props;

src/utils/generatePropsFromAttributes.js

@@ -68,6 +68,10 @@ describe('Integration tests: ', () => {
     test(`<div style="border-radius:1px;background:red${trailingSemiComma}">test</div>`);
   });
 
+  it('should ignore inline styles that are empty strings', () => {
+    test('<div style="">test</div>', '<div>test</div>');
+  });
+
   it('should not allow nesting of void elements', () => {
     test('<img><p>test</p></img>', '<img/><p>test</p>');
   });

test/integration/integration.spec.js

@@ -45,4 +45,16 @@ describe('Testing `utils/generatePropsFromAttributes`', () => {
 
   });
 
+  it('should return an object containing the converted style prop when the style html attribute is an empty string', () => {
+    const attributes = {
+      style: ''
+    };
+
+    expect(generatePropsFromAttributes(attributes, 'style-key')).toEqual({
+      style: 'converted-style',
+      key: 'style-key'
+    });
+    expect(inlineStyleToObject).toHaveBeenCalledWith('');
+  });
+
 });