Skip to content

Commit 8f2bbd2

Browse files
Merge pull request #45 from ianvieira/master
Fix component style attribute parser
2 parents faad529 + 3ca6681 commit 8f2bbd2

File tree

4 files changed

+25
-43
lines changed

4 files changed

+25
-43
lines changed

lib/attributes-to-props.js

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66
var utilities = require('./utilities');
77
var propertyConfig = require('./property-config');
8+
var styleToObject = require('style-to-object');
89
var config = propertyConfig.config;
910
var isCustomAttribute = propertyConfig.HTMLDOMPropertyConfig.isCustomAttribute;
1011

@@ -63,33 +64,16 @@ function cssToJs(style) {
6364
throw new Error('`cssToJs`: first argument must be a string. ');
6465
}
6566

66-
var result = {};
67-
// e.g., `color: #f00`
68-
var declarations = style.split(';');
69-
// css property itemized as key and value
70-
var properties;
71-
var j;
72-
var propertiesLen;
67+
var styleObj = {};
7368

74-
for (var i = 0, declarationsLen = declarations.length; i < declarationsLen; i++) {
75-
properties = declarations[i].trim().split(':');
76-
77-
// skip if not a css property
78-
if (properties.length !== 2) { continue; }
79-
80-
// css property name
81-
properties[0] = properties[0].trim();
82-
// css property value
83-
properties[1] = properties[1].trim();
84-
85-
if (properties[0] && properties[1]) {
86-
for (j = 0, propertiesLen = properties.length; j < propertiesLen; j++) {
87-
result[utilities.camelCase(properties[0])] = properties[1];
88-
}
69+
styleToObject(style, function(propName, propValue) {
70+
// Check if it's not a comment node
71+
if (propName && propValue) {
72+
styleObj[utilities.camelCase(propName)] = propValue;
8973
}
90-
}
74+
});
9175

92-
return result;
76+
return styleObj;
9377
}
9478

9579
/**

lib/utilities.js

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
'use strict';
22

3+
var _hyphenPattern = /-(.)/g;
4+
35
/**
46
* Convert a string to camel case.
57
*
68
* @param {String} string - The string.
79
* @return {String}
810
*/
911
function camelCase(string) {
10-
if (typeof string !== 'string') {
12+
if (typeof string !== 'string') { // null is an object
1113
throw new TypeError('First argument must be a string');
1214
}
13-
14-
// hyphen found after first character
15-
if (string.indexOf('-') > 0) {
16-
var strings = string.toLowerCase().split('-');
17-
18-
// capitalize starting from the second string item
19-
for (var i = 1, len = strings.length; i < len; i++) {
20-
strings[i] = strings[i].charAt(0).toUpperCase() + strings[i].slice(1);
21-
}
22-
23-
return strings.join('');
15+
if(string.indexOf('-') < 0) {
16+
return string;
2417
}
25-
26-
return string;
18+
return string.toLowerCase().replace(_hyphenPattern, function(_, character) {
19+
return character.toUpperCase();
20+
});
2721
}
2822

2923
/**

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
],
3131
"dependencies": {
3232
"html-dom-parser": "0.1.2",
33-
"react-dom-core": "0.0.2"
33+
"react-dom-core": "0.0.2",
34+
"style-to-object": "0.2.0"
3435
},
3536
"devDependencies": {
3637
"coveralls": "^2.13.1",

test/attributes-to-props.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,27 +160,30 @@ describe('attributes to props helper', function() {
160160
// proper css
161161
assert.deepEqual(
162162
attributesToProps({
163-
style: 'color: #f00; font-size: 42px; z-index: -1;'
163+
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)'
164164
}),
165165
{
166166
style: {
167167
color: '#f00',
168168
fontSize: '42px',
169-
zIndex: '-1'
169+
zIndex: '-1',
170+
MozBorderRadiusTopright: '10px',
171+
background: 'url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)'
170172
}
171173
}
172174
);
173175

174176
// valid but messy
175177
assert.deepEqual(
176178
attributesToProps({
177-
style: 'border-bottom-left-radius:1em;border-right-style:solid;Z-Index:-1'
179+
style: 'border-bottom-left-radius:1em;border-right-style:solid;Z-Index:-1;-moz-border-radius-bottomleft:20px'
178180
}),
179181
{
180182
style: {
181183
borderBottomLeftRadius: '1em',
182184
borderRightStyle: 'solid',
183-
zIndex: '-1'
185+
zIndex: '-1',
186+
MozBorderRadiusBottomleft: '20px'
184187
}
185188
}
186189
);

0 commit comments

Comments
 (0)