Fix component style attribute parser using AST

Author: Ian Vieira

lib/attributes-to-props.js

@@ -5,7 +5,7 @@
  */
 var utilities = require('./utilities');
 var propertyConfig = require('./property-config');
-var cssToReactNative = require('css-to-react-native');
+var csstree = require('css-tree');
 var config = propertyConfig.config;
 var isCustomAttribute = propertyConfig.HTMLDOMPropertyConfig.isCustomAttribute;
 
@@ -64,16 +64,21 @@ function cssToJs(style) {
         throw new Error('`cssToJs`: first argument must be a string. ');
     }
 
-    var styles = style.split(';');
-    styles = styles.map(function (style) {
-        var parts = style.split(':');
-        var propName = parts[0];
-        parts.shift();
-        var propValue = parts.join(':');
-        return [propName.trim(), propValue.trim()];
+    var styleObj = {};
+
+    var ast = csstree.parse(style, {
+        context: 'declarationList',
+        parseValue: false
+    });
+
+    csstree.walk(ast, function (node) {
+        if(node.type === 'Declaration') {
+            var propertyCamelCase = node.property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+            styleObj[propertyCamelCase] = node.value.value;
+        }
     });
 
-    return cssToReactNative.default(styles);
+    return styleObj;
 }
 
 /**

package.json

@@ -29,7 +29,7 @@
     "converter"
   ],
   "dependencies": {
-    "css-to-react-native": "^2.0.4",
+    "css-tree": "^1.0.0-alpha.26",
     "html-dom-parser": "0.1.2",
     "react-dom-core": "0.0.2"
   },