feat: switch to unocss

README.md

@@ -28,9 +28,9 @@
 
 - 📦 [Components auto importing](./src/components)
 
-- 🎨 [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework
+- 🎨 [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
 
-- 😃 [Use icons from any icon sets, with no compromise](./src/components)
+- 😃 Use icons from any icon sets in [Pure CSS](https://github.com/antfu/unocss/tree/main/packages/preset-icons)
 
 - 🔥 Use the [new `<script setup>` style](https://github.com/vuejs/rfcs/pull/227)
 
@@ -46,11 +46,12 @@ See [Vitesse](https://github.com/antfu/vitesse) for full featureset.
 
 ### UI Frameworks
 
-- [Windi CSS](https://github.com/windicss/windicss) (On-demand [TailwindCSS](https://tailwindcss.com/)) - lighter and faster, with a bunch of additional features!
+- [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
 
 ### Icons
 
 - [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
+- [Pure CSS Icons via UnoCSS](https://github.com/antfu/unocss/tree/main/packages/preset-icons)
 - [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - using icons as components on-demand
 
 ### Plugins
@@ -59,7 +60,6 @@ See [Vitesse](https://github.com/antfu/vitesse) for full featureset.
   - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - file system based routing
 - [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
 - [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import
-- [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - Windi CSS integration
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
 
 ## Try it now!

components.d.ts

@@ -4,10 +4,6 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
-    CarbonCampsite: typeof import('~icons/carbon/campsite')['default']
-    CarbonLogoGithub: typeof import('~icons/carbon/logo-github')['default']
-    CarbonMoon: typeof import('~icons/carbon/moon')['default']
-    CarbonSun: typeof import('~icons/carbon/sun')['default']
     Footer: typeof import('./src/components/Footer.vue')['default']
   }
 }

package.json

@@ -16,17 +16,19 @@
     "@iconify-json/carbon": "^1.0.3",
     "@types/node": "^16.10.2",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
+    "@unocss/preset-icons": "^0.4.9",
+    "@unocss/reset": "^0.4.9",
     "@vitejs/plugin-vue": "^1.9.2",
     "@vue/compiler-sfc": "^3.2.19",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "pnpm": "^6.16.0",
     "typescript": "^4.4.3",
+    "unocss": "^0.4.9",
     "unplugin-auto-import": "^0.4.10",
     "unplugin-icons": "^0.12.3",
     "unplugin-vue-components": "^0.15.6",
     "vite": "^2.6.2",
-    "vite-plugin-pages": "^0.18.1",
+    "vite-plugin-pages": "^0.18.1"
-    "vite-plugin-windicss": "^1.4.9"
   }
 }

pnpm-lock.yaml

@@ -5,6 +5,8 @@ specifiers:
   '@iconify-json/carbon': ^1.0.3
   '@types/node': ^16.10.2
   '@typescript-eslint/eslint-plugin': ^4.32.0
+  '@unocss/preset-icons': ^0.4.9
+  '@unocss/reset': ^0.4.9
   '@vitejs/plugin-vue': ^1.9.2
   '@vue/compiler-sfc': ^3.2.19
   '@vueuse/core': ^6.5.3
@@ -12,6 +14,7 @@ specifiers:
   eslint: ^7.32.0
   pnpm: ^6.16.0
   typescript: ^4.4.3
+  unocss: ^0.4.9
   unplugin-auto-import: ^0.4.10
   unplugin-icons: ^0.12.3
   unplugin-vue-components: ^0.15.6
@@ -33,12 +36,15 @@ devDependencies:
   '@iconify-json/carbon': 1.0.3
   '@types/node': 16.10.2
   '@typescript-eslint/eslint-plugin': 4.32.0_eslint@7.32.0+typescript@4.4.3
+  '@unocss/preset-icons': 0.4.9
+  '@unocss/reset': 0.4.9
   '@vitejs/plugin-vue': 1.9.2_vite@2.6.2
   '@vue/compiler-sfc': 3.2.19
   cross-env: 7.0.3
   eslint: 7.32.0
   pnpm: 6.16.0
   typescript: 4.4.3
+  unocss: 0.4.9
   unplugin-auto-import: 0.4.10_@vueuse+core@6.5.3+vite@2.6.2
   unplugin-icons: 0.12.3_482d2d3d4c9442e66bdc4cb86c777ab2
   unplugin-vue-components: 0.15.6_vite@2.6.2+vue@3.2.19
@@ -424,6 +430,10 @@ packages:
     resolution: {integrity: sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==}
     dev: true
 
+  /@iconify/types/1.0.10:
+    resolution: {integrity: sha512-SN3z6einVeUckDQiE8p4POF7X4hk4/y2+a7a4ogJOCxX5XT6z1zXNN8dwS5O1vloXpc6mkHizRZm2qPnhK6NnQ==}
+    dev: true
+
   /@iconify/types/1.0.9:
     resolution: {integrity: sha512-ALO6IGXBEztcySLq+vGJrgUJqGgiZJ8sTQ8mM6e3i77okM9fw8F23h6GLbbaMz/pNfeK8QHJBAOmx3LjhZ3YZw==}
     dev: true
@@ -434,6 +444,12 @@ packages:
       '@iconify/types': 1.0.9
     dev: true
 
+  /@iconify/utils/1.0.18:
+    resolution: {integrity: sha512-uCfJ7FdTxDk1DLKsvynTsYX4LnkGIDw+LCpoY0mRdl+NrNPCjYZ8HHYs4xzmo7cryRe0ZT0yuF2f3oipPIHn8w==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: true
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -673,6 +689,55 @@ packages:
       eslint-visitor-keys: 2.1.0
     dev: true
 
+  /@unocss/config/0.4.9:
+    resolution: {integrity: sha512-fqRLxLRPbUg/CaEEIFHZQjrorincdZTeXnp+6ZXTSS96oCqP9DdvCTElRq23m7ux8OkRAK6liODPDElmd6nxqA==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 0.4.9
+      sucrase: 3.20.3
+    dev: true
+
+  /@unocss/core/0.4.9:
+    resolution: {integrity: sha512-uT1FRUScWsi4GfYwvROD9jjH3uSEnDnG19VS7OI4ltvarD1vhpEBn6AG6mbiOT0t1SX4cdahGTypZthXCj3VJQ==}
+    dev: true
+
+  /@unocss/preset-attributify/0.4.9:
+    resolution: {integrity: sha512-Hs4DWHD2qlQ+O91/oSJLHg+ubEF3Mda5XJ0s9tKee0P+RVvDwzpPeCbp9TBEkngmvk6ajUEp4yuDFZNRqZs2cw==}
+    dependencies:
+      '@unocss/core': 0.4.9
+    dev: true
+
+  /@unocss/preset-icons/0.4.9:
+    resolution: {integrity: sha512-Bvkb6dfV4MwuVZQedUMpUXhXDMBpiD+mUCH1VH112FAKw2IEX3s/J/+w4pN5FIjygCvOUlR/vFTbtsxzocA2Lw==}
+    dependencies:
+      '@iconify/utils': 1.0.18
+      '@unocss/core': 0.4.9
+      local-pkg: 0.4.0
+    dev: true
+
+  /@unocss/preset-uno/0.4.9:
+    resolution: {integrity: sha512-K7s0bq8uadAqBGGSmnAdLXLFezFwV6P7hZ1AfgjgD90IHtadrVTAXvQgukjVzCT7+ncUjSY6T8HD71AOG8kq1w==}
+    dependencies:
+      '@unocss/core': 0.4.9
+    dev: true
+
+  /@unocss/reset/0.4.9:
+    resolution: {integrity: sha512-FO7PtnnQpDcHfFXei96h38ttpEqrD5MxPST3o/vROa9gZtDYvYy5rYYAjxdAoXVYiRtAcIGlWbQrsikVPDgjOw==}
+    dev: true
+
+  /@unocss/scope/0.4.9:
+    resolution: {integrity: sha512-OnX0g9oNhguxQ9FyRRGlcGWp5b+G1munfzuPTSl70Pmziu9S3fHeQiXuRVhxd1pqS/X6TXYc5D9NJWyAZhWdyg==}
+    dev: true
+
+  /@unocss/vite/0.4.9:
+    resolution: {integrity: sha512-jDPLMJUIDZ40JFPE3qTybzfsSW/CRpAuG5dxYEZuh6anRC9LvuQ/3kj4nXSterOj5pVJLzES5U/XERVkHSv4VQ==}
+    dependencies:
+      '@rollup/pluginutils': 4.1.1
+      '@unocss/config': 0.4.9
+      '@unocss/core': 0.4.9
+      '@unocss/scope': 0.4.9
+    dev: true
+
   /@vitejs/plugin-vue/1.9.2_vite@2.6.2:
     resolution: {integrity: sha512-QnUQJvGmY+YT9xTidLcjr6NAjKWNdSuul1M+BZ6uwTQaO5vpAY9USBncXESATk742dYMZGJenegJgeJhG/HMNQ==}
     engines: {node: '>=12.0.0'}
@@ -2390,6 +2455,13 @@ packages:
       mlly: 0.2.4
     dev: true
 
+  /local-pkg/0.4.0:
+    resolution: {integrity: sha512-2XBWjO/v63JeR1HPzLJxdTVRQDB84Av2p2KtBA5ahvpyLUPubcAU6iXlAJrONcY7aSqgJhXxElAnKtnYsRolPQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 0.2.4
+    dev: true
+
   /locate-path/2.0.0:
     resolution: {integrity: sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=}
     engines: {node: '>=4'}
@@ -3156,6 +3228,19 @@ packages:
       ts-interface-checker: 0.1.13
     dev: true
 
+  /sucrase/3.20.3:
+    resolution: {integrity: sha512-azqwq0/Bs6RzLAdb4dXxsCgMtAaD2hzmUr4UhSfsxO46JFPAwMnnb441B/qsudZiS6Ylea3JXZe3Q497lsgXzQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      commander: 4.1.1
+      glob: 7.1.6
+      lines-and-columns: 1.1.6
+      mz: 2.7.0
+      pirates: 4.0.1
+      ts-interface-checker: 0.1.13
+    dev: true
+
   /supports-color/5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -3308,6 +3393,16 @@ packages:
       which-boxed-primitive: 1.0.2
     dev: true
 
+  /unocss/0.4.9:
+    resolution: {integrity: sha512-kMi4x6N9kdDbRdfEChmwOsOY9frH6YJqtA6RiXnpbpfCq6LchMD/GtpDsM171YvPZB0mauMpFVWQdhx4vU25og==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 0.4.9
+      '@unocss/preset-attributify': 0.4.9
+      '@unocss/preset-uno': 0.4.9
+      '@unocss/vite': 0.4.9
+    dev: true
+
   /unplugin-auto-import/0.4.10_@vueuse+core@6.5.3+vite@2.6.2:
     resolution: {integrity: sha512-wLnSQ7pZ/GTQvwSnLrs0Sqwayaha5IlHmpQR9HidvioKTsJTGHsOisu2alFct08plq3jih+j7Te7weVEeJW96g==}
     engines: {node: '>=14'}

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+  <main font-sans p="x-4 y-10" text="center gray-700 dark:gray-200">
     <router-view />
     <Footer />
   </main>

src/components/Footer.vue

@@ -3,14 +3,19 @@ import { isDark, toggleDark } from '~/logic'
 </script>
 
 <template>
-  <nav class="text-xl mt-6">
+  <nav text-xl mt-6 inline-flex gap-2>
-    <button class="icon-btn mx-2 !outline-none" @click="toggleDark">
+    <button class="icon-btn !outline-none" @click="toggleDark()">
-      <carbon-moon v-if="isDark" />
+      <div v-if="isDark" i-carbon-moon />
-      <carbon-sun v-else />
+      <div v-else i-carbon-sun />
     </button>
 
-    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse-lite" target="_blank" title="GitHub">
+    <a
-      <carbon-logo-github />
+      class="icon-btn"
-    </a>
+      i-carbon-logo-github
+      rel="noreferrer"
+      href="https://github.com/antfu/vitesse-lite"
+      target="_blank"
+      title="GitHub"
+    />
   </nav>
 </template>

src/main.ts

@@ -4,11 +4,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 import routes from 'virtual:generated-pages'
 import App from './App.vue'
 
-// windicss layers
+import '@unocss/reset/tailwind.css'
-import 'virtual:windi-base.css'
-import 'virtual:windi-components.css'
 import './styles/main.css'
-import 'virtual:windi-utilities.css'
+import 'uno.css'
 
 const app = createApp(App)
 const router = createRouter({

src/pages/hi/[name].vue

@@ -5,13 +5,11 @@ const router = useRouter()
 
 <template>
   <div>
-    <p class="text-4xl">
+    <div i-carbon-pedestrian text-4xl inline-block />
-      <carbon-pedestrian class="inline-block" />
-    </p>
     <p>
       Hi, {{ props.name }}
     </p>
-    <p class="text-sm opacity-50">
+    <p text-sm op50>
       <em>Dynamic route!</em>
     </p>
 

src/pages/index.vue

@@ -10,19 +10,17 @@ const go = () => {
 
 <template>
   <div>
-    <p class="text-4xl">
+    <div i-carbon-campsite text-4xl inline-block />
-      <carbon-campsite class="inline-block" />
-    </p>
     <p>
       <a rel="noreferrer" href="https://github.com/antfu/vitesse-lite" target="_blank">
         Vitesse Lite
       </a>
     </p>
     <p>
-      <em class="text-sm opacity-75">Opinionated Vite Starter Template</em>
+      <em text-sm op75>Opinionated Vite Starter Template</em>
     </p>
 
-    <div class="py-4" />
+    <div py-4 />
 
     <input
       id="input"

src/styles/main.css

@@ -10,6 +10,7 @@ html.dark {
   background: #121212;
 }
 
+/* 
 .btn {
   @apply px-4 py-1 rounded inline-block
     bg-teal-600 text-white cursor-pointer
@@ -22,4 +23,4 @@ html.dark {
     opacity-75 transition duration-200 ease-in-out
     hover:opacity-100 hover:text-teal-600;
   font-size: 0.9em;
-}
+} */

vite.config.ts

@@ -5,7 +5,9 @@ import Pages from 'vite-plugin-pages'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
-import WindiCSS from 'vite-plugin-windicss'
+import Unocss from 'unocss/vite'
+import { presetAttributify, presetUno } from 'unocss'
+import presetIcons from '@unocss/preset-icons'
 import AutoImport from 'unplugin-auto-import/vite'
 
 export default defineConfig({
@@ -47,8 +49,20 @@ export default defineConfig({
       autoInstall: true,
     }),
 
-    // https://github.com/antfu/vite-plugin-windicss
+    // https://github.com/antfu/unocss
-    WindiCSS(),
+    Unocss({
+      shortcuts: [
+        ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+        ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
+      ],
+      presets: [
+        presetUno(),
+        presetAttributify(),
+        presetIcons({
+          scale: 1.2,
+        }),
+      ],
+    }),
   ],
 
   server: {