diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json index 81b98b3ea..0932dc7cd 100644 --- a/packages/react-jss/.size-snapshot.json +++ b/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 } } } diff --git a/packages/react-jss/src/JssContext.js b/packages/react-jss/src/JssContext.js index 0bc71c0b9..de9c158be 100644 --- a/packages/react-jss/src/JssContext.js +++ b/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 }) diff --git a/packages/react-jss/src/JssProvider.js b/packages/react-jss/src/JssProvider.js index 4e3b3845b..98314a3e6 100644 --- a/packages/react-jss/src/JssProvider.js +++ b/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 } diff --git a/packages/react-jss/src/createUseStyles.js b/packages/react-jss/src/createUseStyles.js index b320b733a..78ad07e30 100644 --- a/packages/react-jss/src/createUseStyles.js +++ b/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({ diff --git a/packages/react-jss/src/createUseStyles.test.js b/packages/react-jss/src/createUseStyles.test.js index 512da26f0..3fc8c426d 100644 --- a/packages/react-jss/src/createUseStyles.test.js +++ b/packages/react-jss/src/createUseStyles.test.js @@ -34,7 +34,7 @@ describe('React-JSS: createUseStyles', () => { const MyComponent = createStyledComponent(styles) renderToString( - 'button'}> + 'button'} isSSR> ) diff --git a/packages/react-jss/src/flow-types.js b/packages/react-jss/src/flow-types.js index aba383600..ef6d4d506 100644 --- a/packages/react-jss/src/flow-types.js +++ b/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 = Props & { diff --git a/packages/react-jss/src/index.d.ts b/packages/react-jss/src/index.d.ts index ab9cfb281..6d21932f4 100644 --- a/packages/react-jss/src/index.d.ts +++ b/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< diff --git a/packages/react-jss/test-utils/createCommonBaseTests.js b/packages/react-jss/test-utils/createCommonBaseTests.js index c658a73b6..c2ae5b770 100644 --- a/packages/react-jss/test-utils/createCommonBaseTests.js +++ b/packages/react-jss/test-utils/createCommonBaseTests.js @@ -57,7 +57,7 @@ export default ({createStyledComponent}) => { }) const generateId = () => 'id' renderToString( - + ) @@ -81,7 +81,7 @@ export default ({createStyledComponent}) => { options ) renderToString( - + )