React: Avoid adding ';' in inlined styles when unnecessary

[PEM--]

Do you want to request a feature or report a bug?

Sounds like a feature but this is causing problem when server side generated HTML payload are pass through html-minifier.

What is the current behavior?

As stated in the serialization function: https://github.com/facebook/react/blob/master/src/renderers/dom/shared/CSSPropertyOperations.js#L172, all properties are ended with a ;.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/84v837e9/).

N/A

What is the expected behavior?

All properties should be ended with a ; except the last one.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

N/A

Referenced issue: https://github.com/ssrwpo/ssr/issues/45

[syranide]

Sounds like a feature but this is causing problem when server side generated HTML payload are pass through html-minifier.

What's the problem exactly?

[PEM--]

When I minify HTML rendered with React, last ; in inline styles are stripped. When the client performs the reconciliation, React sees a difference and warn about it.

Removing the last ; in inline styles would prevent this and spare some bandwidth as more and more users are relying on solution using style injection.

[syranide]

When I minify HTML rendered with React, last ; in inline styles are stripped. When the client performs the reconciliation, React sees a difference and warn about it.

That's not how reconciliation works at the moment, it computes a hash which the client checks. HOWEVER the error message will highlight the semicolon as the possible culprit because it doesn't know for sure what the server generated and tries to make a best guess. If that is how it worked you wouldn't be allowed to run the minifier over the code at all, because any change would trip React.

Tl;dr; the semicolon is not actually the problem.

[PEM--]

So removing the last ; would at least spare bandwidth.

[aweary]

This was fixed in https://github.com/facebook/react/pull/9550 🎉