Merge pull request #686 from joestrouth1/ts-tailwind

Convert tailwind package to TypeScript

Author: mxstbr

packages/tailwind/package.json

@@ -4,16 +4,19 @@
   "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",
     "execa": "^4.0.0",
-    "tailwindcss": "^1.0.4"
+    "tailwindcss": "^1.0.4",
+    "@theme-ui/css": "^0.3.1"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,4 +1,8 @@
-const KEY_MAPPING = {
+import { Theme } from '@theme-ui/css'
+
+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/test/__snapshots__/test.js.snap renamed to packages/tailwind/test/__snapshots__/test.ts.snap

@@ -35,7 +35,7 @@ const theme = {
   size: ['10em', '20em', '30em', '40em'],
 }
 
-const toJS = theme => `
+const toJS = (theme: { [Key: string]: unknown }) => `
 module.exports = ${JSON.stringify(theme, null, 2)}
 `
 

packages/tailwind/test/test.js renamed to packages/tailwind/test/test.ts

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "strict": true
+  },
+  "exclude": ["test"]
+}