feat: switch to unocss

2021-11-02 10:08:16 +08:00 · 2021-11-02 10:08:16 +08:00 · 360c9e167f
commit 360c9e167f
parent bc7d79179c
11 changed files with 142 additions and 35 deletions
--- a/README.md
+++ b/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!
--- a/components.d.ts
+++ b/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']
  }
 }
--- a/package.json
+++ b/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-windicss": "^1.4.9"
+    "vite-plugin-pages": "^0.18.1"
  }
 }
--- a/pnpm-lock.yaml
+++ b/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'}
--- a/src/App.vue
+++ b/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>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -3,14 +3,19 @@ import { isDark, toggleDark } from '~/logic'
 </script>

 <template>
-  <nav class="text-xl mt-6">
-    <button class="icon-btn mx-2 !outline-none" @click="toggleDark">
-      <carbon-moon v-if="isDark" />
-      <carbon-sun v-else />
+  <nav text-xl mt-6 inline-flex gap-2>
+    <button class="icon-btn !outline-none" @click="toggleDark()">
+      <div v-if="isDark" i-carbon-moon />
+      <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">
-      <carbon-logo-github />
-    </a>
+    <a
+      class="icon-btn"
+      i-carbon-logo-github
+      rel="noreferrer"
+      href="https://github.com/antfu/vitesse-lite"
+      target="_blank"
+      title="GitHub"
+    />
  </nav>
 </template>
--- a/src/main.ts
+++ b/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 'virtual:windi-base.css'
-import 'virtual:windi-components.css'
+import '@unocss/reset/tailwind.css'
 import './styles/main.css'
-import 'virtual:windi-utilities.css'
+import 'uno.css'

 const app = createApp(App)
 const router = createRouter({
--- a/src/pages/hi/[name].vue
+++ b/src/pages/hi/[name].vue
@ -5,13 +5,11 @@ const router = useRouter()

 <template>
  <div>
-    <p class="text-4xl">
-      <carbon-pedestrian class="inline-block" />
-    </p>
+    <div i-carbon-pedestrian text-4xl inline-block />
    <p>
      Hi, {{ props.name }}
    </p>
-    <p class="text-sm opacity-50">
+    <p text-sm op50>
      <em>Dynamic route!</em>
    </p>

--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -10,19 +10,17 @@ const go = () => {

 <template>
  <div>
-    <p class="text-4xl">
-      <carbon-campsite class="inline-block" />
-    </p>
+    <div i-carbon-campsite text-4xl inline-block />
    <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"
--- a/src/styles/main.css
+++ b/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;
-}
+} */
--- a/vite.config.ts
+++ b/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
-    WindiCSS(),
+    // https://github.com/antfu/unocss
+    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: {