feat(color): theme can be optional & automatically enable according to deps

Author: leedom92

package.json

@@ -26,7 +26,7 @@
     "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",
+    "release": "pnpm build && bumpp -r && pnpm -r publish --access public",
     "prepare": "simple-git-hooks"
   },
   "simple-git-hooks": {

packages/tailwindcss-color-preset/README.md

@@ -19,9 +19,21 @@ pnpm add -D tailwindcss @leedomjs/tailwindcss-color-preset
 
 const color = require('@leedomjs/tailwindcss-color-preset')
 
+
+/**
+ * There is an object param that contains some fields `element`, `naive`, `vant`.
+ * 
+ * These params default to false, setting to true will enable the color.
+ * If your project depends on `element-ui`, `element-plus`, `naive-ui`, `vant-ui`, the color will be enable automatically, even though you set value to false.
+ * 
+ */
 module.exports = {
   presets: [
-    color,
+    color({
+      element: true,
+      naive: true,
+      vant: true,
+    }),
   ],
   content: [...],
   theme: {

packages/tailwindcss-color-preset/package.json

@@ -43,6 +43,7 @@
     "tailwindcss": ">=2.2.19"
   },
   "dependencies": {
+    "local-pkg": "^0.5.0",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {

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

@@ -31,3 +31,16 @@ export type Color = string | { [key: string]: string }
 export interface ColorConfig {
   [key: string]: Color
 }
+
+/**
+ * select color
+ * @example
+ * {
+ *    element: true
+ * }
+ */
+export interface ColorOption {
+  element?: boolean
+  naive?: boolean
+  vant?: boolean
+}

packages/tailwindcss-color-preset/src/index.ts

@@ -1,23 +1,33 @@
+import { isPackageExists } from 'local-pkg'
 import {
   ElColors,
   NaiveColors,
   VanBackground,
   VanColors,
 } from './colors'
+import type { ColorOption } from './colors/types'
 
-export default {
+const ELEMENT: boolean = isPackageExists('element-ui') || isPackageExists('element-plus')
+const NAIVE: boolean = isPackageExists('naive-ui')
+const VANT: boolean = isPackageExists('vant')
+
+export default (opt: ColorOption = {
+  element: false,
+  naive: false,
+  vant: false,
+}) => ({
   theme: {
     extend: {
       colors: {
-        ...ElColors,
-        ...NaiveColors,
-        ...VanColors,
+        ...((opt.element || ELEMENT) ? ElColors : {}),
+        ...((opt.naive || NAIVE) ? NaiveColors : {}),
+        ...((opt.vant || VANT) ? VanColors : {}),
       },
       backgroundImage: {
-        ...VanBackground,
+        ...((opt.vant || VANT) ? VanBackground : {}),
       },
     },
   },
-}
+})
 
 export type * from './colors/types'

packages/tailwindcss-preset/README.md

@@ -24,13 +24,21 @@ const preset = require('@leedomjs/tailwindcss-preset')
 module.exports = {
   presets: [
     /**
-     * You can also set an object param that contains a field called `mp`.
+     * There is an object param that contains some fields `mp`, `element`, `naive`, `vant`.
+     * 
      * `mp` defaults to `false`, setting `mp` be `true` will enable the preset, 
-     * otherwise will enable default config of tailwindcss and disable the preset meanwhile
+     * otherwise will enable default config of tailwindcss and disable the preset meanwhile.
+     * 
+     * `element`, `naive`, `vant`, these params default to false, setting to true will enable the color.
+     * If your project depends on `element-ui`, `element-plus`, `naive-ui`, `vant-ui`, the color will be enable automatically, even though you set value to false.
      * 
-     * preset({ mp: true })
      */
-    preset(),
+    preset({
+      mp: true,
+      element: true,
+      naive: true,
+      vant: true,
+    }),
   ],
   content: [...],
   theme: {

packages/tailwindcss-preset/package.json

@@ -30,13 +30,11 @@
   },
   "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"
   },

packages/tailwindcss-preset/src/index.ts

@@ -1,9 +1,19 @@
+import type { ColorOption } from '@leedomjs/tailwindcss-color-preset'
 import color from '@leedomjs/tailwindcss-color-preset'
 import mp from '@leedomjs/tailwindcss-miniprogram-preset'
 
-export default (opt = { mp: false }) => ({
+const colors: ColorOption = {
+  element: false,
+  naive: false,
+  vant: false,
+}
+export default (opt = { mp: false, ...colors }) => ({
   presets: [
-    color,
+    color({
+      element: opt.element,
+      naive: opt.naive,
+      vant: opt.vant,
+    }),
     mp({
       enable: opt.mp,
     }),

pnpm-lock.yaml

@@ -3,7 +3,12 @@ import preset from '@leedomjs/tailwindcss-preset'
 /** @type {import('tailwindcss').Config} */
 export default {
   presets: [
-    preset({ mp: false }),
+    preset({
+      mp: true,
+      element: true,
+      naive: true,
+      vant: true,
+    }),
   ],
   content: ['./fixtures/index.html'],
   theme: {