feat: use typescript & provide dts

Author: leedom92

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "@leedomjs/eslint-config-basic"
+  "extends": "@leedomjs/eslint-config-ts",
+  "rules": {
+    "@stylistic/js/multiline-ternary": 0
+  }
 }

.github/workflows/release.yml

@@ -19,4 +19,4 @@ jobs:
 
       - run: npx changelogithub
         env:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -7,3 +7,5 @@ yarn-error.log*
 
 node_modules/
 .DS_Store
+dist
+fixtures

package.json

@@ -19,26 +19,31 @@
   "bugs": {
     "url": "https://github.com/leedomjs/tailwindcss-preset/issues"
   },
-  "main": "index.js",
   "scripts": {
     "lint": "eslint .",
     "build:css": "tailwindcss -i fixtures/styles/tailwind.css -o fixtures/styles/output.css -w",
+    "build:color": "pnpm --dir ./packages/tailwindcss-color-preset build",
+    "build:mp": "pnpm --dir ./packages/tailwindcss-miniprogram-preset build",
+    "build:preset": "pnpm --dir ./packages/tailwindcss-preset build",
+    "build": "pnpm build:color && pnpm build:mp && pnpm build:preset",
     "release": "bumpp -r && pnpm -r publish --access public",
     "prepare": "simple-git-hooks"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
   },
   "lint-staged": {
-    "packages/**/*.js": "eslint --fix"
+    "packages/**/*.ts": "eslint --fix"
   },
   "devDependencies": {
-    "@leedomjs/eslint-config-basic": "^0.11.2",
+    "@leedomjs/eslint-config-ts": "^0.11.2",
     "@leedomjs/tailwindcss-preset": "workspace:*",
     "bumpp": "^9.4.1",
     "eslint": "8.57.0",
     "lint-staged": "^15.2.2",
     "simple-git-hooks": "^2.11.1",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.3.3",
+    "unbuild": "^2.0.0"
   }
 }

packages/tailwindcss-color-preset/build.config.ts

@@ -0,0 +1,15 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig([
+  {
+    entries: ['src/index'],
+    outDir: 'dist',
+    declaration: true,
+    rollup: {
+      emitCJS: true,
+      esbuild: {
+        minify: true,
+      },
+    },
+  },
+])

packages/tailwindcss-color-preset/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@leedomjs/tailwindcss-color-preset",
+  "type": "module",
   "version": "0.2.0",
   "description": "Collecting theme color of some UI Frameworks for Tailwind CSS",
   "keywords": [
@@ -22,11 +23,30 @@
   "bugs": {
     "url": "https://github.com/leedomjs/tailwindcss-preset/issues"
   },
-  "main": "index.js",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.mjs",
+  "scripts": {
+    "build": "unbuild"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "peerDependencies": {
     "tailwindcss": ">=2.2.19"
   },
   "dependencies": {
     "tailwindcss": "^3.4.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "unbuild": "^2.0.0"
   }
 }

packages/tailwindcss-color-preset/colors/el-colors.js renamed to packages/tailwindcss-color-preset/src/colors/el-colors.ts

@@ -1,6 +1,7 @@
 // refer to https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
+import type { ColorConfig } from './types'
 
-export default {
+const ElColors: ColorConfig = {
   'el-primary': {
     DEFAULT: '#409eff',
     3: '#79bbff',
@@ -56,3 +57,5 @@ export default {
     dark: '#73767a',
   },
 }
+
+export default ElColors

packages/tailwindcss-color-preset/colors/index.js renamed to packages/tailwindcss-color-preset/src/colors/index.ts

@@ -2,3 +2,4 @@ export { default as ElColors } from './el-colors'
 export { default as NaiveColors } from './naive-colors'
 export { default as VanColors } from './van-colors'
 export { default as VanBackground } from './van-background'
+export type * from './types'

packages/tailwindcss-color-preset/colors/naive-colors.js renamed to packages/tailwindcss-color-preset/src/colors/naive-colors.ts

@@ -1,8 +1,12 @@
-export default {
+import type { ColorConfig } from './types'
+
+const NaiveColors: ColorConfig = {
   'n-primary': '#18a058',
   'n-success': '#18a058',
   'n-info': '#2080f0',
   'n-warning': '#f0a020',
   'n-error': '#d03050',
   'n-gray': '#333639',
 }
+
+export default NaiveColors

packages/tailwindcss-color-preset/src/colors/types.ts

@@ -0,0 +1,33 @@
+/**
+ * tailwindcss color param
+ * @example
+ * {
+ *   DEFAULT: '#409eff',
+ *   3: '#79bbff',
+ *   5: '#a0cfff',
+ *   7: '#c6e2ff',
+ *   8: '#d9ecff',
+ *   9: '#ecf5ff',
+ *   dark: '#337ecc',
+ * }
+ *
+ */
+export type Color = string | { [key: string]: string }
+
+/**
+ * tailwindcss color param
+ * @example
+ * 'el-primary': {
+ *   DEFAULT: '#409eff',
+ *   3: '#79bbff',
+ *   5: '#a0cfff',
+ *   7: '#c6e2ff',
+ *   8: '#d9ecff',
+ *   9: '#ecf5ff',
+ *   dark: '#337ecc',
+ * },
+ *
+ */
+export interface ColorConfig {
+  [key: string]: Color
+}