camelCase CSS property to kebab-case

React style objects use camelCase, real CSS uses kebab-case, and any code that writes a stylesheet or a cssText string has to convert between them. The vendor prefixes are where naive implementations break.

Implement toKebabCase(prop). The base rule: replace every uppercase letter with a - followed by its lowercase form, so backgroundColor becomes background-color.

Two special cases. A property whose first character is uppercase is a vendor-prefixed property, so the base rule naturally produces a leading dash: WebkitLineClamp becomes -webkit-line-clamp. A property beginning with the lowercase letters ms followed by an uppercase letter is the Microsoft prefix and also needs a leading dash added, so msGridRow becomes -ms-grid-row. A custom property beginning with -- is returned exactly as given, and a name with no uppercase letters is returned unchanged.

What it has to do

• Insert a - before every uppercase letter and lowercase it.
• Produce a leading - for properties starting with an uppercase letter, such as WebkitTransform.
• Add a leading - for the ms prefix, so msGridRow becomes -ms-grid-row.
• Return custom properties starting with -- untouched.
• Return a name that is already lowercase unchanged.

Your workspace