test(core): add tests for css prop

.eslintrc.js

@@ -22,5 +22,6 @@ module.exports = {
 
     // TypeScript checks this
     'no-undef': 'off',
+    'no-lone-blocks': 'off',
   },
 }

packages/core/test/react-jsx.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-lone-blocks */
 
 /** @jsx jsx */
-import { renderJSON, NotHas, Assert } from '@theme-ui/test-utils'
+import { renderJSON, NotHas, Assert, expecter } from '@theme-ui/test-utils'
 
 import { jsx, SxProp, ThemeUIJSX } from '../src'
 
@@ -26,6 +26,32 @@ describe('JSX', () => {
       )
     ).toMatchSnapshot()
   })
+
+  test('accepts css prop', () => {
+    const expectSnippet = expecter(
+      `/** @jsxImportSource @theme-ui/core */
+
+      export {}`,
+      { jsx: false }
+    )
+
+    expectSnippet(`const _1 = <div css={{ color: 'red' }} />`).toSucceed()
+
+    expectSnippet(
+      `<div
+         css={(t) => {
+           const _t = t;
+           return {}
+         }}
+       />`
+    ).toInfer('_t', 'Theme')
+
+    expectSnippet(
+      `import { css } from '@emotion/react'
+
+       const TestComponent = () => <div css={css\`display: block;\`} />`
+    ).toSucceed()
+  })
 })
 
 {