Merge pull request #45 from ianvieira/master

Fix component style attribute parser
remarkablemark · Nov 27, 2017 · 8f2bbd2 · 8f2bbd2
2 parents faad529 + 3ca6681
commit 8f2bbd2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 43 deletions.
diff --git a/lib/attributes-to-props.js b/lib/attributes-to-props.js
@@ -5,6 +5,7 @@
  */
 var utilities = require('./utilities');
 var propertyConfig = require('./property-config');
+var styleToObject = require('style-to-object');
 var config = propertyConfig.config;
 var isCustomAttribute = propertyConfig.HTMLDOMPropertyConfig.isCustomAttribute;
 
@@ -63,33 +64,16 @@ function cssToJs(style) {
         throw new Error('`cssToJs`: first argument must be a string. ');
     }
 
-    var result = {};
-    // e.g., `color: #f00`
-    var declarations = style.split(';');
-    // css property itemized as key and value
-    var properties;
-    var j;
-    var propertiesLen;
+    var styleObj = {};
 
-    for (var i = 0, declarationsLen = declarations.length; i < declarationsLen; i++) {
-        properties = declarations[i].trim().split(':');
-
-        // skip if not a css property
-        if (properties.length !== 2) { continue; }
-
-        // css property name
-        properties[0] = properties[0].trim();
-        // css property value
-        properties[1] = properties[1].trim();
-
-        if (properties[0] && properties[1]) {
-            for (j = 0, propertiesLen = properties.length; j < propertiesLen; j++) {
-                result[utilities.camelCase(properties[0])] = properties[1];
-            }
+    styleToObject(style, function(propName, propValue) {
+        // Check if it's not a comment node
+        if (propName && propValue) {
+            styleObj[utilities.camelCase(propName)] = propValue;
         }
-    }
+    });
 
-    return result;
+    return styleObj;
 }
 
 /**

diff --git a/lib/utilities.js b/lib/utilities.js
@@ -1,29 +1,23 @@
 'use strict';
 
+var _hyphenPattern = /-(.)/g;
+
 /**
  * Convert a string to camel case.
  *
  * @param  {String} string - The string.
  * @return {String}
  */
 function camelCase(string) {
-    if (typeof string !== 'string') {
+    if (typeof string !== 'string') { // null is an object
         throw new TypeError('First argument must be a string');
     }
-
-    // hyphen found after first character
-    if (string.indexOf('-') > 0) {
-        var strings = string.toLowerCase().split('-');
-
-        // capitalize starting from the second string item
-        for (var i = 1, len = strings.length; i < len; i++) {
-            strings[i] = strings[i].charAt(0).toUpperCase() + strings[i].slice(1);
-        }
-
-        return strings.join('');
+    if(string.indexOf('-') < 0) {
+        return string;
     }
-
-    return string;
+    return string.toLowerCase().replace(_hyphenPattern, function(_, character) {
+        return character.toUpperCase();
+    });
 }
 
 /**

diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
   ],
   "dependencies": {
     "html-dom-parser": "0.1.2",
-    "react-dom-core": "0.0.2"
+    "react-dom-core": "0.0.2",
+    "style-to-object": "0.2.0"
   },
   "devDependencies": {
     "coveralls": "^2.13.1",

diff --git a/test/attributes-to-props.js b/test/attributes-to-props.js
@@ -160,27 +160,30 @@ describe('attributes to props helper', function() {
             // proper css
             assert.deepEqual(
                 attributesToProps({
-                    style: 'color: #f00; font-size: 42px; z-index: -1;'
+                    style: 'color: #f00; font-size: 42px; z-index: -1; -moz-border-radius-topright: 10px; background: url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)'
                 }),
                 {
                     style: {
                         color: '#f00',
                         fontSize: '42px',
-                        zIndex: '-1'
+                        zIndex: '-1',
+                        MozBorderRadiusTopright: '10px',
+                        background: 'url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)'
                     }
                 }
             );
 
             // valid but messy
             assert.deepEqual(
                 attributesToProps({
-                    style: 'border-bottom-left-radius:1em;border-right-style:solid;Z-Index:-1'
+                    style: 'border-bottom-left-radius:1em;border-right-style:solid;Z-Index:-1;-moz-border-radius-bottomleft:20px'
                 }),
                 {
                     style: {
                         borderBottomLeftRadius: '1em',
                         borderRightStyle: 'solid',
-                        zIndex: '-1'
+                        zIndex: '-1',
+                        MozBorderRadiusBottomleft: '20px'
                     }
                 }
             );