**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 = false;
    this.makeStaticMarkup = makeStaticMarkup;
    this.suspenseDepth = 0;
    // Context (new API)
    this.contextIndex = -1;
    this.contextStack = [];
    this.contextValueStack = [];
    if (__DEV__) {
      this.contextProviderStack = [];
    }
  }
  destroy() {
    if (!this.exhausted) {
      this.exhausted = true;
      this.clearProviders();
      freeThreadID(this.threadID);
    }
  }
  /**
   * Note: We use just two stacks regardless of how many context providers you have.
   * Providers are always popped in the reverse order to how they were pushed
   * so we always know on the way down which provider you'll encounter next on the way up.
   * On the way down, we push the current provider, and its context value *before*
   * we mutated it, onto the stacks. Therefore, on the way up, we always know which
   * provider needs to be "restored" to which value.
   * https://github.com/facebook/react/pull/12985#issuecomment-396301248
   */
  pushProvider<T>(provider: ReactProvider<T>): void {
    const index = ++this.contextIndex;
    const context: ReactContext<any> = provider.type._context;