Skip to content

Commit

Permalink
Don't hyphenate custom CSS properties for ReactDOMServer (#16167)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
bedakb authored and gaearon committed Jul 26, 2019
1 parent d412eec commit 858c842
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'}} />,
Expand Down
5 changes: 4 additions & 1 deletion packages/react-dom/src/server/ReactPartialRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
5 changes: 4 additions & 1 deletion packages/react-dom/src/shared/CSSPropertyOperations.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 858c842

Please sign in to comment.