feat: upgrade tailwind config and input file

META DATA: @toantranmei
toantranmei · May 4, 2024 · a556fdf · a556fdf
1 parent 8a8e1ac
commit a556fdf
Show file tree

Hide file tree

Showing 14 changed files with 469 additions and 550 deletions.
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "@iconify-json/heroicons": "^1.1.20",
     "@nuxt/kit": "^3.11.1",
     "@nuxtjs/color-mode": "^3.3.3",
-    "@nuxtjs/tailwindcss": "6.11.4",
+    "@nuxtjs/tailwindcss": "^6.11.4",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",

diff --git a/playground/app.config.ts b/playground/app.config.ts
@@ -1,7 +1,3 @@
 // @ts-ignore
 export default defineAppConfig({
-  meiUI: {
-    primary: "purple",
-    gray: "cool",
-  },
 });
diff --git a/playground/pages/table.vue b/playground/pages/table.vue
@@ -46,5 +46,5 @@ const people = [
 </script>
 
 <template>
-  <MeiDataTable :rows="people" />
+  <MeiTable :rows="people" />
 </template>
diff --git a/playground/tailwind.config.ts b/playground/tailwind.config.ts
diff --git a/src/module.ts b/src/module.ts
@@ -11,25 +11,14 @@ import {
 } from "@nuxt/kit";
 
 import {
-  iconsPlugin,
   type CollectionNames,
   type IconsPluginOptions,
-  getIconCollections,
 } from "@egoist/tailwindcss-icons";
 import createTemplates from "./runtime/templates";
-import {
-  generateSafelist,
-  excludeColors,
-  customSafelistExtractor,
-} from "./runtime/colors";
 import * as config from "./runtime/ui-configs";
 import type { DeepPartial, Strategy } from "./runtime/types/utils";
-import type { Config } from "tailwindcss";
-import { defaultExtractor as createDefaultExtractor } from "tailwindcss/lib/lib/defaultExtractor.js";
+import installTailwind from './runtime/tailwind'
 
-const defaultExtractor = createDefaultExtractor({
-  tailwindConfig: { separator: ":" },
-});
 const _require = createRequire(import.meta.url);
 const defaultColors = _require("tailwindcss/colors.js");
 
@@ -80,10 +69,7 @@ export default defineNuxtModule<ModuleOptions>({
   meta: {
     name,
     version,
-    configKey: "meiUI",
-    compatibility: {
-      nuxt: "^3.10.0",
-    },
+    configKey: "meiUI"
   },
   defaults: {
     prefix: "Mei",
@@ -108,116 +94,13 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.options.css.push(resolve(runtimeDir, "mei-ui.css"));
     }
 
-    nuxt.hook<any>("tailwindcss:config", function (tailwindConfig: Config) {
-      tailwindConfig.theme = tailwindConfig.theme || {};
-      tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
-      tailwindConfig.theme.extend.colors =
-        tailwindConfig.theme.extend.colors || {};
-
-      const globalColors: any = {
-        ...(tailwindConfig.theme.colors || defaultColors),
-        ...tailwindConfig.theme.extend?.colors,
-      };
-
-      globalColors.primary = tailwindConfig.theme.extend.colors["primary"] = {
-        50: "rgb(var(--color-primary-50) / <alpha-value>)",
-        100: "rgb(var(--color-primary-100) / <alpha-value>)",
-        200: "rgb(var(--color-primary-200) / <alpha-value>)",
-        300: "rgb(var(--color-primary-300) / <alpha-value>)",
-        400: "rgb(var(--color-primary-400) / <alpha-value>)",
-        500: "rgb(var(--color-primary-500) / <alpha-value>)",
-        600: "rgb(var(--color-primary-600) / <alpha-value>)",
-        700: "rgb(var(--color-primary-700) / <alpha-value>)",
-        800: "rgb(var(--color-primary-800) / <alpha-value>)",
-        900: "rgb(var(--color-primary-900) / <alpha-value>)",
-        950: "rgb(var(--color-primary-950) / <alpha-value>)",
-        DEFAULT: "rgb(var(--color-primary-DEFAULT) / <alpha-value>)",
-      };
-
-      if (globalColors.gray) {
-        globalColors.cool = tailwindConfig.theme.extend.colors["cool"] =
-          defaultColors.gray;
-      }
-
-      globalColors.gray = tailwindConfig.theme.extend.colors["gray"] = {
-        50: "rgb(var(--color-gray-50) / <alpha-value>)",
-        100: "rgb(var(--color-gray-100) / <alpha-value>)",
-        200: "rgb(var(--color-gray-200) / <alpha-value>)",
-        300: "rgb(var(--color-gray-300) / <alpha-value>)",
-        400: "rgb(var(--color-gray-400) / <alpha-value>)",
-        500: "rgb(var(--color-gray-500) / <alpha-value>)",
-        600: "rgb(var(--color-gray-600) / <alpha-value>)",
-        700: "rgb(var(--color-gray-700) / <alpha-value>)",
-        800: "rgb(var(--color-gray-800) / <alpha-value>)",
-        900: "rgb(var(--color-gray-900) / <alpha-value>)",
-        950: "rgb(var(--color-gray-950) / <alpha-value>)",
-      };
-
-      const colors = excludeColors(globalColors);
-
-      nuxt.options.appConfig.meiUI = {
-        primary: "green",
-        gray: "cool",
-        colors,
-        strategy: "merge",
-      };
-
-      tailwindConfig.safelist = tailwindConfig.safelist || [];
-      tailwindConfig.safelist.push(
-        ...generateSafelist(options.safelistColors || [], colors)
-      );
-    });
-
+    // create templates types definitions
     createTemplates(nuxt);
 
-    // Modules
+    // Install dependency modules
     await installModule("nuxt-icon");
     await installModule("@nuxtjs/color-mode", { classSuffix: "" });
-    await installModule("@nuxtjs/tailwindcss", {
-      exposeConfig: true,
-      config: {
-        darkMode: "class",
-        plugins: [
-          require("@tailwindcss/forms")({ strategy: "class" }),
-          require("@tailwindcss/aspect-ratio"),
-          require("@tailwindcss/typography"),
-          require("@tailwindcss/container-queries"),
-          require("@headlessui/tailwindcss"),
-          iconsPlugin(
-            Array.isArray(options.icons) || options.icons === "all"
-              ? { collections: getIconCollections(options.icons) }
-              : typeof options.icons === "object"
-              ? (options.icons as IconsPluginOptions)
-              : {}
-          ),
-        ],
-        content: {
-          files: [
-            resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
-            resolve(runtimeDir, "ui-configs/**/*.{mjs,js,ts}"),
-          ],
-          transform: {
-            vue: (content) => {
-              return content.replaceAll(/(?:\r\n|\r|\n)/g, " ");
-            },
-          },
-          extract: {
-            vue: (content) => {
-              return [
-                ...defaultExtractor(content),
-                // @ts-ignore
-                ...customSafelistExtractor(
-                  options.prefix,
-                  content,
-                  nuxt.options.appConfig.meiUI["colors"],
-                  options.safelistColors
-                ),
-              ];
-            },
-          },
-        },
-      },
-    });
+    await installTailwind(options, nuxt, resolve)
 
     // Plugins
     addPlugin({