You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
4.3 KiB
165 lines
4.3 KiB
3 years ago
|
// @flow
|
||
|
import * as React from 'react'
|
||
|
import { withEmotionCache } from './context'
|
||
|
import { ThemeContext } from './theming'
|
||
|
import {
|
||
|
getRegisteredStyles,
|
||
|
insertStyles,
|
||
|
registerStyles
|
||
|
} from '@emotion/utils'
|
||
|
import { hasOwnProperty, isBrowser } from './utils'
|
||
|
import { serializeStyles } from '@emotion/serialize'
|
||
|
import { getLabelFromStackTrace } from './get-label-from-stack-trace'
|
||
|
import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
|
||
|
|
||
|
let typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__'
|
||
|
|
||
|
let labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__'
|
||
|
|
||
|
export const createEmotionProps = (type: React.ElementType, props: Object) => {
|
||
|
if (
|
||
|
process.env.NODE_ENV !== 'production' &&
|
||
|
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: any = {}
|
||
|
|
||
|
for (let key in props) {
|
||
|
if (hasOwnProperty.call(props, key)) {
|
||
|
newProps[key] = props[key]
|
||
|
}
|
||
|
}
|
||
|
|
||
|
newProps[typePropName] = type
|
||
|
|
||
|
// For performance, only call getLabelFromStackTrace in development and when
|
||
|
// the label hasn't already been computed
|
||
|
if (
|
||
|
process.env.NODE_ENV !== 'production' &&
|
||
|
!!props.css &&
|
||
|
(typeof props.css !== 'object' ||
|
||
|
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 }) => {
|
||
|
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<any, any>(
|
||
|
(props, cache, ref) => {
|
||
|
let cssProp = props.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]
|
||
|
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 (
|
||
|
process.env.NODE_ENV !== 'production' &&
|
||
|
serialized.name.indexOf('-') === -1
|
||
|
) {
|
||
|
let labelFromStack = props[labelPropName]
|
||
|
if (labelFromStack) {
|
||
|
serialized = serializeStyles([
|
||
|
serialized,
|
||
|
'label:' + labelFromStack + ';'
|
||
|
])
|
||
|
}
|
||
|
}
|
||
|
|
||
|
className += `${cache.key}-${serialized.name}`
|
||
|
|
||
|
const newProps = {}
|
||
|
for (let key in props) {
|
||
|
if (
|
||
|
hasOwnProperty.call(props, key) &&
|
||
|
key !== 'css' &&
|
||
|
key !== typePropName &&
|
||
|
(process.env.NODE_ENV === 'production' || key !== labelPropName)
|
||
|
) {
|
||
|
newProps[key] = props[key]
|
||
|
}
|
||
|
}
|
||
|
newProps.ref = ref
|
||
|
newProps.className = className
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<Insertion
|
||
|
cache={cache}
|
||
|
serialized={serialized}
|
||
|
isStringTag={typeof WrappedComponent === 'string'}
|
||
|
/>
|
||
|
<WrappedComponent {...newProps} />
|
||
|
</>
|
||
|
)
|
||
|
}
|
||
|
)
|
||
|
|
||
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
Emotion.displayName = 'EmotionCssPropInternal'
|
||
|
}
|
||
|
|
||
|
export default Emotion
|