Add TypeScript tooling and configs

babel.config.js

@@ -10,7 +10,7 @@ let isTestFile = filename =>
 module.exports = api => {
   api.cache(true)
   return {
-    presets: ['babel-preset-emotion-dev'],
+    presets: ['babel-preset-emotion-dev', '@babel/preset-typescript'],
     overrides: [
       {
         test: filename =>

package.json

@@ -49,33 +49,32 @@
   ],
   "eslintConfig": {
     "extends": [
-      "standard",
-      "standard-react",
-      "prettier"
+      "prettier",
+      "plugin:@typescript-eslint/eslint-recommended"
     ],
     "plugins": [
       "prettier",
-      "@emotion"
+      "@emotion",
+      "react",
+      "@typescript-eslint"
     ],
-    "parser": "babel-eslint",
+    "parser": "@typescript-eslint/parser",
     "rules": {
       "camelcase": 0,
       "no-template-curly-in-string": 0,
       "prefer-const": 0,
       "no-unused-vars": 0,
-      "import/no-duplicates": 0,
       "prettier/prettier": [
         "error",
         {
-          "parser": "typescript-eslint"
+          "parser": "typescript"
         }
       ],
       "react/jsx-curly-brace-presence": 0,
       "react/jsx-handler-names": 0,
       "react/no-unused-prop-types": 0,
       "react/prop-types": 0,
       "react/react-in-jsx-scope": 0,
-      "standard/computed-property-even-spacing": 0,
       "@emotion/pkg-renaming": 2
     },
     "env": {
@@ -93,11 +92,19 @@
       },
       {
         "files": [
-          "**/packages/*/src/*",
-          "**/packages/*/src/**/*"
+          "**/packages/**/*.ts",
+          "**/packages/**/*.tsx"
         ],
+        "parserOptions": {
+          "project": "./tsconfig.json"
+        },
         "rules": {
-          "import/no-commonjs": 2
+          "prettier/prettier": [
+            "error",
+            {
+              "parser": "typescript"
+            }
+          ]
         }
       },
       {
@@ -179,6 +186,7 @@
     "@babel/plugin-transform-react-jsx": "^7.12.17",
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
     "@babel/register": "^7.13.8",
     "@babel/runtime": "^7.13.10",
     "@changesets/changelog-github": "^0.4.0",
@@ -191,6 +199,8 @@
     "@types/jest": "^26.0.14",
     "@types/node": "^10.11.4",
     "@types/react": "^16.9.11",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "babel-check-duplicated-nodes": "^1.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.3.0",
@@ -212,15 +222,11 @@
     "eslint": "^7.10.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react": "^1.1.7",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-standard": "^4.0.1",
     "html-tag-names": "^1.1.2",
     "husky": "^3.0.9",
     "jest": "^26.4.2",
@@ -254,6 +260,7 @@
     "react-test-renderer": "16.8.6",
     "svg-tag-names": "^1.1.1",
     "through": "^2.3.8",
+    "typescript": "^4.2.4",
     "unified": "^6.1.6",
     "unist-util-visit": "^1.2.0",
     "webpack-bundle-analyzer": "3.3.2",

packages/babel-plugin/src/core-macro.js

@@ -6,13 +6,7 @@ import {
 } from './utils'
 
 export const transformCssCallExpression = (
-  {
-    state,
-    babel,
-    path,
-    sourceMap,
-    annotateAsPure = true
-  } /*: {
+  { state, babel, path, sourceMap, annotateAsPure = true } /*: {
   state: *,
   babel: *,
   path: *,
@@ -72,12 +66,7 @@ export const transformCsslessArrayExpression = (
 }
 
 export const transformCsslessObjectExpression = (
-  {
-    state,
-    babel,
-    path,
-    cssImport
-  } /*: {
+  { state, babel, path, cssImport } /*: {
   babel: *,
   state: *,
   path: *,
@@ -117,11 +106,7 @@ export const transformCsslessObjectExpression = (
 }
 
 let cssTransformer = (
-  {
-    state,
-    babel,
-    reference
-  } /*: {
+  { state, babel, reference } /*: {
   state: any,
   babel: any,
   reference: any
@@ -131,13 +116,7 @@ let cssTransformer = (
 }
 
 let globalTransformer = (
-  {
-    state,
-    babel,
-    reference,
-    importSource,
-    options
-  } /*: {
+  { state, babel, reference, importSource, options } /*: {
   state: any,
   babel: any,
   reference: any,

packages/babel-plugin/src/utils/minify.js

@@ -117,11 +117,11 @@ function replacePlaceholdersWithExpressions(
     }
   })
 
-  return interleave(strings, finalExpressions).filter((
-    node /*: { value: string } */
-  ) => {
-    return node.value !== ''
-  })
+  return interleave(strings, finalExpressions).filter(
+    (node /*: { value: string } */) => {
+      return node.value !== ''
+    }
+  )
 }
 
 function createRawStringFromTemplateLiteral(

packages/babel-plugin/src/utils/transform-expression-with-styles.js

@@ -13,13 +13,7 @@ const CSS_OBJECT_STRINGIFIED_ERROR =
   "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
 
 export let transformExpressionWithStyles = (
-  {
-    babel,
-    state,
-    path,
-    shouldLabel,
-    sourceMap = ''
-  } /*: {
+  { babel, state, path, shouldLabel, sourceMap = '' } /*: {
   babel,
   state,
   path,

packages/is-prop-valid/src/props.js

@@ -483,7 +483,6 @@ const props = {
   class: true,
   autofocus: true
 }
-// eslint-disable-next-line import/no-commonjs
 module.exports = `/^((${Object.keys(props).join(
   '|'
 )})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/`

packages/react/__tests__/css.js

@@ -268,10 +268,7 @@ test('applies class when css prop is set to nil on wrapper component', () => {
   const Button = props => <button css={{ color: 'hotpink' }} {...props} />
 
   const WrappedButton /*: React.StatelessFunctionalComponent<any> */ = (
-    {
-      children,
-      buttonStyles
-    } /*: {
+    { children, buttonStyles } /*: {
     children: React$Node,
     buttonStyles?: null
   } */

packages/server/src/create-instance/extract-critical.js

@@ -1,33 +1,32 @@
 /* import type { EmotionCache } from '@emotion/utils' */
 
-const createExtractCritical = (cache /*: EmotionCache */) => (
-  html /*: string */
-) => {
-  // parse out ids from html
-  // reconstruct css/rules/cache to pass
-  let RGX = new RegExp(`${cache.key}-([a-zA-Z0-9-_]+)`, 'gm')
+const createExtractCritical =
+  (cache /*: EmotionCache */) => (html /*: string */) => {
+    // parse out ids from html
+    // reconstruct css/rules/cache to pass
+    let RGX = new RegExp(`${cache.key}-([a-zA-Z0-9-_]+)`, 'gm')
 
-  let o = { html, ids: [], css: '' }
-  let match
-  let ids = {}
-  while ((match = RGX.exec(html)) !== null) {
-    if (ids[match[1]] === undefined) {
-      ids[match[1]] = true
+    let o = { html, ids: [], css: '' }
+    let match
+    let ids = {}
+    while ((match = RGX.exec(html)) !== null) {
+      if (ids[match[1]] === undefined) {
+        ids[match[1]] = true
+      }
     }
-  }
 
-  o.ids = Object.keys(cache.inserted).filter(id => {
-    if (
-      (ids[id] !== undefined ||
-        cache.registered[`${cache.key}-${id}`] === undefined) &&
-      cache.inserted[id] !== true
-    ) {
-      o.css += cache.inserted[id]
-      return true
-    }
-  })
+    o.ids = Object.keys(cache.inserted).filter(id => {
+      if (
+        (ids[id] !== undefined ||
+          cache.registered[`${cache.key}-${id}`] === undefined) &&
+        cache.inserted[id] !== true
+      ) {
+        o.css += cache.inserted[id]
+        return true
+      }
+    })
 
-  return o
-}
+    return o
+  }
 
 export default createExtractCritical

site/src/components/live/compiler.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-webpack-loader-syntax
 import BabelWorker from 'worker-loader!./worker'
 
 let worker

site/src/layouts/index.js

@@ -9,11 +9,7 @@ import { constants, mq } from '../utils/style'
 import { Global } from '@emotion/react'
 
 const TemplateWrapper = (
-  {
-    children,
-    sidebarOpen,
-    title
-  } /* : {
+  { children, sidebarOpen, title } /* : {
   children: React.Node
   sidebarOpen?: boolean
   title: string

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "lib": ["es6", "dom"],
+    "module": "commonjs",
+    "noEmit": true,
+    "skipDefaultLibCheck": true,
+    "strict": true,
+    "target": "es5"
+  },
+  "include": ["packages", "scripts", "site", "test", "playgrounds"],
+  "exclude": ["node_modules", "packages/*/types/test/*"]
+}