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
facebook · Jul 26, 2019 · 858c842 · 858c842
1 parent d412eec
commit 858c842
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,