add styles support for react native

package.json

@@ -10,7 +10,7 @@
     "prepublish": "npm run build",
     "build": "npm run lint && npm run test",
     "lint": "eslint .",
-    "test": "node test/src/test.js",
+    "test": "node test/src/test.js && node test/src/styleTest.js",
     "test-cov": "istanbul cover test/src/test.js -- --require test/support/env --reporter dot --check-leaks test/ test/acceptance/",
     "patch": "npm version patch -m\"update version to %s\" && git push && git push --tags",
     "minor": "npm version minor -m\"update version to %s\" && git push && git push --tags",

src/rt-style-support-data.js

@@ -1,7 +1,47 @@
 'use strict';
 var map = {
+    /*flex*/
+    alignItems: 'string', //  "enum('flex-start', 'flex-end', 'center', 'stretch')",
+    alignSelf: 'string', //  "enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')",
+    borderBottomWidth: 'number',
+    borderLeftWidth: 'number',
+    borderRightWidth: 'number',
+    borderTopWidth: 'number',
+    borderWidth: 'number',
+    bottom: 'number',
+    flex: 'number',
+    flexDirection: 'string', // enum('row', 'column')
+    flexWrap: 'string', //  enum('wrap', 'nowrap')
+    height: 'number',
+    justifyContent: 'string', //  enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
+    left: 'number',
+    margin: 'number',
+    marginBottom: 'number',
+    marginHorizontal: 'number',
+    marginLeft: 'number',
+    marginRight: 'number',
+    marginTop: 'number',
+    marginVertical: 'number',
     padding: 'number',
-    'background-color': 'string'
+    paddingBottom: 'number',
+    paddingHorizontal: 'number',
+    paddingLeft: 'number',
+    paddingRight: 'number',
+    paddingTop: 'number',
+    paddingVertical: 'number',
+    position: 'string', //  enum('absolute', 'relative')
+    right: 'number',
+    top: 'number',
+    width: 'number',
+
+    /*image*/
+    resizeMode: 'string', // Object.keys(ImageResizeMode)
+    backgroundColor: 'string',
+    borderColor: 'string',
+    borderRadius: 'number',
+    overflow: 'string', // enum('visible', 'hidden')
+    tintColor: 'string',
+    opacity: 'number'
 };
 
-module.exports = map;
+module.exports = map;

src/rtStyle.js

@@ -31,7 +31,8 @@ function processRule2(result, rule) {
 }
 
 function processDeclaration(result, dec) {
-    result[stringUtils.convertToCamelCase(dec.property)] = convertValue(dec.property, dec.value);
+    var prop = stringUtils.convertToCamelCase(dec.property);
+    result[prop] = convertValue(prop, dec.value);
     return result;
 }
 
@@ -53,4 +54,4 @@ function convertValue(p, v) {
 module.exports = {
     convert: convert,
     convertBody: convertBody
-};
+};

test/src/styleTest.js

@@ -0,0 +1,23 @@
+'use strict';
+var test = require('tape');
+var rtStyle = require('../../src/rtStyle');
+//var fs = require('fs');
+//var _ = require('lodash');
+//var path = require('path');
+//var React = require('react/addons');
+//var util = require('./util');
+//var dataPath = path.resolve(__dirname, '..', 'data');
+
+
+var text = '.text { background-color: #00346E; padding: 3px; }';
+//var textEp = "{text: {backgroundColor: '#00346E', padding: 3px}}";
+//var textEp = '{"text":{"backgroundColor":"#00346E","padding":3}}';
+var textEp = '{\n  "text": {\n    "backgroundColor": "#00346E",\n    "padding": 3\n  }\n}';
+//var textEpModule = '\'use strict\';\nvar style = {"text":{"backgroundColor":"#00346E","padding":3}};\nmodule.exports = style;\n';
+//var row = '.text { background-color: #00346E; padding: 3px; }';
+
+test('html tests', function (t) {
+    var res = rtStyle.convertBody(text);
+    t.equal(res, textEp);
+    t.end();
+});