Fix CSS vendor-prefixed property serialization

[noisysocks]

Description

I recently merged #7676 which attempted to improve how we handle serialising CSS properties. This PR made wp.element.renderToString() correctly serialise custom attribute properties, but was naive in its handling of elements that contain vendor-prefixed properties.

My confusion was that I didn't realise that, in React, you're supposed to write <div style={ { WebkitTransform: 'none' } }> and not <div style={ { '-webkit-transform': 'none' } }>.

The complete rules, inspired by these relevant React unit tests are:

• Convert regular property names to kebab-case, e.g. backgroundColor → background-color
• Leave custom attributes alone, e.g. --myBackgroundColor → --myBackgroundColor
• Convert vendor-prefixed property names to -kebab-case, e.g. MozTransform → -moz-transform

How has this been tested?

Unit tests have been updated.

You could also create a block that has returns a <div style={ { WebkitTransform: 'none' } }> in its save() function. Gutenberg should correctly save <div style="-webkit-transform:none"> to the post.

[noisysocks]

My confusion was that I didn't realise that, in React, you're supposed to write <div style={ { WebkitTransform: 'none' } }> and not <div style={ { '-webkit-transform': 'none' } }>.

Having said that, I'm not able to get Webkit properties to do anything when I try it in a CodePen…

🤷‍♂️

[tofumatt]

Code and tests make sense; weird that the pens don't work (I tried for WebKit and Moz prefixes in both browsers and got nothing as well).

But if the unit tests work and it's working in the editor that's good enough for me.

[ZebulanStanphill]

Should this be added to the 3.2 milestone?