Use style-to-js

lib/index.js

@@ -15,7 +15,7 @@ import {name as isIdentifierName} from 'estree-util-is-identifier-name'
 import {whitespace} from 'hast-util-whitespace'
 import {find, hastToReact, html, svg} from 'property-information'
 import {stringify as spaces} from 'space-separated-tokens'
-import styleToObject from 'style-to-object'
+import styleToJs from 'style-to-js'
 import {pointStart} from 'unist-util-position'
 import {VFileMessage} from 'vfile-message'
 
@@ -26,7 +26,6 @@ const own = {}.hasOwnProperty
 const emptyMap = new Map()
 
 const cap = /[A-Z]/g
-const dashSomething = /-([a-z])/g
 
 // `react-dom` triggers a warning for *any* white space in tables.
 // To follow GFM, `mdast-util-to-hast` injects line endings between elements.
@@ -635,49 +634,24 @@ function createProperty(state, prop, value) {
  *   Throws `VFileMessage` when CSS cannot be parsed.
  */
 function parseStyle(state, value) {
-  /** @type {Style} */
-  const result = {}
-
   try {
-    styleToObject(value, replacer)
+    return styleToJs(value, {reactCompat: true})
   } catch (error) {
-    if (!state.ignoreInvalidStyle) {
-      const cause = /** @type {Error} */ (error)
-      const message = new VFileMessage('Cannot parse `style` attribute', {
-        ancestors: state.ancestors,
-        cause,
-        ruleId: 'style',
-        source: 'hast-util-to-jsx-runtime'
-      })
-      message.file = state.filePath || undefined
-      message.url = docs + '#cannot-parse-style-attribute'
-
-      throw message
+    if (state.ignoreInvalidStyle) {
+      return {}
     }
-  }
 
-  return result
-
-  /**
-   * Add a CSS property (normal, so with dashes) to `result` as a DOM CSS
-   * property.
-   *
-   * @param {string} name
-   *   Key.
-   * @param {string} value
-   *   Value
-   * @returns {undefined}
-   *   Nothing.
-   */
-  function replacer(name, value) {
-    let key = name
-
-    if (key.slice(0, 2) !== '--') {
-      if (key.slice(0, 4) === '-ms-') key = 'ms-' + key.slice(4)
-      key = key.replace(dashSomething, toCamel)
-    }
+    const cause = /** @type {Error} */ (error)
+    const message = new VFileMessage('Cannot parse `style` attribute', {
+      ancestors: state.ancestors,
+      cause,
+      ruleId: 'style',
+      source: 'hast-util-to-jsx-runtime'
+    })
+    message.file = state.filePath || undefined
+    message.url = docs + '#cannot-parse-style-attribute'
 
-    result[key] = value
+    throw message
   }
 }
 
@@ -800,20 +774,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

@@ -17,7 +17,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",
     "vfile-message": "^4.0.0"
   },