issue reactjs#8 : case insensitive css attributes, import react's att…

…ribute mapping into attribute map

package.json

@@ -6,7 +6,8 @@
   "bin": "src/cli.js",
   "dependencies": {
     "yargs": "~1.3.1",
-    "jsdom": "~1.0.0-pre.6"
+    "jsdom": "~1.0.0-pre.6",
+	"react": "~0.13.0"
   },
   "devDependencies": {
     "gulp": "~3.8.7",

src/htmltojsx.js

@@ -35,6 +35,19 @@ var ELEMENT_ATTRIBUTE_MAPPING = {
   }
 };
 
+var HTMLDOMPropertyConfig = require('react/lib/HTMLDOMPropertyConfig');
+
+//populate property map with ReactJS's attribute and property mappings
+//TODO handle/use .Properties value eg: MUST_USE_PROPERTY is not HTML attr
+for (var propname in HTMLDOMPropertyConfig.Properties) {
+	if (!HTMLDOMPropertyConfig.Properties.hasOwnProperty(propname)) continue;
+
+	var mapFrom = HTMLDOMPropertyConfig.DOMAttributeNames[propname] || propname.toLowerCase();
+
+	if (!ATTRIBUTE_MAPPING[mapFrom])
+		ATTRIBUTE_MAPPING[mapFrom] = propname;
+}
+
 /**
  * Repeats a string a certain number of times.
  * Also: the future is bright and consists of native string repetition:
@@ -471,6 +484,10 @@ StyleParser.prototype = {
       var key = style.substr(0, firstColon);
       var value = style.substr(firstColon + 1).trim();
       if (key !== '') {
+		//if not vendor specific lowercase name
+		//TODO better vendor prefix handling
+		if(key[0] != '-') key = key.toLowerCase();
+
         this.styles[key] = value;
       }
     }, this);

test/htmltojsx-test.js

@@ -119,7 +119,13 @@ describe('htmltojsx', function() {
       expect(converter.convert('<div style="font-size: 12pt">Test</div>').trim())
         .toBe('<div style={{fontSize: \'12pt\'}}>Test</div>');
     });
-
+
+	it('should convert uppercase "style" attributes', function() {
+	  var converter = new HTMLtoJSX({ createClass: false });
+      expect(converter.convert('<div style="TEXT-ALIGN: center">Test</div>').trim())
+        .toBe('<div style={{textAlign: \'center\'}}>Test</div>');	  
+	});
+
     it('should convert "class" attribute', function() {
       var converter = new HTMLtoJSX({ createClass: false });
       expect(converter.convert('<div class="awesome">Test</div>').trim())
@@ -131,7 +137,31 @@ describe('htmltojsx', function() {
       expect(converter.convert('<label for="potato">Test</label>').trim())
         .toBe('<label htmlFor="potato">Test</label>');
     });
-
+
+	it('should convert "maxlength" attribute to "maxLength"', function() {
+      var converter = new HTMLtoJSX({ createClass: false });
+      expect(converter.convert('<input maxlength=2></input>').trim())
+        .toBe('<input maxLength={2} />');
+    });
+
+	it('should convert "http-equiv" attribute to "httpEquiv"', function() {
+      var converter = new HTMLtoJSX({ createClass: false });
+      expect(converter.convert('<meta http-equiv="refresh">').trim())
+        .toBe('<meta httpEquiv="refresh" />');
+    });
+
+	it('should convert "accept-charset" attribute to "acceptCharset"', function() {
+      var converter = new HTMLtoJSX({ createClass: false });
+      expect(converter.convert('<form accept-charset="UTF-8">Test</form>').trim())
+        .toBe('<form acceptCharset="UTF-8">Test</form>');
+    });
+
+	it('should convert "enctype" attribute to "encType"', function() {
+      var converter = new HTMLtoJSX({ createClass: false });
+      expect(converter.convert('<form method="post" enctype="application/x-www-form-urlencoded">Test</form>').trim())
+        .toBe('<form method="post" encType="application/x-www-form-urlencoded">Test</form>');
+    });
+
     it('should maintain value-less attributes', function() {
       var converter = new HTMLtoJSX({ createClass: false });
       expect(converter.convert('<input disabled>').trim())