feat: move to unocss

2022-02-17 20:59:24 +08:00 · 2022-02-17 20:59:24 +08:00 · 44f6b3fd44
commit 44f6b3fd44
parent 31999466ef
17 changed files with 695 additions and 556 deletions
--- a/.vscode/extensions.json
+++ b/.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",
-    "csstools.postcss"
+    "johnsoncodehk.volar",
+    "lokalise.i18n-ally"
  ]
 }
--- a/.vscode/settings.json
+++ b/.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,
  },
--- a/README.md
+++ b/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!
-  - [Windi CSS Typography](https://windicss.org/plugins/official/typography.html)
+- [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/)
- [`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
--- a/package.json
+++ b/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"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components.d.ts
+++ b/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']
--- a/src/components/Footer.vue
+++ b/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" />
-      <carbon-sun v-else />
+      <div i="carbon-sun dark:carbon-moon" />
    </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>
--- a/src/layouts/404.vue
+++ b/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">
-    <div>
-      <p class="text-4xl">
-        <carbon-warning class="inline-block" />
-      </p>
+  <main p="x4 y10" text="center teal-700 dark:gray-200">
+    <div text-4xl>
+      <div i-carbon-warning inline-block />
    </div>
    <router-view />
    <div>
-      <button
-        class="btn m-3 text-sm mt-8"
-        @click="router.back()"
-      >
+      <button btn text-sm m="3 t8" @click="router.back()">
        {{ t('button.back') }}
      </button>
    </div>
--- a/src/main.ts
+++ b/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 'virtual:windi-base.css'
-import 'virtual:windi-components.css'
-// your custom styles here
+import '@unocss/reset/tailwind.css'
 import './styles/main.css'
-// windicss utilities should be the last style import
-import 'virtual:windi-utilities.css'
-// windicss devtools support (dev only)
-import 'virtual:windi-devtools'
+import 'uno.css'

 const routes = setupLayouts(generatedRoutes)

--- a/src/pages/about.md
+++ b/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
--- a/src/pages/hi/[name].vue
+++ b/src/pages/hi/[name].vue
@ -13,20 +13,20 @@ watchEffect(() => {

 <template>
  <div>
-    <p class="text-4xl">
-      <carbon-pedestrian class="inline-block" />
-    </p>
+    <div text-4xl>
+      <div i-carbon-pedestrian inline-block />
+    </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">
-        <span class="opacity-75">{{ t('intro.aka') }}:</span>
+      <p text-sm mt-4>
+        <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') }}
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -15,19 +15,19 @@ const { t } = useI18n()

 <template>
  <div>
-    <p class="text-4xl">
-      <carbon-campsite class="inline-block" />
-    </p>
+    <div text-4xl>
+      <div i-carbon-campsite inline-block />
+    </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"
      >
--- a/src/styles/main.css
+++ b/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;
-}
--- a/src/styles/markdown.css
+++ b/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 {
--- a/unocss.config.ts
+++ b/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(' '),
+})
--- a/vite.config.ts
+++ b/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
-    Icons({
-      autoInstall: true,
-    }),
-
-    // https://github.com/antfu/vite-plugin-windicss
-    WindiCSS({
-      safelist: markdownWrapperClasses,
-    }),
+    // https://github.com/antfu/unocss
+    // see unocss.config.ts for config
+    Unocss(),

    // 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',
--- a/windi.config.ts
+++ b/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' },
-          },
-        },
-      },
-    },
-  },
-})