Don't hyphenate custom CSS properties for ReactDOMServer (#16167)

* Do not hyphenate custom CSS property

* Move check into the processStyleName fn

* Formatting

* add test

* Put isCustomProperty check after conditional return

* add test to `ReactDOMServerIntegration` and supress warning

* Don't indexOf twice

* Simpler fix

Author: bedakb

packages/react-dom/src/__tests__/CSSPropertyOperations-test.js

@@ -57,6 +57,15 @@ describe('CSSPropertyOperations', () => {
     expect(html).toContain('"-ms-transition:none;-moz-transition:none"');
   });
 
+  it('should not hyphenate custom CSS property', () => {
+    const styles = {
+      '--someColor': '#000000',
+    };
+    const div = <div style={styles} />;
+    const html = ReactDOMServer.renderToString(div);
+    expect(html).toContain('"--someColor:#000000"');
+  });
+
   it('should set style attribute when styles exist', () => {
     const styles = {
       backgroundColor: '#000',

packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js

@@ -401,6 +401,11 @@ describe('ReactDOMServerIntegration', () => {
         expect(e.style.Foo).toBe('5');
       });
 
+      itRenders('camel cased custom properties', async render => {
+        const e = await render(<div style={{'--someColor': '#000000'}} />);
+        expect(e.style.SomeColor).toBe('#000000');
+      });
+
       itRenders('no undefined styles', async render => {
         const e = await render(
           <div style={{color: undefined, width: '30px'}} />,

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -231,7 +231,10 @@ function createMarkupForStyles(styles): string | null {
       }
     }
     if (styleValue != null) {
-      serialized += delimiter + processStyleName(styleName) + ':';
+      serialized +=
+        delimiter +
+        (isCustomProperty ? styleName : processStyleName(styleName)) +
+        ':';
       serialized += dangerousStyleValue(
         styleName,
         styleValue,

packages/react-dom/src/shared/CSSPropertyOperations.js

@@ -35,7 +35,10 @@ export function createDangerousStringForStyles(styles) {
       const styleValue = styles[styleName];
       if (styleValue != null) {
         const isCustomProperty = styleName.indexOf('--') === 0;
-        serialized += delimiter + hyphenateStyleName(styleName) + ':';
+        serialized +=
+          delimiter +
+          (isCustomProperty ? styleName : hyphenateStyleName(styleName)) +
+          ':';
         serialized += dangerousStyleValue(
           styleName,
           styleValue,