**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`

if (reactContext !== reactContext.Consumer) {
                  if (!hasWarnedAboutUsingContextAsConsumer) {
                    hasWarnedAboutUsingContextAsConsumer = true;
                    warning(
                      false,
                      'Rendering <Context> directly is not supported and will be removed in ' +
                        'a future major release. Did you mean to render <Context.Consumer> instead?',
                    );
                  }
                }
              } else {
                reactContext = (reactContext: any)._context;
              }
            }
            const nextProps: any = (nextChild: any).props;
            const threadID = this.threadID;
            validateContextBounds(reactContext, threadID);
            const nextValue = reactContext[threadID];
            const nextChildren = toArray(nextProps.children(nextValue));
            const frame: Frame = {
              type: nextChild,
              domNamespace: parentNamespace,
              children: nextChildren,
              childIndex: 0,
              context: context,
              footer: '',
            };
            if (__DEV__) {
              ((frame: any): FrameDev).debugElementStack = [];
            }