refactor: migrate windicss to unocss (#231)

packages/ui-templates/package.json

@@ -27,6 +27,7 @@
     "@nuxt/ui-assets": "^0.2.0",
     "@types/html-minifier": "^4.0.5",
     "@types/lodash.template": "^4.5.3",
+    "@unocss/reset": "^0.58.3",
     "critters": "0.0.22",
     "execa": "^8.0.1",
     "globby": "^14.0.1",
@@ -35,10 +36,9 @@
     "knitwork": "^1.0.0",
     "lodash.template": "^4.5.0",
     "scule": "^1.3.0",
+    "unocss": "^0.58.3",
     "upath": "^2.0.1",
-    "vite": "^5.0.8",
-    "vite-plugin-windicss": "^1.9.3",
-    "windicss": "^3.5.6"
+    "vite": "^5.0.11"
   },
   "publishConfig": {
     "access": "public"

packages/ui-templates/styles.ts

@@ -1 +1,2 @@
-import 'virtual:windi.css'
+import '@unocss/reset/tailwind.css'
+import 'uno.css'

packages/ui-templates/test/snapshots.spec.ts

@@ -2,6 +2,7 @@ import fsp from 'node:fs/promises'
 import { fileURLToPath } from 'node:url'
 import { beforeAll, describe, it, expect } from 'vitest'
 import { execaCommand } from 'execa'
+import { format } from 'prettier'
 
 const distDir = fileURLToPath(new URL('../dist/templates', import.meta.url))
 
@@ -12,13 +13,19 @@ describe('template', () => {
     })
   })
 
+  function formatCss (css: string) {
+    return format(css, {
+      parser: 'css'
+    })
+  }
+
   it.each(['error-404.vue', 'error-500.vue', 'error-dev.vue', 'loading.vue', 'welcome.vue'])('correctly outputs style blocks for %s', async (file) => {
     const contents = await fsp.readFile(`${distDir}/${file}`, 'utf-8')
 
     const scopedStyle = contents.match(/<style scoped>([\s\S]*)<\/style>/)
     const globalStyle = contents.match(/style: \[[\s\S]*children: `([\s\S]*)`/)
 
-    expect(scopedStyle?.[1]).toMatchSnapshot()
-    expect(globalStyle?.[1]).toMatchSnapshot()
+    expect(await formatCss(scopedStyle?.[1] || '')).toMatchSnapshot()
+    expect(await formatCss(globalStyle?.[1] || '')).toMatchSnapshot()
   })
 })

packages/ui-templates/uno.config.ts

@@ -1,15 +1,18 @@
-// eslint-disable-next-line
-const colors = require('windicss/colors')
+import { defineConfig, presetUno } from 'unocss'
 
-module.exports = {
-  purge: ['./src/**/*.html'],
-  darkMode: 'media',
+export default defineConfig({
+  presets: [
+    presetUno({
+      dark: 'media'
+    })
+  ],
+  content: {
+    filesystem: [
+      './templates/**/*.html'
+    ]
+  },
   theme: {
     colors: {
-      white: 'white',
-      black: 'black',
-      transparent: 'transparent',
-      current: 'currentColor',
       primary: {
         50: '#F2FDF9',
         100: '#E6FCF3',
@@ -41,7 +44,6 @@ module.exports = {
       'cloud-darker': '#334040',
       'cloud-darkest': '#273131',
       'cloud-black': '#1A2121',
-      blue: colors.sky,
       green: {
         // 50: "#eefdf2",
         50: '#d0fcde',
@@ -56,10 +58,6 @@ module.exports = {
         900: '#134d2e'
         // 950: "#132a1c",
       },
-      red: colors.red,
-      rose: colors.rose,
-      yellow: colors.amber,
-      orange: colors.orange,
       gray: {
         50: '#f5f5f5',
         100: '#eeeeee',
@@ -72,7 +70,6 @@ module.exports = {
         800: '#212121',
         900: '#18181B'
       },
-      purple: colors.purple,
       sky: {
         surface: '#E5F9FF',
         lightest: '#B7E1ED',
@@ -86,4 +83,4 @@ module.exports = {
       }
     }
   }
-}
+})

packages/ui-templates/vite.config.ts

@@ -2,7 +2,7 @@ import { resolve } from 'path'
 import { readdirSync } from 'fs'
 
 import { defineConfig } from 'vite'
-import WindiCSS from 'vite-plugin-windicss'
+import UnoCSS from 'unocss/vite'
 
 import { DevRenderingPlugin } from './lib/dev'
 import { RenderPlugin } from './lib/render'
@@ -24,12 +24,7 @@ export default defineConfig({
     }
   },
   plugins: [
-    WindiCSS({
-      scan: {
-        dirs: ['templates'],
-        fileExtensions: ['html']
-      }
-    }),
+    UnoCSS(),
     DevRenderingPlugin(),
     RenderPlugin()
   ],