Parse inline CSS into a style object

Pasted markup, a WYSIWYG editor's output, or a legacy template all hand you inline CSS as text. To hand it to React you need it as a camelCased object, and to merge it with your own styles you need the cascade rules right.

Implement cssTextToObject(cssText). Split the text on ; and trim each declaration, skipping empty ones. Split each declaration on its **first** : so a value containing a colon survives, then trim both sides. Skip any declaration with no :, an empty property name, or an empty value.

Convert the property name to camelCase by uppercasing the character after each - and removing the -. A name starting with -- is a custom property and is used exactly as written. Otherwise a single leading - is dropped first, so -webkit-transform becomes webkitTransform.

Values are always kept as trimmed strings, never converted to numbers, so margin: 0 gives "0". If the same property is declared twice, the last declaration wins, as it does in CSS. An empty input returns {}.

What it has to do

• Split declarations on ; and each declaration on its first : only.
• Skip malformed declarations: no colon, empty name, or empty value.
• camelCase kebab names, keep --custom properties verbatim, and drop a single leading - before camelCasing.
• Keep every value as a trimmed string.
• Let the last declaration of a repeated property win, and return {} for empty input.

Your workspace