diff --git a/index.js b/index.js index e06ed78..43ac8bf 100644 --- a/index.js +++ b/index.js @@ -208,23 +208,44 @@ function vdom(h) { return false; } -function parseStyle(value) { +function parseStyle(styleStr) { var result = {}; - var declarations = value.split(';'); - var length = declarations.length; + var openParens = 0; + var insideString = false; + var key = ''; + var buffer = ''; var index = -1; - var declaration; - var prop; - var pos; - while (++index < length) { - declaration = declarations[index]; - pos = declaration.indexOf(':'); - if (pos !== -1) { - prop = camelCase(trim(declaration.slice(0, pos))); - result[prop] = trim(declaration.slice(pos + 1)); + while (++index < styleStr.length) { + if (openParens === 0 && !insideString && styleStr[index] === ';') { + if (key !== '') { + result[camelCase(trim(key))] = trim(buffer); + key = ''; + } + buffer = ''; + } else if (openParens === 0 && !insideString && styleStr[index] === ':') { + key = buffer; + buffer = ''; + } else { + buffer += styleStr[index]; + switch (styleStr[index]) { + case '(': + ++openParens; + break; + case ')': + --openParens; + break; + case '\'': + insideString = !insideString; + break; + default: + // Do nothing + } } } + if (key !== '' && buffer !== '') { + result[camelCase(trim(key))] = trim(buffer); + } return result; } diff --git a/test.js b/test.js index 709a0ef..42ea57f 100644 --- a/test.js +++ b/test.js @@ -271,6 +271,12 @@ test('hast-to-hyperscript', function (t) { 'react: should parse an invalid style declaration' ); + st.deepEqual( + toH(r, u('element', {tagName: 'div', properties: {style: 'background-image: url(\'data:image/gif;base64,XXX\'); background: url(data:image/gif;base64,XXX)'}})).props.style, + {backgroundImage: 'url(\'data:image/gif;base64,XXX\')', background: 'url(data:image/gif;base64,XXX)'}, + 'react: should parse a style declaration with semicolons inside strings' + ); + st.deepEqual( toH(r, u('element', {tagName: 'div', properties: { 'camel-case': 'on off',