Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
73 lines
2.5 KiB
Plaintext
73 lines
2.5 KiB
Plaintext
import * as React from 'react'
|
|
import { useContext, forwardRef } from 'react'
|
|
import createCache, { EmotionCache } from '@emotion/cache'
|
|
import isDevelopment from '#is-development'
|
|
import isBrowser from '#is-browser'
|
|
|
|
let EmotionCacheContext =
|
|
/* #__PURE__ */ React.createContext<EmotionCache | null>(
|
|
// we're doing this to avoid preconstruct's dead code elimination in this one case
|
|
// because this module is primarily intended for the browser and node
|
|
// but it's also required in react native and similar environments sometimes
|
|
// and we could have a special build just for that
|
|
// but this is much easier and the native packages
|
|
// might use a different theme context in the future anyway
|
|
typeof HTMLElement !== 'undefined'
|
|
? /* #__PURE__ */ createCache({ key: 'css' })
|
|
: null
|
|
)
|
|
|
|
if (isDevelopment) {
|
|
EmotionCacheContext.displayName = 'EmotionCacheContext'
|
|
}
|
|
|
|
export let CacheProvider = EmotionCacheContext.Provider
|
|
|
|
export let __unsafe_useEmotionCache = function useEmotionCache() {
|
|
return useContext(EmotionCacheContext)
|
|
}
|
|
|
|
let withEmotionCache = function withEmotionCache<Props, RefType = any>(
|
|
func: (
|
|
props: React.PropsWithoutRef<Props>,
|
|
context: EmotionCache,
|
|
ref?: React.ForwardedRef<RefType>
|
|
) => React.ReactNode
|
|
):
|
|
| React.FC<React.PropsWithoutRef<Props> & React.RefAttributes<RefType>>
|
|
| React.ForwardRefExoticComponent<
|
|
React.PropsWithoutRef<Props> & React.RefAttributes<RefType>
|
|
> {
|
|
return forwardRef<RefType, Props>((props, ref) => {
|
|
// the cache will never be null in the browser
|
|
let cache = useContext(EmotionCacheContext)!
|
|
|
|
return func(props, cache, ref)
|
|
})
|
|
}
|
|
|
|
if (!isBrowser) {
|
|
withEmotionCache = function withEmotionCache(func) {
|
|
return (props: Parameters<typeof func>[0]) => {
|
|
let cache = useContext(EmotionCacheContext)
|
|
if (cache === null) {
|
|
// yes, we're potentially creating this on every render
|
|
// it doesn't actually matter though since it's only on the server
|
|
// so there will only every be a single render
|
|
// that could change in the future because of suspense and etc. but for now,
|
|
// this works and i don't want to optimise for a future thing that we aren't sure about
|
|
cache = createCache({ key: 'css' })
|
|
return (
|
|
<EmotionCacheContext.Provider value={cache}>
|
|
{func(props, cache)}
|
|
</EmotionCacheContext.Provider>
|
|
)
|
|
} else {
|
|
return func(props, cache)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export { withEmotionCache }
|