fix(attributes-to-props.js): Use AST to transform style attributes into an style object

Author: Ian Vieira

lib/attributes-to-props.js

@@ -5,7 +5,7 @@
  */
 var utilities = require('./utilities');
 var propertyConfig = require('./property-config');
-var csstree = require('css-tree');
+var parser = require('style-to-object');
 var config = propertyConfig.config;
 var isCustomAttribute = propertyConfig.HTMLDOMPropertyConfig.isCustomAttribute;
 
@@ -66,17 +66,12 @@ function cssToJs(style) {
 
     var styleObj = {};
 
-    var ast = csstree.parse(style, {
-        context: 'declarationList',
-        parseValue: false
+    parser(style, function(propName, propValue) {
+        styleObj[utilities.camelCase(propName)] = propValue;
     });
 
-    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;
-        }
-    });
+    console.log(styleObj);
+
 
     return styleObj;
 }

lib/utilities.js

@@ -6,24 +6,13 @@
  * @param  {String} string - The string.
  * @return {String}
  */
-function camelCase(string) {
-    if (typeof string !== 'string') {
-        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);
-        }
+var _hyphenPattern = /-(.)/g;
 
-        return strings.join('');
-    }
-
-    return string;
+function camelCase(string) {
+    return string.replace(_hyphenPattern, function(_, character) {
+        return character.toUpperCase();
+    });
 }
 
 /**

package.json

@@ -29,9 +29,9 @@
     "converter"
   ],
   "dependencies": {
-    "css-tree": "^1.0.0-alpha.26",
     "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",

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'
                     }
                 }
             );