diff --git a/lib/index.js b/lib/index.js index 603f04f..c81fcd2 100644 --- a/lib/index.js +++ b/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. * diff --git a/package.json b/package.json index b93e3ac..40bfaa4 100644 --- a/package.json +++ b/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" },