diff --git a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js index 0b7f4c6147751..210aace6f7d00 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 =
; + 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 c60ed8770b310..d70615eda835c 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(); + expect(e.style.SomeColor).toBe('#000000'); + }); + itRenders('no undefined styles', async render => { const e = await render( , diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index 99dfaa5bd1e46..ee589a7ae8f14 100644 --- a/packages/react-dom/src/server/ReactPartialRenderer.js +++ b/packages/react-dom/src/server/ReactPartialRenderer.js @@ -232,7 +232,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 c7f6786e8c76b..38589fd19daa3 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,