feat(JssProvider): provide custom isSSR flag (#1610)

* jss provider accepts isSSR

* size snapshot

Author: enisdenjo

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

@@ -1,30 +1,30 @@
 {
   "react-jss.js": {
-    "bundled": 136053,
-    "minified": 50140,
-    "gzipped": 16739
+    "bundled": 136245,
+    "minified": 50224,
+    "gzipped": 16773
   },
   "react-jss.min.js": {
-    "bundled": 103003,
-    "minified": 39999,
-    "gzipped": 13855
+    "bundled": 103195,
+    "minified": 40083,
+    "gzipped": 13886
   },
   "react-jss.cjs.js": {
-    "bundled": 21581,
-    "minified": 9508,
-    "gzipped": 3183
+    "bundled": 21759,
+    "minified": 9601,
+    "gzipped": 3220
   },
   "react-jss.esm.js": {
-    "bundled": 19703,
-    "minified": 8047,
-    "gzipped": 2975,
+    "bundled": 19855,
+    "minified": 8114,
+    "gzipped": 3000,
     "treeshaked": {
       "rollup": {
-        "code": 426,
-        "import_statements": 368
+        "code": 442,
+        "import_statements": 375
       },
       "webpack": {
-        "code": 1967
+        "code": 1922
       }
     }
   }

packages/react-jss/src/JssContext.js

@@ -1,6 +1,8 @@
 import * as React from 'react'
+import isInBrowser from 'is-in-browser'
 
 export default React.createContext({
   classNamePrefix: '',
-  disableStylesGeneration: false
+  disableStylesGeneration: false,
+  isSSR: !isInBrowser
 })

packages/react-jss/src/JssProvider.js

@@ -13,7 +13,8 @@ export default function JssProvider(props) {
   const registryRef = React.useRef(null)
 
   const createContext = (parentContext, prevContext = initialContext) => {
-    const {registry, classNamePrefix, jss, generateId, disableStylesGeneration, media, id} = props
+    const {registry, classNamePrefix, jss, generateId, disableStylesGeneration, media, id, isSSR} =
+      props
 
     const context = {...parentContext}
 
@@ -57,6 +58,10 @@ export default function JssProvider(props) {
       context.disableStylesGeneration = disableStylesGeneration
     }
 
+    if (isSSR !== undefined) {
+      context.isSSR = isSSR
+    }
+
     if (prevContext && shallowEqualObjects(prevContext, context)) {
       return prevContext
     }

packages/react-jss/src/createUseStyles.js

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import isInBrowser from 'is-in-browser'
 import {ThemeContext as DefaultThemeContext} from 'theming'
 
 import JssContext from './JssContext'
@@ -13,10 +12,12 @@ import getSheetIndex from './utils/getSheetIndex'
 import {manageSheet, unmanageSheet} from './utils/managers'
 import getSheetClasses from './utils/getSheetClasses'
 
-const useInsertionEffect = isInBrowser
-  ? React.useInsertionEffect || // React 18+ (https://github.com/reactwg/react-18/discussions/110)
-    React.useLayoutEffect
-  : React.useEffect
+function getUseInsertionEffect(isSSR) {
+  return isSSR
+    ? React.useEffect
+    : React.useInsertionEffect || // React 18+ (https://github.com/reactwg/react-18/discussions/110)
+        React.useLayoutEffect
+}
 
 const noTheme = {}
 
@@ -61,14 +62,14 @@ const createUseStyles = (styles, options = {}) => {
       return [newSheet, newSheet ? addDynamicRules(newSheet, data) : null]
     }, [context, theme])
 
-    useInsertionEffect(() => {
+    getUseInsertionEffect(context.isSSR)(() => {
       // We only need to update the rules on a subsequent update and not in the first mount
       if (sheet && dynamicRules && !isFirstMount.current) {
         updateDynamicRules(data, sheet, dynamicRules)
       }
     }, [data])
 
-    useInsertionEffect(
+    getUseInsertionEffect(context.isSSR)(
       () => () => {
         if (sheet) {
           unmanageSheet({

packages/react-jss/src/createUseStyles.test.js

@@ -34,7 +34,7 @@ describe('React-JSS: createUseStyles', () => {
       const MyComponent = createStyledComponent(styles)
 
       renderToString(
-        <JssProvider registry={registry} generateId={() => 'button'}>
+        <JssProvider registry={registry} generateId={() => 'button'} isSSR>
           <MyComponent theme={{exampleColor: 'blue'}} />
         </JssProvider>
       )

packages/react-jss/src/flow-types.js

@@ -36,6 +36,7 @@ export type Context = {|
   disableStylesGeneration?: boolean,
   media?: string,
   generateId?: GenerateId
+  isSSR?: boolean
 |}
 
 export type HOCProps<Theme, Props> = Props & {

packages/react-jss/src/index.d.ts

@@ -23,6 +23,7 @@ declare const JssProvider: ComponentType<{
   disableStylesGeneration?: boolean
   children: ReactNode
   id?: CreateGenerateIdOptions
+  isSSR?: boolean
 }>
 
 interface Managers {
@@ -35,6 +36,7 @@ declare const JssContext: Context<{
   managers?: Managers
   sheetOptions: StyleSheetFactoryOptions
   disableStylesGeneration: boolean
+  isSSR: boolean
 }>
 
 type ClassesForStyles<

packages/react-jss/test-utils/createCommonBaseTests.js

@@ -57,7 +57,7 @@ export default ({createStyledComponent}) => {
     })
     const generateId = () => 'id'
     renderToString(
-      <JssProvider registry={registry} generateId={generateId}>
+      <JssProvider registry={registry} generateId={generateId} isSSR>
         <MyComponent />
       </JssProvider>
     )
@@ -81,7 +81,7 @@ export default ({createStyledComponent}) => {
       options
     )
     renderToString(
-      <JssProvider registry={registry}>
+      <JssProvider registry={registry} isSSR>
         <MyComponent />
       </JssProvider>
     )