planning

node_modules/@emotion/react/src/global.js

@@ -0,0 +1,145 @@
+import * as React from 'react'
+import isDevelopment from '#is-development'
+import { withEmotionCache } from './context'
+import { ThemeContext } from './theming'
+import { insertStyles } from '@emotion/utils'
+import isBrowser from '#is-browser'
+import { useInsertionEffectWithLayoutFallback } from '@emotion/use-insertion-effect-with-fallbacks'
+
+import { serializeStyles } from '@emotion/serialize'
+
+/*
+type Styles = Object | Array<Object>
+
+type GlobalProps = {
+  +styles: Styles | (Object => Styles)
+}
+*/
+
+let warnedAboutCssPropForGlobal = false
+
+// maintain place over rerenders.
+// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
+// initial client-side render from SSR, use place of hydrating tag
+
+export let Global /*: React.AbstractComponent<
+  GlobalProps
+> */ = /* #__PURE__ */ withEmotionCache((props /*: GlobalProps */, cache) => {
+  if (
+    isDevelopment &&
+    !warnedAboutCssPropForGlobal && // check for className as well since the user is
+    // probably using the custom createElement which
+    // means it will be turned into a className prop
+    // I don't really want to add it to the type since it shouldn't be used
+    (props.className || props.css)
+  ) {
+    console.error(
+      "It looks like you're using the css prop on Global, did you mean to use the styles prop instead?"
+    )
+    warnedAboutCssPropForGlobal = true
+  }
+  let styles = props.styles
+
+  let serialized = serializeStyles(
+    [styles],
+    undefined,
+    React.useContext(ThemeContext)
+  )
+
+  if (!isBrowser) {
+    let serializedNames = serialized.name
+    let serializedStyles = serialized.styles
+    let next = serialized.next
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name
+      serializedStyles += next.styles
+      next = next.next
+    }
+
+    let shouldCache = cache.compat === true
+
+    let rules = cache.insert(
+      ``,
+      { name: serializedNames, styles: serializedStyles },
+      cache.sheet,
+      shouldCache
+    )
+
+    if (shouldCache) {
+      return null
+    }
+
+    return (
+      <style
+        {...{
+          [`data-emotion`]: `${cache.key}-global ${serializedNames}`,
+          dangerouslySetInnerHTML: { __html: rules },
+          nonce: cache.sheet.nonce
+        }}
+      />
+    )
+  }
+
+  // yes, i know these hooks are used conditionally
+  // but it is based on a constant that will never change at runtime
+  // it's effectively like having two implementations and switching them out
+  // so it's not actually breaking anything
+
+  let sheetRef = React.useRef()
+
+  useInsertionEffectWithLayoutFallback(() => {
+    const key = `${cache.key}-global`
+
+    // use case of https://github.com/emotion-js/emotion/issues/2675
+    let sheet = new cache.sheet.constructor({
+      key,
+      nonce: cache.sheet.nonce,
+      container: cache.sheet.container,
+      speedy: cache.sheet.isSpeedy
+    })
+    let rehydrating = false
+    let node /*: HTMLStyleElement | null*/ = document.querySelector(
+      `style[data-emotion="${key} ${serialized.name}"]`
+    )
+    if (cache.sheet.tags.length) {
+      sheet.before = cache.sheet.tags[0]
+    }
+    if (node !== null) {
+      rehydrating = true
+      // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
+      node.setAttribute('data-emotion', key)
+      sheet.hydrate([node])
+    }
+    sheetRef.current = [sheet, rehydrating]
+    return () => {
+      sheet.flush()
+    }
+  }, [cache])
+
+  useInsertionEffectWithLayoutFallback(() => {
+    let sheetRefCurrent = sheetRef.current
+    let [sheet, rehydrating] = sheetRefCurrent
+    if (rehydrating) {
+      sheetRefCurrent[1] = false
+      return
+    }
+    if (serialized.next !== undefined) {
+      // insert keyframes
+      insertStyles(cache, serialized.next, true)
+    }
+
+    if (sheet.tags.length) {
+      // if this doesn't exist then it will be null so the style element will be appended
+      let element = sheet.tags[sheet.tags.length - 1].nextElementSibling
+      sheet.before = element
+      sheet.flush()
+    }
+    cache.insert(``, serialized, sheet, false)
+  }, [cache, serialized.name])
+
+  return null
+})
+
+if (isDevelopment) {
+  Global.displayName = 'EmotionGlobal'
+}