Convert tailwind package to TypeScript

Author: Joe Strouth

packages/tailwind/package.json

@@ -4,11 +4,13 @@
   "version": "0.3.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "author": "John Otander <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "prepare": "microbundle --no-compress",
-    "watch": "microbundle watch --no-compress"
+    "prepare": "microbundle --no-compress --tsconfig tsconfig.json",
+    "watch": "microbundle watch --no-compress --tsconfig tsconfig.json"
   },
   "devDependencies": {
     "babel-polyfill": "^6.26.0",
@@ -27,5 +29,8 @@
     "style"
   ],
   "repository": "system-ui/theme-ui",
-  "gitHead": "5681b24d36f81fddd0d1d82cbb85136cc15dcd4c"
+  "gitHead": "5681b24d36f81fddd0d1d82cbb85136cc15dcd4c",
+  "dependencies": {
+    "@theme-ui/core": "^0.3.1"
+  }
 }

packages/tailwind/src/index.js renamed to packages/tailwind/src/index.ts

@@ -1,4 +1,8 @@
-const KEY_MAPPING = {
+import { Theme } from '@theme-ui/core'
+
+const KEY_MAPPING: {
+  readonly [Key: string]: string | string[]
+} = {
   space: 'spacing',
   radii: 'borderRadius',
   fonts: 'fontFamily',
@@ -12,23 +16,26 @@ const KEY_MAPPING = {
   zIndices: 'zIndex',
 }
 
-export default (theme, config = {}) => {
-  const transformedTheme = Object.entries(theme).reduce((acc, [key, value]) => {
-    if (!KEY_MAPPING[key]) {
+export default (theme: Theme, config: { [Key: string]: unknown } = {}) => {
+  const transformedTheme = Object.entries(theme).reduce<{
+    [Key: string]: unknown
+  }>((acc, [key, value]) => {
+    const matchingKey = KEY_MAPPING[key]
+    if (!matchingKey) {
       return {
         ...acc,
         [key]: value,
       }
-    } else if (Array.isArray(KEY_MAPPING[key])) {
-      KEY_MAPPING[key].forEach(twKey => {
+    } else if (Array.isArray(matchingKey)) {
+      matchingKey.forEach(twKey => {
         acc[twKey] = value
       })
 
       return acc
     } else {
       return {
         ...acc,
-        [KEY_MAPPING[key]]: value,
+        [matchingKey]: value,
       }
     }
   }, {})

packages/tailwind/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "strict": true
+  }
+}