OwlCyberSecurity - MANAGER
Edit File: emotion-element.tsx
import * as React from 'react' import { withEmotionCache } from './context' import { Theme, ThemeContext } from './theming' import { EmotionCache, getRegisteredStyles, insertStyles, registerStyles, SerializedStyles } from '@emotion/utils' import { hasOwn } from './utils' import { Interpolation, serializeStyles } from '@emotion/serialize' import isDevelopment from '#is-development' import isBrowser from '#is-browser' import { getLabelFromStackTrace } from './get-label-from-stack-trace' import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks' const typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__' const labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__' interface EmotionProps { css: Interpolation<Theme> [typePropName]: React.ElementType [labelPropName]?: string [key: string]: unknown } export const createEmotionProps = ( type: React.ElementType, props: { css: Interpolation<Theme> } ): EmotionProps => { if ( isDevelopment && typeof props.css === 'string' && // check if there is a css declaration props.css.indexOf(':') !== -1 ) { throw new Error( `Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css\`${props.css}\`` ) } let newProps = {} as EmotionProps for (let key in props) { if (hasOwn.call(props, key)) { newProps[key] = props[key as keyof typeof props] } } newProps[typePropName] = type // Runtime labeling is an opt-in feature because: // - It causes hydration warnings when using Safari and SSR // - It can degrade performance if there are a huge number of elements // // Even if the flag is set, we still don't compute the label if it has already // been determined by the Babel plugin. if ( isDevelopment && typeof globalThis !== 'undefined' && !!(globalThis as any).EMOTION_RUNTIME_AUTO_LABEL && !!props.css && (typeof props.css !== 'object' || !('name' in props.css) || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1) ) { const label = getLabelFromStackTrace(new Error().stack) if (label) newProps[labelPropName] = label } return newProps } const Insertion = ({ cache, serialized, isStringTag }: { cache: EmotionCache serialized: SerializedStyles isStringTag: boolean }) => { registerStyles(cache, serialized, isStringTag) const rules = useInsertionEffectAlwaysWithSyncFallback(() => insertStyles(cache, serialized, isStringTag) ) if (!isBrowser && rules !== undefined) { let serializedNames = serialized.name let next = serialized.next while (next !== undefined) { serializedNames += ' ' + next.name next = next.next } return ( <style {...{ [`data-emotion`]: `${cache.key} ${serializedNames}`, dangerouslySetInnerHTML: { __html: rules }, nonce: cache.sheet.nonce }} /> ) } return null } let Emotion = /* #__PURE__ */ withEmotionCache<EmotionProps>( (props, cache, ref) => { let cssProp = props.css as EmotionProps['css'] // so that using `css` from `emotion` and passing the result to the css prop works // not passing the registered cache to serializeStyles because it would // make certain babel optimisations not possible if ( typeof cssProp === 'string' && cache.registered[cssProp] !== undefined ) { cssProp = cache.registered[cssProp] } let WrappedComponent = props[ typePropName ] as EmotionProps[typeof typePropName] let registeredStyles = [cssProp] let className = '' if (typeof props.className === 'string') { className = getRegisteredStyles( cache.registered, registeredStyles, props.className ) } else if (props.className != null) { className = `${props.className} ` } let serialized = serializeStyles( registeredStyles, undefined, React.useContext(ThemeContext) ) if (isDevelopment && serialized.name.indexOf('-') === -1) { let labelFromStack = props[labelPropName] if (labelFromStack) { serialized = serializeStyles([ serialized, 'label:' + labelFromStack + ';' ]) } } className += `${cache.key}-${serialized.name}` const newProps: Record<string, unknown> = {} for (let key in props) { if ( hasOwn.call(props, key) && key !== 'css' && key !== typePropName && (!isDevelopment || key !== labelPropName) ) { newProps[key] = props[key] } } newProps.className = className if (ref) { newProps.ref = ref } return ( <> <Insertion cache={cache} serialized={serialized} isStringTag={typeof WrappedComponent === 'string'} /> <WrappedComponent {...newProps} /> </> ) } ) if (isDevelopment) { Emotion.displayName = 'EmotionCssPropInternal' } export default Emotion