Merge pull request #9 from AkeemMcLennon/master

Use native CSS parsing
bitinn · Mar 20, 2016 · e348db4 · e348db4
2 parents 807d6ee + e9ccd1a
commit e348db4
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 deletions.
diff --git a/dist.js b/dist.js
@@ -37,7 +37,7 @@ function parser(el, attr) {
 
 		// most tags default to body
 		if (doc.body.firstChild) {
-			el = doc.body.firstChild;
+			el = doc.getElementsByTagName('body')[0].firstChild;
 
 		// some tags, like script and style, default to head
 		} else if (doc.head.firstChild && (doc.head.firstChild.tagName !== 'TITLE' || doc.title)) {
@@ -147,7 +147,17 @@ function createProperties(el) {
 
 	var attr;
 	for (var i = 0; i < el.attributes.length; i++) {
-		if (ns) {
+		// Use built in CSS style parsing
+		if(el.attributes[i].name == 'style'){
+			var style = el.style;
+			var output = {};
+			for (var i = 0; i < style.length; ++i) {
+				var item = style.item(i);
+				output[item] = style[item];
+			}
+			attr = {name: 'style', value: output};
+		}
+		else if (ns) {
 			attr = createPropertyNS(el.attributes[i]);
 		} else {
 			attr = createProperty(el.attributes[i]);
@@ -192,20 +202,8 @@ function createProperty(attr) {
 	} else {
 		name = attr.name;
 	}
-
-	// special cases for style attribute, we default to properties.style
-	if (name === 'style') {
-		var style = {};
-		attr.value.split(';').forEach(function (s) {
-			var pos = s.indexOf(':');
-			if (pos < 0) {
-				return;
-			}
-			style[s.substr(0, pos).trim()] = s.substr(pos + 1).trim();
-		});
-		value = style;
 	// special cases for data attribute, we default to properties.attributes.data
-	} else if (name.indexOf('data-') === 0) {
+	if (name.indexOf('data-') === 0) {
 		value = attr.value;
 		isAttr = true;
 	} else {

diff --git a/index.js b/index.js
@@ -40,7 +40,7 @@ function parser(el, attr) {
 
 		// most tags default to body
 		if (doc.body.firstChild) {
-			el = doc.body.firstChild;
+			el = doc.getElementsByTagName('body')[0].firstChild;
 
 		// some tags, like script and style, default to head
 		} else if (doc.head.firstChild && (doc.head.firstChild.tagName !== 'TITLE' || doc.title)) {
@@ -150,7 +150,17 @@ function createProperties(el) {
 
 	var attr;
 	for (var i = 0; i < el.attributes.length; i++) {
-		if (ns) {
+		// Use built in CSS style parsing
+		if(el.attributes[i].name == 'style'){
+			var style = el.style;
+			var output = {};
+			for (var i = 0; i < style.length; ++i) {
+				var item = style.item(i);
+				output[item] = style[item];
+			}
+			attr = {name: 'style', value: output};
+		}
+		else if (ns) {
 			attr = createPropertyNS(el.attributes[i]);
 		} else {
 			attr = createProperty(el.attributes[i]);
@@ -195,20 +205,8 @@ function createProperty(attr) {
 	} else {
 		name = attr.name;
 	}
-
-	// special cases for style attribute, we default to properties.style
-	if (name === 'style') {
-		var style = {};
-		attr.value.split(';').forEach(function (s) {
-			var pos = s.indexOf(':');
-			if (pos < 0) {
-				return;
-			}
-			style[s.substr(0, pos).trim()] = s.substr(pos + 1).trim();
-		});
-		value = style;
 	// special cases for data attribute, we default to properties.attributes.data
-	} else if (name.indexOf('data-') === 0) {
+	if (name.indexOf('data-') === 0) {
 		value = attr.value;
 		isAttr = true;
 	} else {

diff --git a/test/test.js b/test/test.js
@@ -184,18 +184,30 @@ describe('vdom-parser', function () {
 	});
 
 	it('should parse bracket style attribute on node', function () {
-		input = '<div style="color: red; width: 100px; background-url: url(test.jpg)">test</div>';
+		input = '<div style="color: red; width: 100px; background-image: url(test.jpg)">test</div>';
 		output = parser(input);
 
 		expect(output.type).to.equal('VirtualNode');
 		expect(output.tagName).to.equal('DIV');
 		expect(output.properties.style).to.eql({
 			color: 'red'
 			, width: '100px'
-			, 'background-url': 'url(test.jpg)'
+			, 'background-image': 'url(test.jpg)'
 		});
 	});
 
+	it('should parse base64 encoded styles on node', function () {
+		var background = 'url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)';
+		input = '<div style="background-image: ' + background + '">test</div>';
+		output = parser(input);
+		expect(output.type).to.equal('VirtualNode');
+		expect(output.tagName).to.equal('DIV');
+		expect(output.properties.style).to.eql({
+			'background-image': background
+		});
+	});
+
+
 	it('should parse data attribute on node', function () {
 		input = '<div data-my-attr="abc">test</div>';
 		output = parser(input);