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
Belmin Bedak committed
Jul 26, 2019 at 19:06 UTC
858c84206ef79f210e552c0128f01d1ae3a0cbf0
4 files changed
+22
-2
packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
+9
@@ -57,6 +57,15 @@ describe('CSSPropertyOperations', () => {
57
expect(html).toContain('"-ms-transition:none;-moz-transition:none"');
58
});
59
60
+ it('should not hyphenate custom CSS property', () => {
61
+ const styles = {
62
+ '--someColor': '#000000',
63
+ };
64
+ const div = <div style={styles} />;
65
+ const html = ReactDOMServer.renderToString(div);
66
+ expect(html).toContain('"--someColor:#000000"');
67
+ });
68
+
69
it('should set style attribute when styles exist', () => {
70
const styles = {
71
backgroundColor: '#000',
packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+5
@@ -401,6 +401,11 @@ describe('ReactDOMServerIntegration', () => {
401
expect(e.style.Foo).toBe('5');
402
});
403
404
+ itRenders('camel cased custom properties', async render => {
405
+ const e = await render(<div style={{'--someColor': '#000000'}} />);
406
+ expect(e.style.SomeColor).toBe('#000000');
407
+ });
408
+
409
itRenders('no undefined styles', async render => {
410
const e = await render(
411
<div style={{color: undefined, width: '30px'}} />,
packages/react-dom/src/server/ReactPartialRenderer.js
+4
-1
@@ -231,7 +231,10 @@ function createMarkupForStyles(styles): string | null {
231
}
232
}
233
if (styleValue != null) {
234
- serialized += delimiter + processStyleName(styleName) + ':';
234
+ serialized +=
235
+ delimiter +
236
+ (isCustomProperty ? styleName : processStyleName(styleName)) +
237
+ ':';
238
serialized += dangerousStyleValue(
239
styleName,
240
styleValue,
packages/react-dom/src/shared/CSSPropertyOperations.js
+4
-1
@@ -35,7 +35,10 @@ export function createDangerousStringForStyles(styles) {
35
const styleValue = styles[styleName];
36
if (styleValue != null) {
37
const isCustomProperty = styleName.indexOf('--') === 0;
38
- serialized += delimiter + hyphenateStyleName(styleName) + ':';
38
+ serialized +=
39
+ delimiter +
40
+ (isCustomProperty ? styleName : hyphenateStyleName(styleName)) +
41
+ ':';
42
serialized += dangerousStyleValue(
43
styleName,
44
styleValue,