Refactor to externalize some code

Closes GH-10.

Reviewed-by: Titus Wormer <[email protected]>

Author: remcohaszing

lib/handlers/element.js

@@ -13,11 +13,10 @@ import {stringify as commas} from 'comma-separated-tokens'
 import {name as identifierName} from 'estree-util-is-identifier-name'
 import {find, hastToReact, svg} from 'property-information'
 import {stringify as spaces} from 'space-separated-tokens'
-import styleToObject from 'style-to-object'
+import styleToJs from 'style-to-js'
 
 const own = {}.hasOwnProperty
 const cap = /[A-Z]/g
-const dashSomething = /-([a-z])/g
 
 const tableCellElement = new Set(['td', 'th'])
 
@@ -230,11 +229,8 @@ export function element(node, state) {
  *   Properties.
  */
 function parseStyle(value, tagName) {
-  /** @type {Record<string, string>} */
-  const result = {}
-
   try {
-    styleToObject(value, iterator)
+    return styleToJs(value, {reactCompat: true})
   } catch (error) {
     const cause = /** @type {Error} */ (error)
     const exception = new Error(
@@ -243,30 +239,6 @@ function parseStyle(value, tagName) {
     )
     throw exception
   }
-
-  return result
-
-  /**
-   * Add `name`, as a CSS property, to `result`.
-   *
-   * @param {string} name
-   *   Key.
-   * @param {string} value
-   *   Value.
-   * @returns {undefined}
-   *   Nothing.
-   */
-  function iterator(name, value) {
-    let key = name
-
-    if (key.slice(0, 2) !== '--') {
-      // See: <https://alanhogan.com/code/vendor-prefixed-css-property-names-in-javascript>
-      if (key.slice(0, 4) === '-ms-') key = 'ms-' + key.slice(4)
-      key = key.replace(dashSomething, toCamel)
-    }
-
-    result[key] = value
-  }
 }
 
 /**
@@ -303,20 +275,6 @@ function transformStyleToCssCasing(from) {
   return to
 }
 
-/**
- * Make `$1` capitalized.
- *
- * @param {string} _
- *   Whatever.
- * @param {string} $1
- *   Single ASCII alphabetical.
- * @returns {string}
- *   Capitalized `$1`.
- */
-function toCamel(_, $1) {
-  return $1.toUpperCase()
-}
-
 /**
  * Make `$0` dash cased.
  *

package.json

@@ -18,7 +18,7 @@
     "mdast-util-mdxjs-esm": "^2.0.0",
     "property-information": "^7.0.0",
     "space-separated-tokens": "^2.0.0",
-    "style-to-object": "^1.0.0",
+    "style-to-js": "^1.0.0",
     "unist-util-position": "^5.0.0",
     "zwitch": "^2.0.0"
   },