From cccde8c35b1090ac96c8073fa0d53efed649a916 Mon Sep 17 00:00:00 2001
From: Chris Andrejewski <christopher.andrejewski@gmail.com>
Date: Sat, 23 Sep 2017 10:47:53 -0400
Subject: [PATCH] Fix to handle colons in CSS values

---
 docs/dist/himalaya.js     |  2 +-
 docs/dist/himalaya.js.map |  2 +-
 src/formats/v0.js         |  2 +-
 test/formats/v0.js        | 19 +++++++++++++++++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/docs/dist/himalaya.js b/docs/dist/himalaya.js
index 10f63c3..496d699 100644
--- a/docs/dist/himalaya.js
+++ b/docs/dist/himalaya.js
@@ -147,7 +147,7 @@ function formatAttributes(attributes) {
 
 function formatStyles(str) {
   return str.trim().split(';').map(function (rule) {
-    return rule.trim().split(':');
+    return splitHead(rule.trim(), ':');
   }).reduce(function (styles, keyValue) {
     var _keyValue = _slicedToArray(keyValue, 2),
         rawKey = _keyValue[0],
diff --git a/docs/dist/himalaya.js.map b/docs/dist/himalaya.js.map
index 1afe52e..8716ab5 100644
--- a/docs/dist/himalaya.js.map
+++ b/docs/dist/himalaya.js.map
@@ -1 +1 @@
-{"version":3,"names":[],"mappings":"","sources":["himalaya.js"],"sourcesContent":["(function(f){if(typeof exports===\"object\"&&typeof module!==\"undefined\"){module.exports=f()}else if(typeof define===\"function\"&&define.amd){define([],f)}else{var g;if(typeof window!==\"undefined\"){g=window}else if(typeof global!==\"undefined\"){g=global}else if(typeof self!==\"undefined\"){g=self}else{g=this}g.himalaya = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.startsWith = startsWith;\nexports.endsWith = endsWith;\nexports.stringIncludes = stringIncludes;\nexports.isRealNaN = isRealNaN;\nexports.arrayIncludes = arrayIncludes;\n/*\n  We don't want to include babel-polyfill in our project.\n    - Library authors should be using babel-runtime for non-global polyfilling\n    - Adding babel-polyfill/-runtime increases bundle size significantly\n\n  We will include our polyfill instance methods as regular functions.\n*/\n\nfunction startsWith(str, searchString, position) {\n  return str.substr(position || 0, searchString.length) === searchString;\n}\n\nfunction endsWith(str, searchString, position) {\n  var index = (position || str.length) - searchString.length;\n  var lastIndex = str.lastIndexOf(searchString, index);\n  return lastIndex !== -1 && lastIndex === index;\n}\n\nfunction stringIncludes(str, searchString, position) {\n  return str.indexOf(searchString, position || 0) !== -1;\n}\n\nfunction isRealNaN(x) {\n  return typeof x === 'number' && isNaN(x);\n}\n\nfunction arrayIncludes(array, searchElement, position) {\n  var len = array.length;\n  if (len === 0) return false;\n\n  var lookupIndex = position | 0;\n  var isNaNElement = isRealNaN(searchElement);\n  var searchIndex = lookupIndex >= 0 ? lookupIndex : len + lookupIndex;\n  while (searchIndex < len) {\n    var element = array[searchIndex++];\n    if (element === searchElement) return true;\n    if (isNaNElement && isRealNaN(element)) return true;\n  }\n\n  return false;\n}\n\n},{}],2:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }(); /*\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           This format adheres to the v0 ASP spec.\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         */\n\n\nexports.default = format;\nexports.capitalize = capitalize;\nexports.camelCase = camelCase;\nexports.castValue = castValue;\nexports.unquote = unquote;\nexports.splitHead = splitHead;\nexports.formatAttributes = formatAttributes;\nexports.formatStyles = formatStyles;\n\nvar _compat = require('../compat');\n\nfunction format(nodes) {\n  return nodes.map(function (node) {\n    var type = capitalize(node.type);\n    if (type === 'Element') {\n      var tagName = node.tagName.toLowerCase();\n      var attributes = formatAttributes(node.attributes);\n      var children = format(node.children);\n      return { type: type, tagName: tagName, attributes: attributes, children: children };\n    }\n\n    return { type: type, content: node.content };\n  });\n}\n\nfunction capitalize(str) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nfunction camelCase(str) {\n  return str.split('-').reduce(function (str, word) {\n    return str + word.charAt(0).toUpperCase() + word.slice(1);\n  });\n}\n\nfunction castValue(str) {\n  if (typeof str !== 'string') return str;\n  if (str === '') return str;\n  var num = +str;\n  if (!isNaN(num)) return num;\n  return str;\n}\n\nfunction unquote(str) {\n  var car = str.charAt(0);\n  var end = str.length - 1;\n  var isQuoteStart = car === '\"' || car === \"'\";\n  if (isQuoteStart && car === str.charAt(end)) {\n    return str.slice(1, end);\n  }\n  return str;\n}\n\nfunction splitHead(str, sep) {\n  var idx = str.indexOf(sep);\n  if (idx === -1) return [str];\n  return [str.slice(0, idx), str.slice(idx + sep.length)];\n}\n\nfunction formatAttributes(attributes) {\n  return attributes.reduce(function (attrs, pair) {\n    var _splitHead = splitHead(pair.trim(), '='),\n        _splitHead2 = _slicedToArray(_splitHead, 2),\n        key = _splitHead2[0],\n        value = _splitHead2[1];\n\n    value = value ? unquote(value) : key;\n    if (key === 'class') {\n      attrs.className = value.split(' ');\n    } else if (key === 'style') {\n      attrs.style = formatStyles(value);\n    } else if ((0, _compat.startsWith)(key, 'data-')) {\n      attrs.dataset = attrs.dataset || {};\n      var prop = camelCase(key.slice(5));\n      attrs.dataset[prop] = castValue(value);\n    } else {\n      attrs[camelCase(key)] = castValue(value);\n    }\n    return attrs;\n  }, {});\n}\n\nfunction formatStyles(str) {\n  return str.trim().split(';').map(function (rule) {\n    return rule.trim().split(':');\n  }).reduce(function (styles, keyValue) {\n    var _keyValue = _slicedToArray(keyValue, 2),\n        rawKey = _keyValue[0],\n        rawValue = _keyValue[1];\n\n    if (rawValue) {\n      var key = camelCase(rawKey.trim());\n      var value = castValue(rawValue.trim());\n      styles[key] = value;\n    }\n    return styles;\n  }, {});\n}\n\n},{\"../compat\":1}],3:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.parseDefaults = undefined;\nexports.parse = parse;\n\nvar _lexer = require('./lexer');\n\nvar _lexer2 = _interopRequireDefault(_lexer);\n\nvar _parser = require('./parser');\n\nvar _parser2 = _interopRequireDefault(_parser);\n\nvar _v = require('./formats/v0');\n\nvar _v2 = _interopRequireDefault(_v);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n/*\n  Tags which contain arbitrary non-parsed content\n  For example: <script> JavaScript should not be parsed\n*/\nvar childlessTags = ['style', 'script', 'template'];\n\n/*\n  Tags which auto-close because they cannot be nested\n  For example: <p>Outer<p>Inner is <p>Outer</p><p>Inner</p>\n*/\nvar closingTags = ['html', 'head', 'body', 'p', 'dt', 'dd', 'li', 'option', 'thead', 'th', 'tbody', 'tr', 'td', 'tfoot', 'colgroup'];\n\n/*\n  Closing tags which have ancestor tags which\n  may exist within them which prevent the\n  closing tag from auto-closing.\n  For example: in <li><ul><li></ul></li>,\n  the top-level <li> should not auto-close.\n*/\nvar closingTagAncestorBreakers = {\n  li: ['ul', 'ol', 'menu'],\n  dt: ['dl'],\n  dd: ['dl'],\n  tbody: ['table'],\n  thead: ['table'],\n  tfoot: ['table'],\n  tr: ['table'],\n  td: ['table']\n};\n\n/*\n  Tags which do not need the closing tag\n  For example: <img> does not need </img>\n*/\nvar voidTags = ['!doctype', 'area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];\n\nvar parseDefaults = exports.parseDefaults = {\n  voidTags: voidTags,\n  closingTags: closingTags,\n  closingTagAncestorBreakers: closingTagAncestorBreakers,\n  childlessTags: childlessTags,\n  format: _v2.default // transform for v0 spec\n};\n\nfunction parse(str) {\n  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : parseDefaults;\n\n  var tokens = (0, _lexer2.default)(str, options);\n  var nodes = (0, _parser2.default)(tokens, options);\n  return (0, _v2.default)(nodes, options);\n}\n\nexports.default = { parse: parse, parseDefaults: parseDefaults };\n\n},{\"./formats/v0\":2,\"./lexer\":4,\"./parser\":5}],4:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = lexer;\nexports.lex = lex;\nexports.lexText = lexText;\nexports.lexComment = lexComment;\nexports.lexTag = lexTag;\nexports.isWhitespaceChar = isWhitespaceChar;\nexports.lexTagName = lexTagName;\nexports.lexTagAttributes = lexTagAttributes;\nexports.lexSkipTag = lexSkipTag;\n\nvar _compat = require('./compat');\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction lexer(str, options) {\n  var state = { str: str, options: options, cursor: 0, tokens: [] };\n  lex(state);\n  return state.tokens;\n}\n\nfunction lex(state) {\n  var str = state.str;\n\n  var len = str.length;\n  while (state.cursor < len) {\n    var isText = str.charAt(state.cursor) !== '<';\n    if (isText) {\n      lexText(state);\n      continue;\n    }\n\n    var isComment = (0, _compat.startsWith)(str, '!--', state.cursor + 1);\n    if (isComment) {\n      lexComment(state);\n      continue;\n    }\n\n    var tagName = lexTag(state);\n    if (tagName) {\n      var safeTag = tagName.toLowerCase();\n      var childlessTags = state.options.childlessTags;\n\n      if ((0, _compat.arrayIncludes)(childlessTags, safeTag)) {\n        lexSkipTag(tagName, state);\n      }\n    }\n  }\n}\n\nfunction lexText(state) {\n  var str = state.str,\n      cursor = state.cursor;\n\n  var textEnd = str.indexOf('<', cursor);\n  var type = 'text';\n  if (textEnd === -1) {\n    // there is only text left\n    var _content = str.slice(cursor);\n    state.cursor = str.length;\n    state.tokens.push({ type: type, content: _content });\n    return;\n  }\n\n  if (textEnd === cursor) return;\n\n  var content = str.slice(cursor, textEnd);\n  state.cursor = textEnd;\n  state.tokens.push({ type: type, content: content });\n}\n\nfunction lexComment(state) {\n  state.cursor += 4; // \"<!--\".length\n  var str = state.str,\n      cursor = state.cursor;\n\n  var commentEnd = str.indexOf('-->', cursor);\n  var type = 'comment';\n  if (commentEnd === -1) {\n    // there is only the comment left\n    var _content2 = str.slice(cursor);\n    state.cursor = str.length;\n    state.tokens.push({ type: type, content: _content2 });\n    return;\n  }\n\n  var content = str.slice(cursor, commentEnd);\n  state.cursor = commentEnd + 3; // \"-->\".length\n  state.tokens.push({ type: type, content: content });\n}\n\nfunction lexTag(state) {\n  var str = state.str;\n\n  {\n    var secondChar = str.charAt(state.cursor + 1);\n    var close = secondChar === '/';\n    state.tokens.push({ type: 'tag-start', close: close });\n    state.cursor += close ? 2 : 1;\n  }\n  var tagName = lexTagName(state);\n  lexTagAttributes(state);\n  {\n    var firstChar = str.charAt(state.cursor);\n    var _close = firstChar === '/';\n    state.tokens.push({ type: 'tag-end', close: _close });\n    state.cursor += _close ? 2 : 1;\n  }\n  return tagName;\n}\n\n// There is one regex for whitespace.\n// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-white-space\nvar whitespace = /\\s/;\nfunction isWhitespaceChar(char) {\n  return whitespace.test(char);\n}\n\nfunction lexTagName(state) {\n  var str = state.str,\n      cursor = state.cursor;\n\n  var len = str.length;\n  var start = cursor;\n  while (start < len) {\n    var char = str.charAt(start);\n    var isTagChar = !(isWhitespaceChar(char) || char === '/' || char === '>');\n    if (isTagChar) break;\n    start++;\n  }\n\n  var end = start + 1;\n  while (end < len) {\n    var _char = str.charAt(end);\n    var _isTagChar = !(isWhitespaceChar(_char) || _char === '/' || _char === '>');\n    if (!_isTagChar) break;\n    end++;\n  }\n\n  state.cursor = end;\n  var tagName = str.slice(start, end);\n  state.tokens.push({ type: 'tag', content: tagName });\n  return tagName;\n}\n\nfunction lexTagAttributes(state) {\n  var str = state.str,\n      tokens = state.tokens;\n\n  var cursor = state.cursor;\n  var quote = null; // null, single-, or double-quote\n  var wordBegin = cursor; // index of word start\n  var words = []; // \"key\", \"key=value\", \"key='value'\", etc\n  var len = str.length;\n  while (cursor < len) {\n    var char = str.charAt(cursor);\n    if (quote) {\n      var isQuoteEnd = char === quote;\n      if (isQuoteEnd) {\n        quote = null;\n      }\n      cursor++;\n      continue;\n    }\n\n    var isTagEnd = char === '/' || char === '>';\n    if (isTagEnd) {\n      if (cursor !== wordBegin) {\n        words.push(str.slice(wordBegin, cursor));\n      }\n      break;\n    }\n\n    var isWordEnd = isWhitespaceChar(char);\n    if (isWordEnd) {\n      if (cursor !== wordBegin) {\n        words.push(str.slice(wordBegin, cursor));\n      }\n      wordBegin = cursor + 1;\n      cursor++;\n      continue;\n    }\n\n    var isQuoteStart = char === '\\'' || char === '\"';\n    if (isQuoteStart) {\n      quote = char;\n      cursor++;\n      continue;\n    }\n\n    cursor++;\n  }\n  state.cursor = cursor;\n\n  var wLen = words.length;\n  var type = 'attribute';\n  for (var i = 0; i < wLen; i++) {\n    var word = words[i];\n    if (!(word && word.length)) continue;\n    var isNotPair = word.indexOf('=') === -1;\n    if (isNotPair) {\n      var secondWord = words[i + 1];\n      if (secondWord && (0, _compat.startsWith)(secondWord, '=')) {\n        if (secondWord.length > 1) {\n          var newWord = word + secondWord;\n          tokens.push({ type: type, content: newWord });\n          i += 1;\n          continue;\n        }\n        var thirdWord = words[i + 2];\n        i += 1;\n        if (thirdWord) {\n          var _newWord = word + '=' + thirdWord;\n          tokens.push({ type: type, content: _newWord });\n          i += 1;\n          continue;\n        }\n      }\n    }\n    if ((0, _compat.endsWith)(word, '=')) {\n      var _secondWord = words[i + 1];\n      if (_secondWord && !(0, _compat.stringIncludes)(_secondWord, '=')) {\n        var _newWord3 = word + _secondWord;\n        tokens.push({ type: type, content: _newWord3 });\n        i += 1;\n        continue;\n      }\n\n      var _newWord2 = word.slice(0, -1);\n      tokens.push({ type: type, content: _newWord2 });\n      continue;\n    }\n\n    tokens.push({ type: type, content: word });\n  }\n}\n\nfunction lexSkipTag(tagName, state) {\n  var str = state.str,\n      cursor = state.cursor,\n      tokens = state.tokens;\n\n  var len = str.length;\n  var index = cursor;\n  while (index < len) {\n    var nextTag = str.indexOf('</', index);\n    if (nextTag === -1) {\n      lexText(state);\n      break;\n    }\n\n    var tagState = { str: str, cursor: nextTag + 2, tokens: [] };\n    var name = lexTagName(tagState);\n    var safeTagName = tagName.toLowerCase();\n    if (safeTagName !== name.toLowerCase()) {\n      index = tagState.cursor;\n      continue;\n    }\n\n    var content = str.slice(cursor, nextTag);\n    tokens.push({ type: 'text', content: content });\n    var openTag = { type: 'tag-start', close: true };\n    var closeTag = { type: 'tag-end', close: false };\n    lexTagAttributes(tagState);\n    tokens.push.apply(tokens, [openTag].concat(_toConsumableArray(tagState.tokens), [closeTag]));\n    state.cursor = tagState.cursor + 1;\n    break;\n  }\n}\n\n},{\"./compat\":1}],5:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = parser;\nexports.hasTerminalParent = hasTerminalParent;\nexports.parse = parse;\n\nvar _compat = require('./compat');\n\nfunction parser(tokens, options) {\n  var root = { tagName: null, children: [] };\n  var state = { tokens: tokens, options: options, cursor: 0, stack: [root] };\n  parse(state);\n  return root.children;\n}\n\nfunction hasTerminalParent(tagName, stack, terminals) {\n  var tagParents = terminals[tagName];\n  if (tagParents) {\n    var currentIndex = stack.length - 1;\n    while (currentIndex >= 0) {\n      var parentTagName = stack[currentIndex].tagName;\n      if (parentTagName === tagName) {\n        break;\n      }\n      if ((0, _compat.arrayIncludes)(tagParents, parentTagName)) {\n        return true;\n      }\n      currentIndex--;\n    }\n  }\n  return false;\n}\n\nfunction parse(state) {\n  var tokens = state.tokens,\n      options = state.options;\n  var stack = state.stack;\n\n  var nodes = stack[stack.length - 1].children;\n  var len = tokens.length;\n  var cursor = state.cursor;\n\n  while (cursor < len) {\n    var token = tokens[cursor];\n    if (token.type !== 'tag-start') {\n      nodes.push(token);\n      cursor++;\n      continue;\n    }\n\n    var tagToken = tokens[++cursor];\n    cursor++;\n    var tagName = tagToken.content.toLowerCase();\n    if (token.close) {\n      var item = void 0;\n      while (item = stack.pop()) {\n        if (tagName === item.tagName) break;\n      }\n      while (cursor < len) {\n        var endToken = tokens[cursor];\n        if (endToken.type !== 'tag-end') break;\n        cursor++;\n      }\n      break;\n    }\n\n    var isClosingTag = (0, _compat.arrayIncludes)(options.closingTags, tagName);\n    var shouldRewindToAutoClose = isClosingTag;\n    if (shouldRewindToAutoClose) {\n      var terminals = options.closingTagAncestorBreakers;\n\n      shouldRewindToAutoClose = !hasTerminalParent(tagName, stack, terminals);\n    }\n\n    if (shouldRewindToAutoClose) {\n      // rewind the stack to just above the previous\n      // closing tag of the same name\n      var currentIndex = stack.length - 1;\n      while (currentIndex > 0) {\n        if (tagName === stack[currentIndex].tagName) {\n          stack = stack.slice(0, currentIndex);\n          var previousIndex = currentIndex - 1;\n          nodes = stack[previousIndex].children;\n          break;\n        }\n        currentIndex = currentIndex - 1;\n      }\n    }\n\n    var attributes = [];\n    var attrToken = void 0;\n    while (cursor < len) {\n      attrToken = tokens[cursor];\n      if (attrToken.type === 'tag-end') break;\n      attributes.push(attrToken.content);\n      cursor++;\n    }\n\n    cursor++;\n    var children = [];\n    nodes.push({\n      type: 'element',\n      tagName: tagToken.content,\n      attributes: attributes,\n      children: children\n    });\n\n    var hasChildren = !(attrToken.close || (0, _compat.arrayIncludes)(options.voidTags, tagName));\n    if (hasChildren) {\n      stack.push({ tagName: tagName, children: children });\n      var innerState = { tokens: tokens, options: options, cursor: cursor, stack: stack };\n      parse(innerState);\n      cursor = innerState.cursor;\n    }\n  }\n  state.cursor = cursor;\n}\n\n},{\"./compat\":1}]},{},[3])(3)\n});"],"file":"himalaya.js"}
\ No newline at end of file
+{"version":3,"names":[],"mappings":"","sources":["himalaya.js"],"sourcesContent":["(function(f){if(typeof exports===\"object\"&&typeof module!==\"undefined\"){module.exports=f()}else if(typeof define===\"function\"&&define.amd){define([],f)}else{var g;if(typeof window!==\"undefined\"){g=window}else if(typeof global!==\"undefined\"){g=global}else if(typeof self!==\"undefined\"){g=self}else{g=this}g.himalaya = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.startsWith = startsWith;\nexports.endsWith = endsWith;\nexports.stringIncludes = stringIncludes;\nexports.isRealNaN = isRealNaN;\nexports.arrayIncludes = arrayIncludes;\n/*\n  We don't want to include babel-polyfill in our project.\n    - Library authors should be using babel-runtime for non-global polyfilling\n    - Adding babel-polyfill/-runtime increases bundle size significantly\n\n  We will include our polyfill instance methods as regular functions.\n*/\n\nfunction startsWith(str, searchString, position) {\n  return str.substr(position || 0, searchString.length) === searchString;\n}\n\nfunction endsWith(str, searchString, position) {\n  var index = (position || str.length) - searchString.length;\n  var lastIndex = str.lastIndexOf(searchString, index);\n  return lastIndex !== -1 && lastIndex === index;\n}\n\nfunction stringIncludes(str, searchString, position) {\n  return str.indexOf(searchString, position || 0) !== -1;\n}\n\nfunction isRealNaN(x) {\n  return typeof x === 'number' && isNaN(x);\n}\n\nfunction arrayIncludes(array, searchElement, position) {\n  var len = array.length;\n  if (len === 0) return false;\n\n  var lookupIndex = position | 0;\n  var isNaNElement = isRealNaN(searchElement);\n  var searchIndex = lookupIndex >= 0 ? lookupIndex : len + lookupIndex;\n  while (searchIndex < len) {\n    var element = array[searchIndex++];\n    if (element === searchElement) return true;\n    if (isNaNElement && isRealNaN(element)) return true;\n  }\n\n  return false;\n}\n\n},{}],2:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }(); /*\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           This format adheres to the v0 ASP spec.\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         */\n\n\nexports.default = format;\nexports.capitalize = capitalize;\nexports.camelCase = camelCase;\nexports.castValue = castValue;\nexports.unquote = unquote;\nexports.splitHead = splitHead;\nexports.formatAttributes = formatAttributes;\nexports.formatStyles = formatStyles;\n\nvar _compat = require('../compat');\n\nfunction format(nodes) {\n  return nodes.map(function (node) {\n    var type = capitalize(node.type);\n    if (type === 'Element') {\n      var tagName = node.tagName.toLowerCase();\n      var attributes = formatAttributes(node.attributes);\n      var children = format(node.children);\n      return { type: type, tagName: tagName, attributes: attributes, children: children };\n    }\n\n    return { type: type, content: node.content };\n  });\n}\n\nfunction capitalize(str) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nfunction camelCase(str) {\n  return str.split('-').reduce(function (str, word) {\n    return str + word.charAt(0).toUpperCase() + word.slice(1);\n  });\n}\n\nfunction castValue(str) {\n  if (typeof str !== 'string') return str;\n  if (str === '') return str;\n  var num = +str;\n  if (!isNaN(num)) return num;\n  return str;\n}\n\nfunction unquote(str) {\n  var car = str.charAt(0);\n  var end = str.length - 1;\n  var isQuoteStart = car === '\"' || car === \"'\";\n  if (isQuoteStart && car === str.charAt(end)) {\n    return str.slice(1, end);\n  }\n  return str;\n}\n\nfunction splitHead(str, sep) {\n  var idx = str.indexOf(sep);\n  if (idx === -1) return [str];\n  return [str.slice(0, idx), str.slice(idx + sep.length)];\n}\n\nfunction formatAttributes(attributes) {\n  return attributes.reduce(function (attrs, pair) {\n    var _splitHead = splitHead(pair.trim(), '='),\n        _splitHead2 = _slicedToArray(_splitHead, 2),\n        key = _splitHead2[0],\n        value = _splitHead2[1];\n\n    value = value ? unquote(value) : key;\n    if (key === 'class') {\n      attrs.className = value.split(' ');\n    } else if (key === 'style') {\n      attrs.style = formatStyles(value);\n    } else if ((0, _compat.startsWith)(key, 'data-')) {\n      attrs.dataset = attrs.dataset || {};\n      var prop = camelCase(key.slice(5));\n      attrs.dataset[prop] = castValue(value);\n    } else {\n      attrs[camelCase(key)] = castValue(value);\n    }\n    return attrs;\n  }, {});\n}\n\nfunction formatStyles(str) {\n  return str.trim().split(';').map(function (rule) {\n    return splitHead(rule.trim(), ':');\n  }).reduce(function (styles, keyValue) {\n    var _keyValue = _slicedToArray(keyValue, 2),\n        rawKey = _keyValue[0],\n        rawValue = _keyValue[1];\n\n    if (rawValue) {\n      var key = camelCase(rawKey.trim());\n      var value = castValue(rawValue.trim());\n      styles[key] = value;\n    }\n    return styles;\n  }, {});\n}\n\n},{\"../compat\":1}],3:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.parseDefaults = undefined;\nexports.parse = parse;\n\nvar _lexer = require('./lexer');\n\nvar _lexer2 = _interopRequireDefault(_lexer);\n\nvar _parser = require('./parser');\n\nvar _parser2 = _interopRequireDefault(_parser);\n\nvar _v = require('./formats/v0');\n\nvar _v2 = _interopRequireDefault(_v);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n/*\n  Tags which contain arbitrary non-parsed content\n  For example: <script> JavaScript should not be parsed\n*/\nvar childlessTags = ['style', 'script', 'template'];\n\n/*\n  Tags which auto-close because they cannot be nested\n  For example: <p>Outer<p>Inner is <p>Outer</p><p>Inner</p>\n*/\nvar closingTags = ['html', 'head', 'body', 'p', 'dt', 'dd', 'li', 'option', 'thead', 'th', 'tbody', 'tr', 'td', 'tfoot', 'colgroup'];\n\n/*\n  Closing tags which have ancestor tags which\n  may exist within them which prevent the\n  closing tag from auto-closing.\n  For example: in <li><ul><li></ul></li>,\n  the top-level <li> should not auto-close.\n*/\nvar closingTagAncestorBreakers = {\n  li: ['ul', 'ol', 'menu'],\n  dt: ['dl'],\n  dd: ['dl'],\n  tbody: ['table'],\n  thead: ['table'],\n  tfoot: ['table'],\n  tr: ['table'],\n  td: ['table']\n};\n\n/*\n  Tags which do not need the closing tag\n  For example: <img> does not need </img>\n*/\nvar voidTags = ['!doctype', 'area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];\n\nvar parseDefaults = exports.parseDefaults = {\n  voidTags: voidTags,\n  closingTags: closingTags,\n  closingTagAncestorBreakers: closingTagAncestorBreakers,\n  childlessTags: childlessTags,\n  format: _v2.default // transform for v0 spec\n};\n\nfunction parse(str) {\n  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : parseDefaults;\n\n  var tokens = (0, _lexer2.default)(str, options);\n  var nodes = (0, _parser2.default)(tokens, options);\n  return (0, _v2.default)(nodes, options);\n}\n\nexports.default = { parse: parse, parseDefaults: parseDefaults };\n\n},{\"./formats/v0\":2,\"./lexer\":4,\"./parser\":5}],4:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = lexer;\nexports.lex = lex;\nexports.lexText = lexText;\nexports.lexComment = lexComment;\nexports.lexTag = lexTag;\nexports.isWhitespaceChar = isWhitespaceChar;\nexports.lexTagName = lexTagName;\nexports.lexTagAttributes = lexTagAttributes;\nexports.lexSkipTag = lexSkipTag;\n\nvar _compat = require('./compat');\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction lexer(str, options) {\n  var state = { str: str, options: options, cursor: 0, tokens: [] };\n  lex(state);\n  return state.tokens;\n}\n\nfunction lex(state) {\n  var str = state.str;\n\n  var len = str.length;\n  while (state.cursor < len) {\n    var isText = str.charAt(state.cursor) !== '<';\n    if (isText) {\n      lexText(state);\n      continue;\n    }\n\n    var isComment = (0, _compat.startsWith)(str, '!--', state.cursor + 1);\n    if (isComment) {\n      lexComment(state);\n      continue;\n    }\n\n    var tagName = lexTag(state);\n    if (tagName) {\n      var safeTag = tagName.toLowerCase();\n      var childlessTags = state.options.childlessTags;\n\n      if ((0, _compat.arrayIncludes)(childlessTags, safeTag)) {\n        lexSkipTag(tagName, state);\n      }\n    }\n  }\n}\n\nfunction lexText(state) {\n  var str = state.str,\n      cursor = state.cursor;\n\n  var textEnd = str.indexOf('<', cursor);\n  var type = 'text';\n  if (textEnd === -1) {\n    // there is only text left\n    var _content = str.slice(cursor);\n    state.cursor = str.length;\n    state.tokens.push({ type: type, content: _content });\n    return;\n  }\n\n  if (textEnd === cursor) return;\n\n  var content = str.slice(cursor, textEnd);\n  state.cursor = textEnd;\n  state.tokens.push({ type: type, content: content });\n}\n\nfunction lexComment(state) {\n  state.cursor += 4; // \"<!--\".length\n  var str = state.str,\n      cursor = state.cursor;\n\n  var commentEnd = str.indexOf('-->', cursor);\n  var type = 'comment';\n  if (commentEnd === -1) {\n    // there is only the comment left\n    var _content2 = str.slice(cursor);\n    state.cursor = str.length;\n    state.tokens.push({ type: type, content: _content2 });\n    return;\n  }\n\n  var content = str.slice(cursor, commentEnd);\n  state.cursor = commentEnd + 3; // \"-->\".length\n  state.tokens.push({ type: type, content: content });\n}\n\nfunction lexTag(state) {\n  var str = state.str;\n\n  {\n    var secondChar = str.charAt(state.cursor + 1);\n    var close = secondChar === '/';\n    state.tokens.push({ type: 'tag-start', close: close });\n    state.cursor += close ? 2 : 1;\n  }\n  var tagName = lexTagName(state);\n  lexTagAttributes(state);\n  {\n    var firstChar = str.charAt(state.cursor);\n    var _close = firstChar === '/';\n    state.tokens.push({ type: 'tag-end', close: _close });\n    state.cursor += _close ? 2 : 1;\n  }\n  return tagName;\n}\n\n// There is one regex for whitespace.\n// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-white-space\nvar whitespace = /\\s/;\nfunction isWhitespaceChar(char) {\n  return whitespace.test(char);\n}\n\nfunction lexTagName(state) {\n  var str = state.str,\n      cursor = state.cursor;\n\n  var len = str.length;\n  var start = cursor;\n  while (start < len) {\n    var char = str.charAt(start);\n    var isTagChar = !(isWhitespaceChar(char) || char === '/' || char === '>');\n    if (isTagChar) break;\n    start++;\n  }\n\n  var end = start + 1;\n  while (end < len) {\n    var _char = str.charAt(end);\n    var _isTagChar = !(isWhitespaceChar(_char) || _char === '/' || _char === '>');\n    if (!_isTagChar) break;\n    end++;\n  }\n\n  state.cursor = end;\n  var tagName = str.slice(start, end);\n  state.tokens.push({ type: 'tag', content: tagName });\n  return tagName;\n}\n\nfunction lexTagAttributes(state) {\n  var str = state.str,\n      tokens = state.tokens;\n\n  var cursor = state.cursor;\n  var quote = null; // null, single-, or double-quote\n  var wordBegin = cursor; // index of word start\n  var words = []; // \"key\", \"key=value\", \"key='value'\", etc\n  var len = str.length;\n  while (cursor < len) {\n    var char = str.charAt(cursor);\n    if (quote) {\n      var isQuoteEnd = char === quote;\n      if (isQuoteEnd) {\n        quote = null;\n      }\n      cursor++;\n      continue;\n    }\n\n    var isTagEnd = char === '/' || char === '>';\n    if (isTagEnd) {\n      if (cursor !== wordBegin) {\n        words.push(str.slice(wordBegin, cursor));\n      }\n      break;\n    }\n\n    var isWordEnd = isWhitespaceChar(char);\n    if (isWordEnd) {\n      if (cursor !== wordBegin) {\n        words.push(str.slice(wordBegin, cursor));\n      }\n      wordBegin = cursor + 1;\n      cursor++;\n      continue;\n    }\n\n    var isQuoteStart = char === '\\'' || char === '\"';\n    if (isQuoteStart) {\n      quote = char;\n      cursor++;\n      continue;\n    }\n\n    cursor++;\n  }\n  state.cursor = cursor;\n\n  var wLen = words.length;\n  var type = 'attribute';\n  for (var i = 0; i < wLen; i++) {\n    var word = words[i];\n    if (!(word && word.length)) continue;\n    var isNotPair = word.indexOf('=') === -1;\n    if (isNotPair) {\n      var secondWord = words[i + 1];\n      if (secondWord && (0, _compat.startsWith)(secondWord, '=')) {\n        if (secondWord.length > 1) {\n          var newWord = word + secondWord;\n          tokens.push({ type: type, content: newWord });\n          i += 1;\n          continue;\n        }\n        var thirdWord = words[i + 2];\n        i += 1;\n        if (thirdWord) {\n          var _newWord = word + '=' + thirdWord;\n          tokens.push({ type: type, content: _newWord });\n          i += 1;\n          continue;\n        }\n      }\n    }\n    if ((0, _compat.endsWith)(word, '=')) {\n      var _secondWord = words[i + 1];\n      if (_secondWord && !(0, _compat.stringIncludes)(_secondWord, '=')) {\n        var _newWord3 = word + _secondWord;\n        tokens.push({ type: type, content: _newWord3 });\n        i += 1;\n        continue;\n      }\n\n      var _newWord2 = word.slice(0, -1);\n      tokens.push({ type: type, content: _newWord2 });\n      continue;\n    }\n\n    tokens.push({ type: type, content: word });\n  }\n}\n\nfunction lexSkipTag(tagName, state) {\n  var str = state.str,\n      cursor = state.cursor,\n      tokens = state.tokens;\n\n  var len = str.length;\n  var index = cursor;\n  while (index < len) {\n    var nextTag = str.indexOf('</', index);\n    if (nextTag === -1) {\n      lexText(state);\n      break;\n    }\n\n    var tagState = { str: str, cursor: nextTag + 2, tokens: [] };\n    var name = lexTagName(tagState);\n    var safeTagName = tagName.toLowerCase();\n    if (safeTagName !== name.toLowerCase()) {\n      index = tagState.cursor;\n      continue;\n    }\n\n    var content = str.slice(cursor, nextTag);\n    tokens.push({ type: 'text', content: content });\n    var openTag = { type: 'tag-start', close: true };\n    var closeTag = { type: 'tag-end', close: false };\n    lexTagAttributes(tagState);\n    tokens.push.apply(tokens, [openTag].concat(_toConsumableArray(tagState.tokens), [closeTag]));\n    state.cursor = tagState.cursor + 1;\n    break;\n  }\n}\n\n},{\"./compat\":1}],5:[function(require,module,exports){\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = parser;\nexports.hasTerminalParent = hasTerminalParent;\nexports.parse = parse;\n\nvar _compat = require('./compat');\n\nfunction parser(tokens, options) {\n  var root = { tagName: null, children: [] };\n  var state = { tokens: tokens, options: options, cursor: 0, stack: [root] };\n  parse(state);\n  return root.children;\n}\n\nfunction hasTerminalParent(tagName, stack, terminals) {\n  var tagParents = terminals[tagName];\n  if (tagParents) {\n    var currentIndex = stack.length - 1;\n    while (currentIndex >= 0) {\n      var parentTagName = stack[currentIndex].tagName;\n      if (parentTagName === tagName) {\n        break;\n      }\n      if ((0, _compat.arrayIncludes)(tagParents, parentTagName)) {\n        return true;\n      }\n      currentIndex--;\n    }\n  }\n  return false;\n}\n\nfunction parse(state) {\n  var tokens = state.tokens,\n      options = state.options;\n  var stack = state.stack;\n\n  var nodes = stack[stack.length - 1].children;\n  var len = tokens.length;\n  var cursor = state.cursor;\n\n  while (cursor < len) {\n    var token = tokens[cursor];\n    if (token.type !== 'tag-start') {\n      nodes.push(token);\n      cursor++;\n      continue;\n    }\n\n    var tagToken = tokens[++cursor];\n    cursor++;\n    var tagName = tagToken.content.toLowerCase();\n    if (token.close) {\n      var item = void 0;\n      while (item = stack.pop()) {\n        if (tagName === item.tagName) break;\n      }\n      while (cursor < len) {\n        var endToken = tokens[cursor];\n        if (endToken.type !== 'tag-end') break;\n        cursor++;\n      }\n      break;\n    }\n\n    var isClosingTag = (0, _compat.arrayIncludes)(options.closingTags, tagName);\n    var shouldRewindToAutoClose = isClosingTag;\n    if (shouldRewindToAutoClose) {\n      var terminals = options.closingTagAncestorBreakers;\n\n      shouldRewindToAutoClose = !hasTerminalParent(tagName, stack, terminals);\n    }\n\n    if (shouldRewindToAutoClose) {\n      // rewind the stack to just above the previous\n      // closing tag of the same name\n      var currentIndex = stack.length - 1;\n      while (currentIndex > 0) {\n        if (tagName === stack[currentIndex].tagName) {\n          stack = stack.slice(0, currentIndex);\n          var previousIndex = currentIndex - 1;\n          nodes = stack[previousIndex].children;\n          break;\n        }\n        currentIndex = currentIndex - 1;\n      }\n    }\n\n    var attributes = [];\n    var attrToken = void 0;\n    while (cursor < len) {\n      attrToken = tokens[cursor];\n      if (attrToken.type === 'tag-end') break;\n      attributes.push(attrToken.content);\n      cursor++;\n    }\n\n    cursor++;\n    var children = [];\n    nodes.push({\n      type: 'element',\n      tagName: tagToken.content,\n      attributes: attributes,\n      children: children\n    });\n\n    var hasChildren = !(attrToken.close || (0, _compat.arrayIncludes)(options.voidTags, tagName));\n    if (hasChildren) {\n      stack.push({ tagName: tagName, children: children });\n      var innerState = { tokens: tokens, options: options, cursor: cursor, stack: stack };\n      parse(innerState);\n      cursor = innerState.cursor;\n    }\n  }\n  state.cursor = cursor;\n}\n\n},{\"./compat\":1}]},{},[3])(3)\n});"],"file":"himalaya.js"}
\ No newline at end of file
diff --git a/src/formats/v0.js b/src/formats/v0.js
index 1c90048..799fc6a 100644
--- a/src/formats/v0.js
+++ b/src/formats/v0.js
@@ -72,7 +72,7 @@ export function formatAttributes (attributes) {
 
 export function formatStyles (str) {
   return str.trim().split(';')
-    .map(rule => rule.trim().split(':'))
+    .map(rule => splitHead(rule.trim(), ':'))
     .reduce((styles, keyValue) => {
       const [rawKey, rawValue] = keyValue
       if (rawValue) {
diff --git a/test/formats/v0.js b/test/formats/v0.js
index 55a09b3..1b61fec 100644
--- a/test/formats/v0.js
+++ b/test/formats/v0.js
@@ -30,3 +30,22 @@ test('formatStyles() should camelCase CSS properties', t => {
   }
   t.deepEqual(data, formatStyles(style))
 })
+
+test('formatStyles() should handle colons in CSS values', t => {
+  const style = 'background-image: url(http://example.com/x.img)'
+  t.deepEqual(formatStyles(style), {
+    backgroundImage: 'url(http://example.com/x.img)'
+  })
+})
+
+test('formatStyles() should preserve quoted values', t => {
+  const doubleStyle = 'content: "hello"'
+  t.deepEqual(formatStyles(doubleStyle), {
+    content: '"hello"'
+  })
+
+  const singleStyle = "content: 'hello'"
+  t.deepEqual(formatStyles(singleStyle), {
+    content: "'hello'"
+  })
+})