Fix CSS vendor-prefixed property serialization (#7704)

Corrects how wp.element.renderToString() serializes a vendor-prefixed
property such as MozTransform. These properties should be turned into
kebab-case and prefixed with a '-', e.g. '-moz-transform'.

packages/element/src/serialize.js

@@ -360,19 +360,25 @@ function getNormalAttributeName( attribute ) {
 }
 
 /**
- * Returns the normal form of the style property name for HTML. Converts
- * property names to kebab-case (e.g. 'backgroundColor' → 'background-color'),
- * unless the property name begins with a '-' (e.g. '-webkit-overflow-scroll').
+ * Returns the normal form of the style property name for HTML.
+ *
+ * - Converts property names to kebab-case, e.g. 'backgroundColor' → 'background-color'
+ * - Leaves custom attributes alone, e.g. '--myBackgroundColor' → '--myBackgroundColor'
+ * - Converts vendor-prefixed property names to -kebab-case, e.g. 'MozTransform' → '-moz-transform'
  *
  * @param {string} property Property name.
  *
  * @return {string} Normalized property name.
  */
 function getNormalStylePropertyName( property ) {
-	if ( startsWith( property, '-' ) ) {
+	if ( startsWith( property, '--' ) ) {
 		return property;
 	}
 
+	if ( hasPrefix( property, [ 'ms', 'O', 'Moz', 'Webkit' ] ) ) {
+		return '-' + kebabCase( property );
+	}
+
 	return kebabCase( property );
 }
 

packages/element/src/test/serialize.js

@@ -566,12 +566,15 @@ describe( 'renderStyle()', () => {
 		expect( result ).toBe( '--myBackgroundColor:palegoldenrod' );
 	} );
 
-	it( 'should not kebab-case properties with a vendor prefix', () => {
+	it( 'should -kebab-case style properties with a vendor prefix', () => {
 		const result = renderStyle( {
-			'-webkit-overflow-scrolling': 'touch',
+			msTransform: 'none',
+			OTransform: 'none',
+			MozTransform: 'none',
+			WebkitTransform: 'none',
 		} );
 
-		expect( result ).toBe( '-webkit-overflow-scrolling:touch' );
+		expect( result ).toBe( '-ms-transform:none;-o-transform:none;-moz-transform:none;-webkit-transform:none' );
 	} );
 
 	describe( 'value unit', () => {