fix: build-web workflow

.github/workflows/main.yml

@@ -129,6 +129,9 @@ jobs:
         run: |
           mkdir unraid-ui-dist
           mv dist/ unraid-ui-dist/dist/
+          mv src unraid-ui-dist/src
+          ln -s unraid-ui-dist/dist/node_modules unraid-ui-dist/node_modules
+          mv tailwind.config.ts unraid-ui-dist/tailwind.config.ts
           mv package.json unraid-ui-dist/package.json
           ls unraid-ui-dist
 
@@ -167,19 +170,12 @@ jobs:
           cache-dependency-path: |
             web/package-lock.json
           node-version-file: "web/.nvmrc"
+      
+      - name: Setup Just
+        uses: extractions/setup-just@v2
 
-      - name: Remove Existing Unraid UI folder
+      - name: Installing deps
-        run: |
+        run: just setup
-          rm -r ../unraid-ui
-
-      - name: Download Artifact for Unraid UI
-        uses: actions/download-artifact@v4
-        with:
-          name: unraid-ui
-          path: unraid-ui
-
-      - name: Installing node deps
-        run: npm install
 
       - name: Lint files
         continue-on-error: true

unraid-ui/justfile

@@ -0,0 +1,13 @@
+default: list-commands
+
+list-commands:
+    @just --list --justfile {{justfile()}} --list-heading $'\nMonorepo recipes:\n'  
+
+# Prepares the repo for development
+setup:
+    npm install
+    npm run build
+
+clean:
+    npm run clean
+    rm -rf node_modules

unraid-ui/package.json

@@ -31,20 +31,21 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.2.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@vueuse/core": "^10.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.468.0",
     "radix-vue": "^1.9.11",
     "shadcn-vue": "^0.11.3",
-    "tailwind-merge": "^2.5.5"
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
     "@storybook/vue3-vite": "^8.4.7",
-    "@tailwindcss/typography": "^0.5.15",
     "@testing-library/vue": "^8.0.0",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.0.0",
@@ -58,17 +59,16 @@
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.32.0",
-    "happy-dom": "^12.0.0",
+    "happy-dom": "^16.6.0",
     "postcss": "^8.4.49",
     "prettier": "3.4.2",
     "tailwindcss": "^3.0.0",
-    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.0.0",
     "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.0.0",
+    "vite-plugin-dts": "^4.5.0",
     "vitest": "^1.0.0",
     "vue": "^3.3.0",
-    "vue-tsc": "^1.8.0"
+    "vue-tsc": "^2.2.0"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.30.1"
@@ -82,10 +82,14 @@
     "./styles": "./dist/style.css",
     "./styles/*": "./src/styles/*",
     "./tailwind.config": {
-      "types": "./dist/tailwind.config.d.ts",
+      "types": "./dist/tailwind.d.ts",
       "import": "./dist/tailwind.config.js",
       "default": "./dist/tailwind.config.js"
     },
+    "./tailwind.config.ts": {
+      "import": "./tailwind.config.ts",
+      "default": "./tailwind.config.ts"
+    },
     "./theme/preset": {
       "types": "./dist/theme/preset.d.ts",
       "import": "./dist/theme/preset.js"

unraid-ui/src/theme/import-hack.ts

@@ -0,0 +1,9 @@
+// Purpose: force vite to include these dependencies in the build output.
+// They don't show up when required, so the build will fail in CI. 
+// When imported as ESM, some combination of our dependencies causes the imports to err out at runtime 
+// and break tailwind config resolution.
+//
+// By adding these imports as side effects to the vite build, we can brute-force the desired behavior.
+// Once we have a better understanding of the root cause, and our dependencies have stabilized, we should remove this hack.
+import "@tailwindcss/typography";
+import "tailwindcss-animate";

unraid-ui/src/theme/preset.ts

@@ -1,7 +1,5 @@
 import type { Config } from "tailwindcss";
 import type { PluginAPI } from "tailwindcss/types/config";
-import typography from "@tailwindcss/typography";
-import animate from "tailwindcss-animate";
 
 export const unraidPreset = {
   darkMode: ['selector', '[data-mode="dark"]'],
@@ -241,5 +239,5 @@ export const unraidPreset = {
       }),
     },
   },
-  plugins: [typography, animate],
+  plugins: [require('@tailwindcss/typography'), require('tailwindcss-animate')],
 } satisfies Partial<Config>; 

unraid-ui/vite.config.ts

@@ -34,6 +34,7 @@ export default function createConfig() {
           index: resolve(__dirname, 'src/index.ts'),
           tailwind: resolve(__dirname, 'tailwind.config.ts'),
           preset: resolve(__dirname, 'src/theme/preset.ts'),
+          importHack: resolve(__dirname, 'src/theme/import-hack.ts'),
         },
         preserveEntrySignatures: 'allow-extension',
         output: {

web/justfile

@@ -5,5 +5,10 @@ default:
     @just list-commands
 
 setup:
+    just ../unraid-ui/setup
     cp .env.example .env
     npm install
+
+clean:
+    rm -rf .nuxt
+    rm -rf node_modules

web/package.json

@@ -2,6 +2,7 @@
   "name": "connect-components",
   "version": "3.10.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "nuxt dev",
     "lint": "eslint .",
@@ -35,7 +36,7 @@
     "@nuxt/eslint": "^0.7.3",
     "@nuxtjs/tailwindcss": "^6.12.2",
     "@rollup/plugin-strip": "^3.0.4",
-    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/crypto-js": "^4.2.2",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/node": "^22",