Document using site-wide JSX pragma configuration

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to classic
        "importSource": "theme-ui" // defaults to react
      }
    ]
  ]
}

https://babeljs.io/docs/en/babel-plugin-transform-react-jsx

[hasparus]

okay @adamsoffer, I mostly use sx and always TypeScript 😄 Feel free to @ me when you encounter problems like this.

Thanks for this comment! That’s actually something we need to cover in the docs.

---

Previously, sx was added to global JSX types, so it was super easy to conflict with other libraries. Right now, we’re exporting JSX namespace, and TypeScript adds sx prop when it sees the pragma comment.

That’s nice, because we’re not polluting global JSX namespace anymore, but this means that if you configure Babel to support sx everywhere you need to add sx manually to React types.

You need to add the following to one of your files.

// To add `css` if you're using it somewhere
/// <reference types="@emotion/react/types/css-prop" />

import {} from 'react'
import { ThemeUIStyleObject } from '@theme-ui/core' // or 'theme-ui'

declare module 'react' {
  interface Attributes {
    sx?: ThemeUIStyleObject
  }
}

• Emotion 11 Migration Notes describe how to add css prop globally — https://emotion.sh/docs/emotion-11#css-prop-types
• TypeScript 3.0 Release Notes explain what’s happening underneath — https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx

---

We’ll add an entry point similar to @emotion/react/types/css-prop before a stable release, so it’s going to be a bit more convenient to use.

[flo-sch]

I could try something, will PR on the pragma page