From 9dd75f6e5229af7f79ff40c882fe25a3c9c7801a Mon Sep 17 00:00:00 2001 From: Belmin Bedak Date: Sat, 20 Jul 2019 01:43:00 +0200 Subject: [PATCH 1/8] Do not hyphenate custom CSS property --- packages/react-dom/src/server/ReactPartialRenderer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index 99dfaa5bd1e4..ee589a7ae8f1 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, From bd046c988e9e0efaf5698ffed959b62eeec2f513 Mon Sep 17 00:00:00 2001 From: Belmin Bedak Date: Sat, 20 Jul 2019 02:08:47 +0200 Subject: [PATCH 2/8] Move check into the processStyleName fn --- packages/react-dom/src/server/ReactPartialRenderer.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index ee589a7ae8f1..7df1eef244a5 100644 --- a/packages/react-dom/src/server/ReactPartialRenderer.js +++ b/packages/react-dom/src/server/ReactPartialRenderer.js @@ -209,10 +209,11 @@ function validateDangerousTag(tag) { const styleNameCache = {}; const processStyleName = function(styleName) { + const isCustomProperty = styleName.indexOf('--') === 0; if (styleNameCache.hasOwnProperty(styleName)) { return styleNameCache[styleName]; } - const result = hyphenateStyleName(styleName); + const result = isCustomProperty ? styleName : hyphenateStyleName(styleName); styleNameCache[styleName] = result; return result; }; @@ -232,10 +233,7 @@ function createMarkupForStyles(styles): string | null { } } if (styleValue != null) { - serialized += - delimiter + - (isCustomProperty ? styleName : processStyleName(styleName)) + - ':'; + serialized += delimiter + processStyleName(styleName) +':'; serialized += dangerousStyleValue( styleName, styleValue, From b08743b5507459c7b5758f8fe91a019ee2cb3c15 Mon Sep 17 00:00:00 2001 From: Belmin Bedak Date: Sat, 20 Jul 2019 13:37:21 +0200 Subject: [PATCH 3/8] Formatting --- packages/react-dom/src/server/ReactPartialRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index 7df1eef244a5..167dec2f39b6 100644 --- a/packages/react-dom/src/server/ReactPartialRenderer.js +++ b/packages/react-dom/src/server/ReactPartialRenderer.js @@ -233,7 +233,7 @@ function createMarkupForStyles(styles): string | null { } } if (styleValue != null) { - serialized += delimiter + processStyleName(styleName) +':'; + serialized += delimiter + processStyleName(styleName) + ':'; serialized += dangerousStyleValue( styleName, styleValue, From 63c4e824494b3de6d28aead2857c76c1d9e58f7b Mon Sep 17 00:00:00 2001 From: Belmin Bedak Date: Sat, 20 Jul 2019 13:50:03 +0200 Subject: [PATCH 4/8] add test --- .../src/__tests__/CSSPropertyOperations-test.js | 9 +++++++++ 1 file changed, 9 insertions(+) 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 =
; + const html = ReactDOMServer.renderToString(div); + expect(html).toContain('"--someColor:#000000"'); + }); + it('should set style attribute when styles exist', () => { const styles = { backgroundColor: '#000', From f510cffbed22eed6744c11028846890a4843a8a5 Mon Sep 17 00:00:00 2001 From: Belmin Bedak Date: Sat, 20 Jul 2019 16:33:46 +0200 Subject: [PATCH 5/8] Put isCustomProperty check after conditional return --- packages/react-dom/src/server/ReactPartialRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index 167dec2f39b6..2e048fd940cc 100644 --- a/packages/react-dom/src/server/ReactPartialRenderer.js +++ b/packages/react-dom/src/server/ReactPartialRenderer.js @@ -209,10 +209,10 @@ function validateDangerousTag(tag) { const styleNameCache = {}; const processStyleName = function(styleName) { - const isCustomProperty = styleName.indexOf('--') === 0; if (styleNameCache.hasOwnProperty(styleName)) { return styleNameCache[styleName]; } + const isCustomProperty = styleName.indexOf('--') === 0; const result = isCustomProperty ? styleName : hyphenateStyleName(styleName); styleNameCache[styleName] = result; return result; From 34c5fb034c7a705a5ce19fbf3d263f0e943bf43d Mon Sep 17 00:00:00 2001 From: Belmin Bedak Date: Sat, 20 Jul 2019 22:54:00 +0200 Subject: [PATCH 6/8] add test to `ReactDOMServerIntegration` and supress warning --- .../__tests__/ReactDOMServerIntegrationAttributes-test.js | 5 +++++ packages/react-dom/src/shared/CSSPropertyOperations.js | 5 ++++- 2 files changed, 9 insertions(+), 1 deletion(-) 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(
); + expect(e.style.SomeColor).toBe('#000000'); + }); + itRenders('no undefined styles', async render => { const e = await render(
, 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, From 39e5c126dc58d74827e24289dd78e69a74b29025 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 26 Jul 2019 17:55:08 +0100 Subject: [PATCH 7/8] Don't indexOf twice --- packages/react-dom/src/server/ReactPartialRenderer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index 2e048fd940cc..d44619cd1024 100644 --- a/packages/react-dom/src/server/ReactPartialRenderer.js +++ b/packages/react-dom/src/server/ReactPartialRenderer.js @@ -208,11 +208,10 @@ function validateDangerousTag(tag) { } const styleNameCache = {}; -const processStyleName = function(styleName) { +const processStyleName = function(styleName, isCustomProperty) { if (styleNameCache.hasOwnProperty(styleName)) { return styleNameCache[styleName]; } - const isCustomProperty = styleName.indexOf('--') === 0; const result = isCustomProperty ? styleName : hyphenateStyleName(styleName); styleNameCache[styleName] = result; return result; @@ -233,7 +232,8 @@ function createMarkupForStyles(styles): string | null { } } if (styleValue != null) { - serialized += delimiter + processStyleName(styleName) + ':'; + serialized += + delimiter + processStyleName(styleName, isCustomProperty) + ':'; serialized += dangerousStyleValue( styleName, styleValue, From 071824ceb28baa173985cce8c4802f6f6550a961 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 26 Jul 2019 18:00:16 +0100 Subject: [PATCH 8/8] Simpler fix --- packages/react-dom/src/server/ReactPartialRenderer.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index d44619cd1024..ee589a7ae8f1 100644 --- a/packages/react-dom/src/server/ReactPartialRenderer.js +++ b/packages/react-dom/src/server/ReactPartialRenderer.js @@ -208,11 +208,11 @@ function validateDangerousTag(tag) { } const styleNameCache = {}; -const processStyleName = function(styleName, isCustomProperty) { +const processStyleName = function(styleName) { if (styleNameCache.hasOwnProperty(styleName)) { return styleNameCache[styleName]; } - const result = isCustomProperty ? styleName : hyphenateStyleName(styleName); + const result = hyphenateStyleName(styleName); styleNameCache[styleName] = result; return result; }; @@ -233,7 +233,9 @@ function createMarkupForStyles(styles): string | null { } if (styleValue != null) { serialized += - delimiter + processStyleName(styleName, isCustomProperty) + ':'; + delimiter + + (isCustomProperty ? styleName : processStyleName(styleName)) + + ':'; serialized += dangerousStyleValue( styleName, styleValue,