Bug: React DOM Server is mutating CSS variable names

[rdhaliwal]

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

Bug

Current Behaviour

• ReactDOMServer.renderToString is mutating CSS Variable names that are inlined and in the --camelCase format into --kebab-case

Expected Behaviour

• ReactDOMServer.renderToString does not mutate the CSS Variable name, and keeps it in --camelCase format

Demo

• https://codesandbox.io/s/react-dom-server-debugging-28xsr

Versions:

• Issue appears in react@16.8.6 & react-dom@16.8.6
• Issue appears in react@16.0.0 & react-dom@16.0.0
• (That's all I've tested so far)

Other notes:

• It's worth noting that ReactDOM.render is preserving the CSS Variable name and not mutating it. It only seems to only be an issue with ReactDOMServer.renderToString

[bedakb]

I'd like to work on this one.

I think problem is the createMarkupForStyles function (react-dom/server/ReactPartialRenderer.js), because It runs hyphenateStyleName on custom css property so that's why CSS variable casing is mutated.

I assume solution should looks like this:

serialized += delimiter + (isCustomProperty ? styleName : processStyleName(styleName)) + ':';

Maybe It would be better to perform check inside processStyleName function so styleName is cached as well.