Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't hyphenate custom CSS properties for ReactDOMServer #16167

Merged
merged 8 commits into from Jul 26, 2019
@@ -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',
@@ -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'}} />,
@@ -212,7 +212,8 @@ const processStyleName = function(styleName) {
if (styleNameCache.hasOwnProperty(styleName)) {
return styleNameCache[styleName];
}
const result = hyphenateStyleName(styleName);
const isCustomProperty = styleName.indexOf('--') === 0;

This comment has been minimized.

Copy link
@gaearon

gaearon Jul 26, 2019

Member

It's not ideal that we do this check again because createMarkupForStyles which calls us already does the same check anyway.

const result = isCustomProperty ? styleName : hyphenateStyleName(styleName);
styleNameCache[styleName] = result;
return result;
};
@@ -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,
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.