feat: use unocss wind4 preset

Author: cwandev

README.md

@@ -77,8 +77,6 @@ An mobile web apps template based on the Vue 3 ecosystem.
 ### UI Frameworks
 
 - [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine
-  - [`@unocss/preset-rem-to-px`](https://github.com/unocss/unocss/tree/main/packages/preset-rem-to-px) - Converts rem to px for all utilities
-  - [`eslint-plugin-unocss`](https://github.com/devunt/eslint-plugin-unocss) - ESLint plugin for UnoCSS
 - [Vant](https://github.com/youzan/vant) - Vue UI library for mobile web apps
   - [`vant-touch-emulator`](https://github.com/youzan/vant/tree/main/packages/vant-touch-emulator) - Simulate mobile touch events on the desktop
   - [`vant-use`](https://github.com/youzan/vant/tree/main/packages/vant-use) - Built-in composition APIs of Vant
@@ -88,7 +86,7 @@ An mobile web apps template based on the Vue 3 ecosystem.
 - [Vue Router](https://github.com/vuejs/router)
   - [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) - file system based routing
 - [Pinia](https://pinia.vuejs.org) - Intuitive, type safe, light and flexible Store for Vue using the composition api
-  - [`pinia-plugin-persistedstate`](https://github.com/prazdevs/pinia-plugin-persistedstate) -  Configurable persistence and rehydration of Pinia stores
+  - [`pinia-plugin-persistedstate`](https://github.com/prazdevs/pinia-plugin-persistedstate) - Configurable persistence and rehydration of Pinia stores
 - [Vue I18n](https://github.com/intlify/vue-i18n-next) - Internationalization
   - [`unplugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n) - unplugin for Vue I18n
 - [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - components auto import
@@ -98,7 +96,7 @@ An mobile web apps template based on the Vue 3 ecosystem.
 - [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) - To adapt different displays by one mobile viewport
 - [vite-plugin-vue-devtools](https://github.com/vuejs/devtools-next) - Designed to enhance the Vue developer experience
 - [vueuse](https://github.com/antfu/vueuse) - collection of useful composition APIs
-- [@unhead/vue](https://github.com/unjs/unhead) - manipulate document head reactively
+- [@unhead/vue v2](https://github.com/unjs/unhead) - manipulate document head reactively
 - [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - PWA
 - [vite-plugin-sitemap](https://github.com/jbaubree/vite-plugin-sitemap) - sitemap and robots generator
 

README.zh-CN.md

@@ -77,8 +77,6 @@ An mobile web apps template based on the Vue 3 ecosystem.
 ### UI 框架
 
 - [UnoCSS](https://github.com/antfu/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎
-  - [`@unocss/preset-rem-to-px`](https://github.com/unocss/unocss/tree/main/packages/preset-rem-to-px) - 将所有实用程序的 rem 转换为 px
-  - [`eslint-plugin-unocss`](https://github.com/devunt/eslint-plugin-unocss) - Unocss 的 ESLint 插件
 - [Vant](https://github.com/youzan/vant) - 移动端 Vue 组件库
   - [`vant-touch-emulator`](https://github.com/youzan/vant/tree/main/packages/vant-touch-emulator) - 在桌面端上模拟移动端 touch 事件
   - [`vant-use`](https://github.com/youzan/vant/tree/main/packages/vant-use) - Vant 内置的组合式 API
@@ -88,7 +86,7 @@ An mobile web apps template based on the Vue 3 ecosystem.
 - [Vue Router](https://github.com/vuejs/router)
   - [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) - 以文件系统为基础的路由
 - [Pinia](https://pinia.vuejs.org) - 直接的, 类型安全的, 使用 Composition API 的轻便灵活的 Vue 状态管理库
-  - [`pinia-plugin-persistedstate`](https://github.com/prazdevs/pinia-plugin-persistedstate) -  适用于 Pinia 的持久化存储插件
+  - [`pinia-plugin-persistedstate`](https://github.com/prazdevs/pinia-plugin-persistedstate) - 适用于 Pinia 的持久化存储插件
 - [Vue I18n](https://github.com/intlify/vue-i18n-next) - 国际化
   - [`unplugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n) - Vue I18n 的 Vite 插件
 - [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - 自动加载组件
@@ -98,7 +96,7 @@ An mobile web apps template based on the Vue 3 ecosystem.
 - [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) - 一款 PostCSS 插件，将固定尺寸的移动端视图转为具有最大宽度的可伸缩的移动端视图
 - [vite-plugin-vue-devtools](https://github.com/vuejs/devtools-next) - 旨在增强Vue开发者体验的Vite插件
 - [vueuse](https://github.com/antfu/vueuse) - 实用的 Composition API 工具合集
-- [@unhead/vue](https://github.com/unjs/unhead) - 响应式地操作文档头信息
+- [@unhead/vue v2](https://github.com/unjs/unhead) - 响应式地操作文档头信息
 - [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - PWA
 - [vite-plugin-sitemap](https://github.com/jbaubree/vite-plugin-sitemap) - sitemap 和 robots 生成器
 

build/vite/vconsole.ts

@@ -1,47 +1,47 @@
-import path from 'node:path'
-import process from 'node:process'
-import { loadEnv } from 'vite'
-import { viteVConsole } from 'vite-plugin-vconsole'
-
-export function createViteVConsole(mode: string) {
-  const env = loadEnv(mode, process.cwd())
-  return viteVConsole({
-    entry: [path.resolve('src/main.ts')],
-    enabled: env.VITE_APP_VCONSOLE === 'true',
-    config: {
-      maxLogNumber: 1000,
-      theme: 'light',
-    },
-    // https://github.com/vadxq/vite-plugin-vconsole/issues/21
-    dynamicConfig: {
-      theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
-    },
-    eventListener: `
-      const targetElement = document.querySelector('html'); // 择要监听的元素
-      const observerOptions = {
-        attributes: true, // 监听属性变化
-        attributeFilter: ['class'] // 只监听class属性变化
-      };
-
-      // 定义回调函数来处理观察到的变化
-      function handleAttributeChange(mutationsList) {
-        for(let mutation of mutationsList) {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-            if (window && window.vConsole) {
-              window.vConsole.dynamicChange.value = new Date().getTime();
-            }
-          }
-        }
-      }
-
-      // 创建观察者实例并传入回调函数
-      const observer = new MutationObserver(handleAttributeChange);
-
-      // 开始观察目标元素
-      observer.observe(targetElement, observerOptions);
-
-      // 当不再需要观察时，停止观察
-      // observer.disconnect();
-    `,
-  })
-}
+import path from 'node:path'
+import process from 'node:process'
+import { loadEnv } from 'vite'
+import { viteVConsole } from 'vite-plugin-vconsole'
+
+export function createViteVConsole(mode: string) {
+  const env = loadEnv(mode, process.cwd())
+  return viteVConsole({
+    entry: [path.resolve('src/main.ts')],
+    enabled: env.VITE_APP_VCONSOLE === 'true',
+    config: {
+      maxLogNumber: 1000,
+      theme: 'light',
+    },
+    // https://github.com/vadxq/vite-plugin-vconsole/issues/21
+    dynamicConfig: {
+      theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
+    },
+    eventListener: `
+      const targetElement = document.querySelector('html'); // 择要监听的元素
+      const observerOptions = {
+        attributes: true, // 监听属性变化
+        attributeFilter: ['class'] // 只监听class属性变化
+      };
+
+      // 定义回调函数来处理观察到的变化
+      function handleAttributeChange(mutationsList) {
+        for(let mutation of mutationsList) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+            if (window && window.vConsole) {
+              window.vConsole.dynamicChange.value = new Date().getTime();
+            }
+          }
+        }
+      }
+
+      // 创建观察者实例并传入回调函数
+      const observer = new MutationObserver(handleAttributeChange);
+
+      // 开始观察目标元素
+      observer.observe(targetElement, observerOptions);
+
+      // 当不再需要观察时，停止观察
+      // observer.disconnect();
+    `,
+  })
+}

eslint.config.ts

@@ -5,14 +5,10 @@ export default antfu(
     vue: true,
     typescript: true,
 
-    // enable UnoCSS support
+    // Enable UnoCSS support
     // https://unocss.dev/integrations/vscode
     unocss: true,
-
-    formatters: {
-      css: true,
-    },
-
+    formatters: true,
   },
   {
     rules: {

index.html

@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="apple-touch-icon" href="/pwa-192x192.png" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f6d2d2">
-    <meta name="msapplication-TileColor" content="#f6d2d2">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f6d2d2" />
+    <meta name="msapplication-TileColor" content="#f6d2d2" />
     <script>
       ;(function () {
         const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -18,9 +18,6 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
-    <noscript>
-      This website requires JavaScript to function properly.
-      Please enable JavaScript to continue.
-    </noscript>
+    <noscript> This website requires JavaScript to function properly. Please enable JavaScript to continue. </noscript>
   </body>
 </html>

package.json

@@ -46,8 +46,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",
     "@types/nprogress": "^0.2.3",
-    "@unocss/eslint-plugin": "66.1.0-beta.11",
-    "@unocss/preset-rem-to-px": "66.1.0-beta.11",
+    "@unocss/eslint-config": "66.1.0-beta.12",
     "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-legacy": "^6.0.2",
     "@vitejs/plugin-vue": "^5.2.3",
@@ -65,7 +64,7 @@
     "simple-git-hooks": "^2.12.1",
     "terser": "^5.39.0",
     "typescript": "^5.8.3",
-    "unocss": "66.1.0-beta.11",
+    "unocss": "66.1.0-beta.12",
     "unplugin-auto-import": "^19.1.2",
     "unplugin-vue-components": "^28.4.1",
     "unplugin-vue-router": "^0.12.0",