jsx

import { jsx } from 'theme-ui'

function jsx<P extends {}>(
  type: React.FunctionComponent<P> | React.ComponentClass<P> | string,
  props: React.Attributes & P,
  ...children: React.ReactNode[]
): React.ReactElement

<div sx={{ color: 'primary', bg: 'background' }}>
  Content
</div>

/** @jsxImportSource theme-ui */

function Component() {
  return (
    <div sx={{ color: 'primary' }}>
      Hello
    </div>
  )
}

/** @jsx jsx */
import { jsx } from 'theme-ui'

function Component() {
  return (
    <div sx={{ color: 'primary' }}>
      Hello
    </div>
  )
}

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "theme-ui"
  }
}

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic",
        "importSource": "theme-ui"
      }
    ]
  ]
}

function Component() {
  return (
    <div sx={{ color: 'primary' }}>
      Hello
    </div>
  )
}

import { jsx } from 'theme-ui'

function Component() {
  return jsx(
    'div',
    {
      sx: {
        color: 'primary',
        bg: 'background',
      },
    },
    'Hello'
  )
}

<div
  sx={{ bg: 'primary' }}
  css={{ margin: 0 }}
>
  Content
</div>

export const jsx: typeof React.createElement = <P extends {}>(
  type: React.FunctionComponent<P> | React.ComponentClass<P> | string,
  props: React.Attributes & P,
  ...children: React.ReactNode[]
): any => emotionJsx(type, parseProps(props), ...children)

export function parseProps(props: any) {
  if (!props || (!props.sx && !props.css)) return props

  const next: Record<string, unknown> = {}

  for (let key in props) {
    if (key === 'sx') continue
    next[key] = props[key]
  }

  next.css = getCSS(props)
  return next
}

jsx('div', {
  sx: {
    mx: 'auto',
    p: 2,
    bg: 'tomato',
  },
})
// Renders with margin-left/right: auto, padding: 8px, background: tomato

jsx('div', {
  css: {
    margin: 4,
  },
})
// Renders with margin: 4px

jsx('div', {
  css: (theme: Theme) => ({
    color: theme.colors?.primary,
  }),
})
// Accesses theme at render time

jsx('div', {
  css: { margin: 0 },
  sx: { bg: 'tomato' },
})
// Both styles are applied