feat(gui-v2): use nuxt-windicss module

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/nuxt.config.ts

@@ -2,15 +2,14 @@ import path from 'path'
 import { defineNuxtConfig } from 'nuxt'
 import vueI18n from '@intlify/vite-plugin-vue-i18n'
 import Icons from 'unplugin-icons/vite'
-import WindiCSS from 'vite-plugin-windicss'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  modules: ['@vueuse/nuxt'],
+  modules: ['@vueuse/nuxt', 'nuxt-windicss'],
 
   ssr: false,
 
-  css: ['vuetify/lib/styles/main.sass'],
+  css: ['virtual:windi.css', 'virtual:windi-devtools', 'vuetify/lib/styles/main.sass'],
 
   build: {
     transpile: ['vuetify'],

packages/nc-gui-v2/package.json

@@ -1,10 +1,10 @@
 {
   "private": true,
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "generate": "nuxi generate",
+    "start": "node .output/server/index.mjs",
     "lint": "eslint --ext \".js,.jsx,.ts,.tsx,.vue\" --fix --ignore-path .gitignore ."
   },
   "dependencies": {
@@ -21,13 +21,14 @@
     "@intlify/vite-plugin-vue-i18n": "^4.0.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vueuse/nuxt": "^8.6.0",
+    "@windicss/plugin-scrollbar": "^1.2.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "nuxt": "3.0.0-rc.4",
+    "nuxt-windicss": "^2.4.2",
     "prettier": "^2.7.1",
     "sass": "^1.53.0",
     "unplugin-icons": "^0.14.7",
-    "vite-plugin-windicss": "^1.8.6",
     "windicss": "^3.5.6"
   }
 }

packages/nc-gui-v2/tsconfig.json

@@ -10,11 +10,12 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": ["@intlify/vite-plugin-vue-i18n/client", "vue-i18n", "unplugin-icons/types/vue"]
+    "types": ["@intlify/vite-plugin-vue-i18n/client", "vue-i18n", "unplugin-icons/types/vue", "nuxt-windicss"]
   },
   "files": ["nuxt-shim.d.ts", "windi.config.ts"],
   "exclude": [
     "node_modules",
-    "dist"
+    "dist",
+    ".output"
   ]
 }

packages/nc-gui-v2/windi.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'windicss/helpers'
+// @ts-expect-error no types for plugin-scrollbar
+import scrollbar from '@windicss/plugin-scrollbar'
+import colors from './utils/colorsUtils'
+
+export default defineConfig({
+  extract: {
+    include: ['**/*.{vue,html,jsx,tsx}'],
+    exclude: ['node_modules', '.git'],
+  },
+
+  attributify: true,
+  darkMode: 'class',
+
+  plugins: [scrollbar],
+
+  theme: {
+    extend: {
+      colors: {
+        dark: colors.dark,
+        light: colors.light,
+      },
+    },
+  },
+})