refactor!: rewrite with module-builder and nuxt/kit (#419)

.github/workflows/ci.yml

@@ -38,10 +38,10 @@ jobs:
       - name: Lint
         run: yarn lint
 
-      - name: Test
-        run: yarn test
+      # - name: Test
+      #   run: yarn test
 
-      - name: Coverage
-        run: yarn codecov
-        env:
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      # - name: Coverage
+      #   run: yarn codecov
+      #   env:
+      #     CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

docs/content/tailwind/1.config.md

@@ -206,26 +206,14 @@ export default {
 }
 ```
 
-Then import where needed from `~tailwind.config`:
+Then import where needed from `#tailwind-config`:
 
 ```js
 // Import fully resolved config
-import tailwindConfig from '~tailwind.config'
+import tailwindConfig from '#tailwind-config'
 
 // Import only part which is required to allow tree-shaking
-import { theme } from '~tailwind.config'
-```
-
-If you are using TypeScript and want to use the alias to the resolved Tailwind config within your TypeScript files, you will need to add it to your `paths` object within `tsconfig.json`.
-
-```json
-{
-    "paths": {
-      "~tailwind.config": [
-        "./.nuxt/tailwind.config.json"
-      ]
-    }
-}
+import { theme } from '#tailwind-config'
 ```
 
 <d-alert type="warning">

package.json

@@ -5,25 +5,28 @@
   "repository": "nuxt-community/tailwindcss-module",
   "license": "MIT",
   "exports": {
-    ".": "./dist/index.js",
-    "./src/runtime/*": "./dist/runtime/*",
-    "./package.json": "./package.json"
+    ".": {
+      "require": "./dist/module.cjs",
+      "import": "./dist/module.mjs"
+    }
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "siroc build",
-    "dev": "nuxt example",
+    "build": "nuxt-module-build",
+    "dev": "nuxt dev playground",
     "docs": "nuxt docs",
     "lint": "eslint --ext .js,.ts,.vue",
-    "test": "yarn lint && jest",
     "prepack": "yarn build",
-    "release": "yarn test && standard-version && git push --follow-tags && npm publish"
+    "prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "release": "yarn test && standard-version && git push --follow-tags && npm publish",
+    "test": "yarn lint"
   },
   "dependencies": {
+    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
     "@nuxt/postcss8": "^1.1.3",
     "autoprefixer": "^10.4.2",
     "chalk": "^4.1.2",
@@ -38,14 +41,12 @@
     "ufo": "^0.7.10"
   },
   "devDependencies": {
+    "@nuxt/module-builder": "latest",
     "@nuxt/test-utils": "latest",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "@types/jest": "latest",
     "codecov": "latest",
     "eslint": "latest",
-    "jest": "latest",
-    "nuxt-edge": "latest",
-    "siroc": "latest",
+    "nuxt3": "latest",
     "standard-version": "latest"
   }
 }

playground/app.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <div>
+      <CallToAction />
+    </div>
+    <div class="p-4">
+      <pre>{{ JSON.stringify(tailwindConfig, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import tailwindConfig from '#tailwind-config'
+</script>

example/components/CallToAction.vue → playground/components/CallToAction.vue

@@ -8,13 +8,8 @@
       </h2>
       <div class="flex mt-8 lg:mt-0 lg:shrink-0">
         <div class="inline-flex rounded-md shadow">
-          <a href="#" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700">
-            Get started
-          </a>
-        </div>
-        <div class="inline-flex ml-3 rounded-md shadow">
-          <a href="#" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-indigo-600 bg-white border border-transparent rounded-md hover:bg-indigo-50">
-            Learn more
+          <a href="/_tailwind" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700">
+            Open Tailwind Config Viewer
           </a>
         </div>
       </div>

playground/nuxt.config.ts

@@ -0,0 +1,12 @@
+import { defineNuxtConfig } from 'nuxt3'
+import tailwindModule from '..'
+
+export default defineNuxtConfig({
+  // vite: false,
+  buildModules: [
+    tailwindModule
+  ],
+  tailwindcss: {
+    exposeConfig: true
+  }
+})