fix(@theme-ui/core): add typescript jsx support

Author: hasparus

package.json

@@ -47,7 +47,11 @@
         "tsConfig": {
           "module": "commonjs",
           "esModuleInterop": true,
-          "resolveJsonModule": true
+          "resolveJsonModule": true,
+          "jsx": "react",
+          "strictFunctionTypes": true,
+          "alwaysStrict": true,
+          "noImplicitThis": true
         }
       }
     },

packages/core/package.json

@@ -19,6 +19,8 @@
   "dependencies": {
     "@emotion/core": "^10.0.0",
     "@theme-ui/css": "^0.3.1",
+    "@types/styled-system": "^5.1.6",
+    "@types/styled-system__css": "^5.0.4",
     "deepmerge": "^4.2.2"
   },
   "peerDependencies": {

packages/core/src/index.ts

@@ -10,6 +10,8 @@ import deepmerge from 'deepmerge'
 import { version as __EMOTION_VERSION__ } from '@emotion/core/package.json'
 import { Theme } from './theme'
 
+import './react-jsx'
+
 export * from './theme'
 
 const getCSS = props => {

packages/core/src/react-jsx.ts

@@ -0,0 +1,13 @@
+import { SxProps } from './theme'
+
+declare module 'react' {
+  // tslint:disable-next-line: no-empty-interface
+  interface DOMAttributes<T> extends SxProps {}
+}
+
+declare global {
+  namespace JSX {
+    // tslint:disable-next-line: no-empty-interface
+    interface IntrinsicAttributes extends SxProps {}
+  }
+}

packages/core/test/__snapshots__/react-jsx.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JSX accepts sx prop 1`] = `
+.emotion-0 {
+  margin-top: 10px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+<div
+  className="emotion-0"
+/>
+`;

packages/core/test/react-jsx.tsx

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { jsx } from '../src'
+import renderer from 'react-test-renderer'
+
+const renderJSON = (el: React.ReactNode) => renderer.create(el).toJSON()
+
+describe('JSX', () => {
+  test('accepts sx prop', () => {
+    expect(
+      renderJSON(
+        <div
+          sx={{
+            // TypeScript support should autocomplete keys here
+            mt: 10,
+            px: 2,
+          }}
+        />
+      )
+    ).toMatchSnapshot()
+  })
+})

packages/core/tsconfig.json

@@ -2,6 +2,8 @@
   "compilerOptions": {
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "moduleResolution": "node"
-  }
+    "moduleResolution": "node",
+    "jsx": "react"
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }

yarn.lock

@@ -1377,7 +1377,7 @@
     "@babel/parser" "^7.8.3"
     "@babel/types" "^7.8.3"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.6.0", "@babel/traverse@^7.7.2", "@babel/traverse@^7.7.4", "@babel/traverse@^7.8.0", "@babel/traverse@^7.8.4":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.6.0", "@babel/traverse@^7.7.2", "@babel/traverse@^7.7.4", "@babel/traverse@^7.8.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.4.tgz#f0845822365f9d5b0e312ed3959d3f827f869e3c"
   integrity sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==
@@ -3585,6 +3585,20 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/styled-system@^5.1.6":
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.6.tgz#4f45612df1f0987a05465dd280b16818e3e27c73"
+  integrity sha512-npB/Fdqc1TH6UwyB9CtsTXkg3zb8jg/WG4LUEQ85cY6oSRgRbytxfsgbgdG+YWQFtbznp3J/4BAdkPB+WsHheA==
+  dependencies:
+    csstype "^2.6.4"
+
+"@types/styled-system__css@^5.0.4":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.4.tgz#df83b015cf377ab39ecf33ea31339c05eeb9230a"
+  integrity sha512-SHHoNh9cCRTG9hcmCD2ua0NeYUrLmLXoMJ7g0U/e0FjrzcwNQtM5wjjEJVCVZymU632xA1PdPEykrtoSHTIecA==
+  dependencies:
+    csstype "^2.6.6"
+
 "@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.10.0.tgz#590d76e3875a7c536dc744eb530cbf51b6483404"
@@ -8215,6 +8229,11 @@ csstype@^2.2.0, csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
   integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
 
+csstype@^2.6.4, csstype@^2.6.6:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
+  integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"