Merge pull request #674 from hasparus/add-sx-prop-to-jsx-namespace

fix(@theme-ui/core) Add sx prop to jsx namespace

Author: mxstbr

package.json

@@ -25,6 +25,7 @@
     "@babel/preset-typescript": "^7.8.3",
     "@babel/runtime": "^7.7.7",
     "@testing-library/react": "^9.1.3",
+    "@types/jest": "^25.1.2",
     "babel-jest": "^24.9.0",
     "husky": ">=4.0.7",
     "jest": "^24.8.0",
@@ -35,12 +36,27 @@
     "lint-staged": "10",
     "microbundle": "^0.11.0",
     "prettier": "^1.18.2",
-    "react-test-renderer": "^16.8.6"
+    "react-test-renderer": "^16.8.6",
+    "ts-jest": "^25.2.0"
   },
   "resolutions": {},
   "jest": {
+    "preset": "ts-jest/presets/js-with-babel",
+    "globals": {
+      "ts-jest": {
+        "tsConfig": {
+          "module": "commonjs",
+          "esModuleInterop": true,
+          "resolveJsonModule": true,
+          "jsx": "react",
+          "strictFunctionTypes": true,
+          "alwaysStrict": true,
+          "noImplicitThis": true
+        }
+      }
+    },
     "testMatch": [
-      "**/packages/**/test/*.js"
+      "**/packages/**/test/*.{js,ts,tsx}"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
@@ -55,7 +71,7 @@
       "html"
     ],
     "collectCoverageFrom": [
-      "packages/**/src/**/*.js",
+      "packages/**/src/**/*.{js,ts,tsx}",
       "!packages/docs/**/*",
       "!packages/presets/**/*",
       "!packages/style-guide/**/*",

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

@@ -3,12 +3,15 @@ import {
   ThemeContext as EmotionContext,
   InterpolationWithTheme,
 } from '@emotion/core'
+// @ts-ignore
 import { css } from '@theme-ui/css'
 import React from 'react'
 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"]
 }