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

this.previousWasTextNode = true;
      return escapeTextForBrowser(text);
    } else {
      let nextChild;
      ({child: nextChild, context} = resolve(child, context, this.threadID));
      if (nextChild === null || nextChild === false) {
        return '';
      } else if (!React.isValidElement(nextChild)) {
        if (nextChild != null && nextChild.$$typeof != null) {
          // Catch unexpected special types early.
          const $$typeof = nextChild.$$typeof;
          invariant(
            $$typeof !== REACT_PORTAL_TYPE,
            'Portals are not currently supported by the server renderer. ' +
              'Render them conditionally so that they only appear on the client render.',
          );
          
          invariant(
            false,
            'Unknown element-like object type: %s. This is likely a bug in React. ' +
              'Please file an issue.',
            ($$typeof: any).toString(),
          );
        }
        const nextChildren = toArray(nextChild);
        const frame: Frame = {
          type: null,
          domNamespace: parentNamespace,
          children: nextChildren,
          childIndex: 0,