Add sx prop to Themed components

As of v0.6, the Styled component was renamed to Themed. After renaming all imports and updating theme-ui, the sx styles on my Themed components are no longer applied unless I explicitly state @jsxImportSource theme-ui (auto runtime) or @jsx jsx (classic). The sx object is also no longer recognized by VS Code as an instance of ThemeUIStyleObject for Themed, whereas it is properly reflected for Box, Image, etc.

This seems to be a regression made somewhere between 0.5 and 0.6, as all my Styled components worked as intended up until the 0.6 release. Tested and confirmed on all 0.6 versions.

Example code:

import { Box, Flex, Image, Themed } from 'theme-ui'

export default () => (
  <Flex sx={{ width: 100vw, height: 100vh, justifyContent: 'center', alignItems: 'center' }}>
    <Box sx={{ flexGrow: 1 }}>
      <Image ... />
      <Themed.h1 sx={{ textAlign: 'center', textTransform: 'uppercase' }}>Enter Site</Themed.h1>
    </Box>
  </Flex>
)

Expected:

Actual:

[hoobdeebla]

My mistake, I was testing going back and forth between classic/pragma and automatic/@jsxImportSource and must have gotten confused along the way. I went back and tested on a 0.3 site and confirmed that Themed.X never had a sx prop without using the pragma.

IMO the sx prop on Themed.X components should work without a pragma and without a custom Babel config, just as Box does now. Using the Babel config suggested in #1335 on a Gatsby site broke gatsby-plugin-mdx (I removed "importSource": "theme-ui" to fix this), so I have only added @jsxImportSource theme-ui to pages that necessitate use of the sx prop on non-Theme UI components. Currently that includes pages that use Themed.X - confusing, right? I avoid using the pragma most of the time by aliasing to Box, i.e. <Box as='article' sx={...}> or <Box as={GatsbyLink} sx={...}>, but doing <Box as='h1' variant='styles.h1' sx={...}> defeats the purpose of having <Themed.h1 sx={...}> in the first place, so I end up declaring the import source for files that use Themed.X. After Themed.X has a native sx prop, I won’t need to declare @jsxImportSource theme-ui anywhere.

As an aside, it would be cool if Themed.X got the variant and style props like Box as well.

[fwextensions]

I’m using JS.