Use componentDidMount for WithStyles (#1157)

* HOC should not attach sheets until mount, same as the new hook implementation

* Fix potential FOUC by attaching sheet in HOC constructor when running in browser.

* Call registry.add() on the client too for parity with the hooks implementation

* use  componentDidMount, add changelog

* changelog

* changelog

Author: kof

changelog.md

@@ -4,6 +4,10 @@ Since you are interested in what happens next, in case, you work for a for-profi
 
 ---
 
+### Bug fixes
+
+- [react-jss] withStyles shouldn't attach() on SSR ([#1149](https://github.com/cssinjs/jss/pull/1149), [#1157](https://github.com/cssinjs/jss/pull/1157))
+
 ### Improvements
 
 - [jss] Improve treeshaking for webpack by not using `global`. ([#1153](https://github.com/cssinjs/jss/pull/1153))

packages/react-jss/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/react-jss.js": {
-    "bundled": 168372,
-    "minified": 58132,
-    "gzipped": 18988
+    "bundled": 168517,
+    "minified": 58191,
+    "gzipped": 19016
   },
   "dist/react-jss.min.js": {
-    "bundled": 111704,
-    "minified": 41522,
-    "gzipped": 14086
+    "bundled": 111849,
+    "minified": 41586,
+    "gzipped": 14098
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 26415,
-    "minified": 11502,
-    "gzipped": 3809
+    "bundled": 26550,
+    "minified": 11551,
+    "gzipped": 3816
   },
   "dist/react-jss.esm.js": {
-    "bundled": 25453,
-    "minified": 10667,
-    "gzipped": 3688,
+    "bundled": 25588,
+    "minified": 10716,
+    "gzipped": 3693,
     "treeshaked": {
       "rollup": {
         "code": 1841,

packages/react-jss/src/withStyles.js

@@ -1,6 +1,5 @@
 // @flow
 import React, {Component, type ComponentType, type Node} from 'react'
-import isInBrowser from 'is-in-browser'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 import {type StyleSheet, type Classes} from 'jss'
 import {ThemeContext} from 'theming'
@@ -119,8 +118,12 @@ const withStyles = <Theme>(styles: Styles<Theme>, options?: HOCOptions<Theme> =
         if (sheet && registry) {
           registry.add(sheet)
         }
-        if (isInBrowser) {
-          WithStyles.manage(props, this.state)
+      }
+
+      componentDidMount() {
+        const {props, state} = this
+        if (props && state) {
+          WithStyles.manage(props, state)
         }
       }