feat: move to unocss

.vscode/extensions.json

@@ -1,11 +1,11 @@
 {
   "recommendations": [
-    "antfu.vite",
-    "johnsoncodehk.volar",
-    "lokalise.i18n-ally",
     "antfu.iconify",
+    "antfu.unocss",
+    "antfu.vite",
+    "csstools.postcss",
     "dbaeumer.vscode-eslint",
-    "voorjaar.windicss-intellisense",
+    "johnsoncodehk.volar",
-    "csstools.postcss"
+    "lokalise.i18n-ally"
   ]
 }

.vscode/settings.json

@@ -1,10 +1,10 @@
 {
   "cSpell.words": ["Vitesse"],
+  "i18n-ally.sourceLanguage": "en",
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": "locales",
   "i18n-ally.sortKeys": true,
   "prettier.enable": false,
-  "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
   },

README.md

@@ -1,5 +1,5 @@
 <p align='center'>
-  <img src='https://user-images.githubusercontent.com/11247099/111864893-a457fd00-899e-11eb-9f05-f4b88987541d.png' alt='Vitesse - Opinionated Vite Starter Template' width='600'/>
+  <img src='https://user-images.githubusercontent.com/11247099/154486432-9f424d8a-088a-47ab-92c5-b24a0e7c147e.png' alt='Vitesse - Opinionated Vite Starter Template' width='600'/>
 </p>
 
 <p align='center'>
@@ -35,9 +35,9 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 - 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
 
-- 🎨 [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](https://github.com/antfu/unplugin-icons)
+- 😃 [Use icons from any icon sets with classes](https://github.com/antfu/unocss/tree/main/packages/preset-icons)
 
 - 🌍 [I18n ready](./locales)
 
@@ -63,13 +63,12 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 ### 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.
-  - [Windi CSS Typography](https://windicss.org/plugins/official/typography.html)
 
 ### Icons
 
 - [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
-- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - icons as Vue components
+- [Pure CSS Icons via UnoCSS](https://github.com/antfu/unocss/tree/main/packages/preset-icons)
 
 ### Plugins
 
@@ -80,7 +79,6 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 - [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import
 - [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
 - [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
-- [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - Windi CSS Integration
 - [`vite-plugin-md`](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
   - [`markdown-it-prism`](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting
   - [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) - customizable Prism.js theme using CSS variables
@@ -108,7 +106,6 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
   - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 `<script setup>` IDE support
   - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Icon inline display and autocomplete
   - [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) - All in one i18n support
-  - [Windi CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - IDE support for Windi CSS
   - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
 ## Variations

package.json

@@ -28,6 +28,11 @@
     "@intlify/vite-plugin-vue-i18n": "^3.3.0",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/nprogress": "^0.2.0",
+    "@unocss/preset-attributify": "^0.24.4",
+    "@unocss/preset-icons": "^0.24.4",
+    "@unocss/preset-typography": "^0.24.4",
+    "@unocss/preset-web-fonts": "^0.24.4",
+    "@unocss/reset": "^0.24.4",
     "@vitejs/plugin-vue": "^2.2.0",
     "@vue/test-utils": "^2.0.0-rc.18",
     "critters": "^0.0.16",
@@ -40,8 +45,8 @@
     "markdown-it-prism": "^2.2.2",
     "pnpm": "^6.31.0",
     "typescript": "^4.5.5",
+    "unocss": "^0.24.4",
     "unplugin-auto-import": "^0.6.0",
-    "unplugin-icons": "^0.13.1",
     "unplugin-vue-components": "^0.17.18",
     "vite": "^2.8.3",
     "vite-plugin-inspect": "^0.3.14",
@@ -49,7 +54,6 @@
     "vite-plugin-pages": "^0.20.2",
     "vite-plugin-pwa": "^0.11.13",
     "vite-plugin-vue-layouts": "^0.6.0",
-    "vite-plugin-windicss": "^1.7.0",
     "vite-ssg": "^0.17.10",
     "vitest": "^0.3.6",
     "vue-tsc": "^0.31.4"

src/components.d.ts

@@ -4,12 +4,6 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
-    CarbonCampsite: typeof import('~icons/carbon/campsite')['default']
-    CarbonDicomOverlay: typeof import('~icons/carbon/dicom-overlay')['default']
-    CarbonLanguage: typeof import('~icons/carbon/language')['default']
-    CarbonLogoGithub: typeof import('~icons/carbon/logo-github')['default']
-    CarbonMoon: typeof import('~icons/carbon/moon')['default']
-    CarbonSun: typeof import('~icons/carbon/sun')['default']
     Counter: typeof import('./components/Counter.vue')['default']
     Footer: typeof import('./components/Footer.vue')['default']
     README: typeof import('./components/README.md')['default']

src/components/Footer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDark, toggleDark } from '~/composables'
+import { toggleDark } from '~/composables'
 
 const { t, availableLocales, locale } = useI18n()
 
@@ -11,26 +11,25 @@ const toggleLocales = () => {
 </script>
 
 <template>
-  <nav class="text-xl mt-6">
+  <nav text-xl mt-6>
     <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
-      <carbon-campsite />
+      <div i-carbon-campsite />
     </router-link>
 
     <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
-      <carbon-moon v-if="isDark" />
+      <div i="carbon-sun dark:carbon-moon" />
-      <carbon-sun v-else />
     </button>
 
     <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales">
-      <carbon-language />
+      <div i-carbon-language />
     </a>
 
     <router-link class="icon-btn mx-2" to="/about" :title="t('button.about')">
-      <carbon-dicom-overlay />
+      <div i-carbon-dicom-overlay />
     </router-link>
 
     <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
-      <carbon-logo-github />
+      <div i-carbon-logo-github />
     </a>
   </nav>
 </template>

src/layouts/404.vue

@@ -4,18 +4,13 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <main class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
+  <main p="x4 y10" text="center teal-700 dark:gray-200">
-    <div>
+    <div text-4xl>
-      <p class="text-4xl">
+      <div i-carbon-warning inline-block />
-        <carbon-warning class="inline-block" />
-      </p>
     </div>
     <router-view />
     <div>
-      <button
+      <button btn text-sm m="3 t8" @click="router.back()">
-        class="btn m-3 text-sm mt-8"
-        @click="router.back()"
-      >
         {{ t('button.back') }}
       </button>
     </div>

src/main.ts

@@ -1,18 +1,11 @@
-// register vue composition api globally
 import { ViteSSG } from 'vite-ssg'
 import generatedRoutes from 'virtual:generated-pages'
 import { setupLayouts } from 'virtual:generated-layouts'
 import App from './App.vue'
 
-// windicss layers
+import '@unocss/reset/tailwind.css'
-import 'virtual:windi-base.css'
-import 'virtual:windi-components.css'
-// your custom styles here
 import './styles/main.css'
-// windicss utilities should be the last style import
+import 'uno.css'
-import 'virtual:windi-utilities.css'
-// windicss devtools support (dev only)
-import 'virtual:windi-devtools'
 
 const routes = setupLayouts(generatedRoutes)
 

src/pages/about.md

@@ -4,11 +4,11 @@ title: About
 
 <div class="text-center">
   <!-- You can use Vue components inside markdown -->
-  <carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
+  <div i-carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
   <h3>About</h3>
 </div>
 
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **WindiCSS** for UI.
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **UnoCSS** for styling and icons.
 
 ```js
 // syntax highlighting example

src/pages/hi/[name].vue

@@ -13,20 +13,20 @@ watchEffect(() => {
 
 <template>
   <div>
-    <p class="text-4xl">
+    <div text-4xl>
-      <carbon-pedestrian class="inline-block" />
+      <div i-carbon-pedestrian inline-block />
-    </p>
+    </div>
     <p>
       {{ t('intro.hi', { name: props.name }) }}
     </p>
 
-    <p class="text-sm opacity-50">
+    <p text-sm opacity-50>
       <em>{{ t('intro.dynamic-route') }}</em>
     </p>
 
     <template v-if="user.otherNames.length">
-      <p class="text-sm mt-4">
+      <p text-sm mt-4>
-        <span class="opacity-75">{{ t('intro.aka') }}:</span>
+        <span opacity-75>{{ t('intro.aka') }}:</span>
         <ul>
           <li v-for="otherName in user.otherNames" :key="otherName">
             <router-link :to="`/hi/${otherName}`" replace>
@@ -39,7 +39,7 @@ watchEffect(() => {
 
     <div>
       <button
-        class="btn m-3 text-sm mt-6"
+        btn m="3 t6" text-sm
         @click="router.back()"
       >
         {{ t('button.back') }}

src/pages/index.vue

@@ -15,19 +15,19 @@ const { t } = useI18n()
 
 <template>
   <div>
-    <p class="text-4xl">
+    <div text-4xl>
-      <carbon-campsite class="inline-block" />
+      <div i-carbon-campsite inline-block />
-    </p>
+    </div>
     <p>
       <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
         Vitesse
       </a>
     </p>
     <p>
-      <em class="text-sm opacity-75">{{ t('intro.desc') }}</em>
+      <em text-sm opacity-75>{{ t('intro.desc') }}</em>
     </p>
 
-    <div class="py-4" />
+    <div py-4 />
 
     <input
       id="input"
@@ -36,7 +36,7 @@ const { t } = useI18n()
       :aria-label="t('intro.whats-your-name')"
       type="text"
       autocomplete="false"
-      p="x-4 y-2"
+      p="x4 y2"
       w="250px"
       text="center"
       bg="transparent"
@@ -48,7 +48,7 @@ const { t } = useI18n()
 
     <div>
       <button
-        class="m-3 text-sm btn"
+        btn m-3 text-sm
         :disabled="!name"
         @click="go"
       >

src/styles/main.css

@@ -17,27 +17,12 @@ html.dark {
 }
 
 #nprogress .bar {
-  @apply bg-teal-600 opacity-75;
+  background: rgb(13,148,136);
-
+  opacity: 0.75;
   position: fixed;
   z-index: 1031;
   top: 0;
   left: 0;
-
   width: 100%;
   height: 2px;
 }
-
-.btn {
-  @apply 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 {
-  @apply inline-block cursor-pointer select-none
-    opacity-75 transition duration-200 ease-in-out
-    hover:opacity-100 hover:text-teal-600;
-  font-size: 0.9em;
-}

src/styles/markdown.css

@@ -2,7 +2,7 @@
 @import 'prism-theme-vars/base.css';
 
 .prose {
-  --prism-font-family: 'Input Mono', monospace;
+  --prism-font-family: 'DM Mono', monospace;
 }
 
 .prose img {

unocss.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, presetUno } from 'unocss'
+import { presetTypography } from '@unocss/preset-typography'
+import presetIcons from '@unocss/preset-icons'
+import presetAttributify from '@unocss/preset-attributify'
+import presetWebFonts from '@unocss/preset-web-fonts'
+
+export default defineConfig({
+  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,
+      warn: true,
+    }),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono',
+      },
+    }),
+  ],
+  safelist: 'prose prose-sm m-auto text-left'.split(' '),
+})

vite.config.ts

@@ -3,17 +3,15 @@ import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
 import Layouts from 'vite-plugin-vue-layouts'
-import Icons from 'unplugin-icons/vite'
-import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Markdown from 'vite-plugin-md'
-import WindiCSS from 'vite-plugin-windicss'
 import { VitePWA } from 'vite-plugin-pwa'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
 import Inspect from 'vite-plugin-inspect'
 import Prism from 'markdown-it-prism'
 import LinkAttributes from 'markdown-it-link-attributes'
+import Unocss from 'unocss/vite'
 
 const markdownWrapperClasses = 'prose prose-sm m-auto text-left'
 
@@ -52,32 +50,14 @@ export default defineConfig({
     Components({
       // allow auto load markdown components under `./src/components/`
       extensions: ['vue', 'md'],
-
       // allow auto import and register components used in markdown
       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-
-      // custom resolvers
-      resolvers: [
-        // auto import icons
-        // https://github.com/antfu/unplugin-icons
-        IconsResolver({
-          prefix: false,
-          // enabledCollections: ['carbon']
-        }),
-      ],
-
       dts: 'src/components.d.ts',
     }),
 
-    // https://github.com/antfu/unplugin-icons
+    // https://github.com/antfu/unocss
-    Icons({
+    // see unocss.config.ts for config
-      autoInstall: true,
+    Unocss(),
-    }),
-
-    // https://github.com/antfu/vite-plugin-windicss
-    WindiCSS({
-      safelist: markdownWrapperClasses,
-    }),
 
     // https://github.com/antfu/vite-plugin-md
     // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
@@ -140,12 +120,6 @@ export default defineConfig({
     }),
   ],
 
-  server: {
-    fs: {
-      strict: true,
-    },
-  },
-
   // https://github.com/antfu/vite-ssg
   ssgOptions: {
     script: 'async',

windi.config.ts

@@ -1,43 +0,0 @@
-import { defineConfig } from 'windicss/helpers'
-import colors from 'windicss/colors'
-import typography from 'windicss/plugin/typography'
-
-export default defineConfig({
-  darkMode: 'class',
-  // https://windicss.org/posts/v30.html#attributify-mode
-  attributify: true,
-
-  plugins: [
-    typography(),
-  ],
-  theme: {
-    extend: {
-      typography: {
-        DEFAULT: {
-          css: {
-            maxWidth: '65ch',
-            color: 'inherit',
-            a: {
-              'color': 'inherit',
-              'opacity': 0.75,
-              'fontWeight': '500',
-              'textDecoration': 'underline',
-              '&:hover': {
-                opacity: 1,
-                color: colors.teal[600],
-              },
-            },
-            b: { color: 'inherit' },
-            strong: { color: 'inherit' },
-            em: { color: 'inherit' },
-            h1: { color: 'inherit' },
-            h2: { color: 'inherit' },
-            h3: { color: 'inherit' },
-            h4: { color: 'inherit' },
-            code: { color: 'inherit' },
-          },
-        },
-      },
-    },
-  },
-})