Theme-ui: Document using site-wide JSX pragma configuration

Created on 6 Dec 2020 · 4Comments · Source: system-ui/theme-ui

{
  "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

docs good first issue help wanted

Source

lachlanjc

👍1

Most helpful comment

okay @adamsoffer, I mostly use sx and always TypeScript :D 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.

hasparus on 22 Dec 2020

👍2

All 4 comments

@lachlanjc I'm still getting this error Property 'sx' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' when using the sx prop on a regular div element. I'm on the latest version (0.6.0-alpha.4). Any idea why?

My .babelrc file looks like this:

{
  "presets": ["next/babel"],
  "plugins": [
    "inline-react-svg",
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "module": "theme-ui",
        "import": "jsx",
        "export": "jsx"
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to classic
        "importSource": "theme-ui" // defaults to react
      }
    ]
  ]
}

adamsoffer on 21 Dec 2020

Eek! I haven't tried using this myself so I have no idea how it works in practice, just opened this issue for the future. I only use the components on my sites.

lachlanjc on 22 Dec 2020

👍1

okay @adamsoffer, I mostly use sx and always TypeScript :D 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.

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
  }
}