test: add unocss-vue-scoped

Author: Jungzl

playground/unocss-vue-scoped/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <HelloUnoCSS />
+</template>
+
+<script setup lang="ts">
+import HelloUnoCSS from './HelloUnoCSS.vue'
+</script>

playground/unocss-vue-scoped/HelloUnoCSS.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="uno bg-green-200 text-purple">UnoCSS</div>
+</template>

playground/unocss-vue-scoped/__tests__/unocss.spec.ts

@@ -0,0 +1,26 @@
+import { expect, test } from 'vitest'
+import {
+  editFile,
+  getBgColor,
+  isServe,
+  page,
+  untilBrowserLogAfter,
+} from '~utils'
+
+test.runIf(isServe)('regenerate CSS and HMR', async () => {
+  const el = await page.$('.uno')
+  expect(await getBgColor(el)).toBe('rgb(187, 247, 208)')
+
+  await untilBrowserLogAfter(
+    () =>
+      editFile('HelloUnoCSS.vue', (code) =>
+        code.replace('bg-green-200', 'bg-red-200'),
+      ),
+    [
+      '[vite] hot updated: /HelloUnoCSS.vue',
+      '[vite] hot updated: /HelloUnoCSS.vue?vue&type=style&index=0&scoped=468ceaae&lang.css',
+    ],
+    false,
+  )
+  await expect.poll(() => getBgColor(el)).toMatch('rgb(254, 202, 202)')
+})

playground/unocss-vue-scoped/index.html

@@ -0,0 +1,7 @@
+<div id="app"></div>
+<script type="module">
+  import { createApp } from 'vue'
+  import App from './App.vue'
+
+  createApp(App).mount('#app')
+</script>

playground/unocss-vue-scoped/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@vitejs/test-unocss-vue-scoped",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "unocss": "^66.4.1",
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "^22.16.5",
+    "@vitejs/plugin-vue": "workspace:*"
+  }
+}

playground/unocss-vue-scoped/uno.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig, presetWind3 } from 'unocss'
+
+export default defineConfig({
+  presets: [presetWind3()],
+})

playground/unocss-vue-scoped/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+
+export default defineConfig({
+  plugins: [vue(), UnoCSS({ mode: 'vue-scoped' })],
+  build: {
+    // to make tests faster
+    minify: false,
+  },
+})