Move conditional useInsertionEffect declarations into separate package

packages/react/package.json

@@ -66,6 +66,7 @@
     "@emotion/babel-plugin": "^11.10.0",
     "@emotion/cache": "^11.10.0",
     "@emotion/serialize": "^1.1.0",
+    "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
     "@emotion/utils": "^1.2.0",
     "@emotion/weak-memoize": "^0.3.0",
     "hoist-non-react-statics": "^3.3.1"

packages/react/src/class-names.js

@@ -8,7 +8,7 @@ import {
 import { serializeStyles } from '@emotion/serialize'
 import { withEmotionCache } from './context'
 import { ThemeContext } from './theming'
-import useInsertionEffectMaybe from './useInsertionEffectMaybe'
+import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
 import { isBrowser } from './utils'
 
 type ClassNameArg =
@@ -94,7 +94,7 @@ type Props = {
 }
 
 const Insertion = ({ cache, serializedArr }) => {
-  let rules = useInsertionEffectMaybe(() => {
+  let rules = useInsertionEffectAlwaysWithSyncFallback(() => {
     let rules = ''
     for (let i = 0; i < serializedArr.length; i++) {
       let res = insertStyles(cache, serializedArr[i], false)

packages/react/src/emotion-element.js

@@ -10,7 +10,7 @@ import {
 import { hasOwnProperty, isBrowser } from './utils'
 import { serializeStyles } from '@emotion/serialize'
 import { getLabelFromStackTrace } from './get-label-from-stack-trace'
-import useInsertionEffectMaybe from './useInsertionEffectMaybe'
+import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
 
 let typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__'
 
@@ -57,7 +57,7 @@ export const createEmotionProps = (type: React.ElementType, props: Object) => {
 const Insertion = ({ cache, serialized, isStringTag }) => {
   registerStyles(cache, serialized, isStringTag)
 
-  const rules = useInsertionEffectMaybe(() =>
+  const rules = useInsertionEffectAlwaysWithSyncFallback(() =>
     insertStyles(cache, serialized, isStringTag)
   )
 

packages/react/src/global.js

@@ -4,6 +4,7 @@ import { withEmotionCache } from './context'
 import { ThemeContext } from './theming'
 import { insertStyles } from '@emotion/utils'
 import { isBrowser } from './utils'
+import { useInsertionEffectWithLayoutFallback } from '@emotion/use-insertion-effect-with-fallbacks'
 
 import { serializeStyles } from '@emotion/serialize'
 
@@ -13,10 +14,6 @@ type GlobalProps = {
   +styles: Styles | (Object => Styles)
 }
 
-const useInsertionEffect = React['useInsertion' + 'Effect']
-  ? React['useInsertion' + 'Effect']
-  : React.useLayoutEffect
-
 let warnedAboutCssPropForGlobal = false
 
 // maintain place over rerenders.
@@ -87,7 +84,7 @@ export let Global: React.AbstractComponent<GlobalProps> =
 
     let sheetRef = React.useRef()
 
-    useInsertionEffect(() => {
+    useInsertionEffectWithLayoutFallback(() => {
       const key = `${cache.key}-global`
 
       // use case of https://github.com/emotion-js/emotion/issues/2675
@@ -117,7 +114,7 @@ export let Global: React.AbstractComponent<GlobalProps> =
       }
     }, [cache])
 
-    useInsertionEffect(() => {
+    useInsertionEffectWithLayoutFallback(() => {
       let sheetRefCurrent = (sheetRef.current: any)
       let [sheet, rehydrating] = sheetRefCurrent
       if (rehydrating) {

packages/styled/package.json

@@ -15,6 +15,7 @@
     "@emotion/babel-plugin": "^11.10.0",
     "@emotion/is-prop-valid": "^1.2.0",
     "@emotion/serialize": "^1.1.0",
+    "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
     "@emotion/utils": "^1.2.0"
   },
   "peerDependencies": {

packages/styled/src/base.js

@@ -15,7 +15,7 @@ import {
   registerStyles
 } from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
-import useInsertionEffectMaybe from './useInsertionEffectMaybe'
+import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
 
 const ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
 Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
@@ -27,7 +27,7 @@ let isBrowser = typeof document !== 'undefined'
 const Insertion = ({ cache, serialized, isStringTag }) => {
   registerStyles(cache, serialized, isStringTag)
 
-  const rules = useInsertionEffectMaybe(() =>
+  const rules = useInsertionEffectAlwaysWithSyncFallback(() =>
     insertStyles(cache, serialized, isStringTag)
   )
 

packages/use-insertion-effect-with-fallbacks/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/use-insertion-effect-with-fallbacks/README.md

@@ -0,0 +1 @@
+# @emotion/use-insertion-effect-with-fallbacks

packages/use-insertion-effect-with-fallbacks/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@emotion/use-insertion-effect-with-fallbacks",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/emotion-use-insertion-effect-with-fallbacks.cjs.js",
+  "module": "dist/emotion-use-insertion-effect-with-fallbacks.esm.js",
+  "browser": {
+    "./dist/emotion-use-insertion-effect-with-fallbacks.esm.js": "./dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/emotion-js/emotion/tree/main/packages/use-insertion-effect-with-fallbacks",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "module": {
+        "worker": "./dist/emotion-use-insertion-effect-with-fallbacks.worker.esm.js",
+        "browser": "./dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js",
+        "default": "./dist/emotion-use-insertion-effect-with-fallbacks.esm.js"
+      },
+      "default": "./dist/emotion-use-insertion-effect-with-fallbacks.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "preconstruct": {
+    "exports": {
+      "envConditions": [
+        "browser",
+        "worker"
+      ]
+    }
+  }
+}

packages/use-insertion-effect-with-fallbacks/src/index.js

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+const isBrowser = typeof document !== 'undefined'
+
+const syncFallback = create => create()
+
+const useInsertionEffect = React['useInsertion' + 'Effect']
+  ? React['useInsertion' + 'Effect']
+  : false
+
+export const useInsertionEffectAlwaysWithSyncFallback = !isBrowser
+  ? syncFallback
+  : useInsertionEffect || syncFallback
+
+export const useInsertionEffectWithLayoutFallback =
+  useInsertionEffect || React.useLayoutEffect

yarn.lock

@@ -2584,6 +2584,7 @@ __metadata:
     "@emotion/serialize": ^1.1.0
     "@emotion/server": 11.10.0
     "@emotion/styled": 11.10.0
+    "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
     "@emotion/utils": ^1.2.0
     "@emotion/weak-memoize": ^0.3.0
     hoist-non-react-statics: ^3.3.1
@@ -2658,6 +2659,7 @@ __metadata:
     "@emotion/is-prop-valid": ^1.2.0
     "@emotion/react": 11.10.0
     "@emotion/serialize": ^1.1.0
+    "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
     "@emotion/utils": ^1.2.0
     react: 16.14.0
     typescript: ^4.5.5
@@ -2679,6 +2681,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.0, @emotion/use-insertion-effect-with-fallbacks@workspace:packages/use-insertion-effect-with-fallbacks":
+  version: 0.0.0-use.local
+  resolution: "@emotion/use-insertion-effect-with-fallbacks@workspace:packages/use-insertion-effect-with-fallbacks"
+  languageName: unknown
+  linkType: soft
+
 "@emotion/utils@^1.2.0, @emotion/utils@workspace:packages/utils":
   version: 0.0.0-use.local
   resolution: "@emotion/utils@workspace:packages/utils"