From 858c84206ef79f210e552c0128f01d1ae3a0cbf0 Mon Sep 17 00:00:00 2001
From: Belmin Bedak <belmoo996@hotmail.com>
Date: Fri, 26 Jul 2019 19:06:24 +0200
Subject: [PATCH] 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
---
 .../src/__tests__/CSSPropertyOperations-test.js          | 9 +++++++++
 .../ReactDOMServerIntegrationAttributes-test.js          | 5 +++++
 packages/react-dom/src/server/ReactPartialRenderer.js    | 5 ++++-
 packages/react-dom/src/shared/CSSPropertyOperations.js   | 5 ++++-
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
index 0b7f4c614775..210aace6f7d0 100644
--- a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
+++ b/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',
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
index c60ed8770b31..d70615eda835 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+++ b/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'}} />,
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index e8346c532fe8..2748da7b92ce 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/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,
diff --git a/packages/react-dom/src/shared/CSSPropertyOperations.js b/packages/react-dom/src/shared/CSSPropertyOperations.js
index c7f6786e8c76..38589fd19daa 100644
--- a/packages/react-dom/src/shared/CSSPropertyOperations.js
+++ b/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,