package.src.emotion-element.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of react Show documentation
> Simple styling in React.
The newest version!
import * as React from 'react'
import { withEmotionCache } from './context'
import { ThemeContext } from './theming'
import {
  getRegisteredStyles,
  insertStyles,
  registerStyles
} from '@emotion/utils'
import { hasOwn } from './utils'
import { 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'

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 (
    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 /*: any */ = {}

  for (let key in props) {
    if (hasOwn.call(props, key)) {
      newProps[key] = props[key]
    }
  }

  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.EMOTION_RUNTIME_AUTO_LABEL &&
    !!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 (