chore: use unocss

2 years ago · 35f1298ee6
12 changed files with 705 additions and 254 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -104,7 +104,7 @@
  "i18n-ally.enabledFrameworks": ["vue", "react"],
  "cSpell.words": [
    "vben",
-    "windicss",
+    "unocss",
    "tailwind",
    "browserslist",
    "tailwindcss",
--- a/build/vite/optimize.ts
+++ b/build/vite/optimize.ts
@ -28,8 +28,7 @@ const include = [
  'ant-design-vue',
  'ant-design-vue/es/style',
  'ant-design-vue/es/locale/zh_CN',
-  'ant-design-vue/es/locale/en_US',
-  'vite-plugin-windicss'
+  'ant-design-vue/es/locale/en_US'
 ]

 const exclude = ['@iconify/json']
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@ -1,7 +1,6 @@
 import { PluginOption } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import windiCSS from 'vite-plugin-windicss'
 import progress from 'vite-plugin-progress'
 import purgeIcons from 'vite-plugin-purge-icons'
 import VitePluginCertificate from 'vite-plugin-mkcert'
@ -12,6 +11,8 @@ import { configStyleImportPlugin } from './styleImport'
 import { configVisualizerConfig } from './visualizer'
 import { configThemePlugin } from './theme'
 import { configSvgIconsPlugin } from './svgSprite'
+import UnoCSS from 'unocss/vite'
+import { presetTypography, presetUno } from 'unocss'

 export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  const { VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
@ -21,6 +22,10 @@ export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
    vue(),
    // have to
    vueJsx(),
+    // UnoCSS
+    UnoCSS({
+      presets: [presetUno(), presetTypography()]
+    }),
    // 打包进度条
    progress(),
    VitePluginCertificate({
@ -28,9 +33,6 @@ export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
    })
  ]

-  // windiCSS
-  vitePlugins.push(windiCSS())
-
  // vite-vue-plugin-html
  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))

--- a/package.json
+++ b/package.json
@ -92,14 +92,14 @@
    "cz-git": "^1.7.0",
    "czg": "^1.7.0",
    "dotenv": "^16.3.1",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.9.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-vue": "^9.15.1",
    "esno": "^0.17.0",
    "fs-extra": "^11.1.1",
    "husky": "^8.0.3",
-    "inquirer": "^9.2.8",
+    "inquirer": "^9.2.9",
    "less": "^4.1.3",
    "lint-staged": "^13.2.3",
    "picocolors": "^1.0.0",
@ -108,8 +108,9 @@
    "postcss-less": "^6.0.0",
    "prettier": "^3.0.0",
    "rimraf": "^5.0.1",
-    "rollup": "^3.26.3",
+    "rollup": "^3.27.0",
    "rollup-plugin-visualizer": "^5.9.2",
+    "unocss": "^0.54.0",
    "stylelint": "^15.10.2",
    "stylelint-config-recommended": "^13.0.0",
    "stylelint-config-recommended-vue": "^1.5.0",
@ -125,7 +126,6 @@
    "vite-plugin-pwa": "^0.16.4",
    "vite-plugin-style-import": "^2.0.0",
    "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-windicss": "^1.9.0",
    "vite-vue-plugin-html": "^1.0.2",
    "vite-vue-plugin-theme": "^1.0.2",
    "vue-eslint-parser": "^9.3.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-}
--- a/src/design/entry.css
+++ b/src/design/entry.css
@ -0,0 +1,168 @@
+* > .enter-x:nth-child(1) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(1) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(1),
+* > .-enter-x:nth-child(1) {
+  z-index: 9;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+}
+* > .enter-x:nth-child(2) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(2) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(2),
+* > .-enter-x:nth-child(2) {
+  z-index: 8;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.2s;
+}
+* > .enter-x:nth-child(3) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(3) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(3),
+* > .-enter-x:nth-child(3) {
+  z-index: 7;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.3s;
+}
+
+* > .enter-x:nth-child(4) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(4) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(4),
+* > .-enter-x:nth-child(4) {
+  z-index: 6;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.4s;
+}
+
+* > .enter-x:nth-child(5) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(5) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(5),
+* > .-enter-x:nth-child(5) {
+  z-index: 5;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.5s;
+}
+
+* > .enter-y:nth-child(1) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(1) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(1),
+* > .-enter-y:nth-child(1) {
+  z-index: 9;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+}
+* > .enter-y:nth-child(2) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(2) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(2),
+* > .-enter-y:nth-child(2) {
+  z-index: 8;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.2s;
+}
+* > .enter-y:nth-child(3) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(3) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(3),
+* > .-enter-y:nth-child(3) {
+  z-index: 7;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.3s;
+}
+
+* > .enter-y:nth-child(4) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(4) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(4),
+* > .-enter-y:nth-child(4) {
+  z-index: 6;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.4s;
+}
+
+* > .enter-y:nth-child(5) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(5) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(5),
+* > .-enter-y:nth-child(5) {
+  z-index: 5;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.5s;
+}
+
+@keyframes enter-x-animation {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes enter-y-animation {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
--- a/src/design/index.less
+++ b/src/design/index.less
@ -3,6 +3,7 @@
@import 'public.less';
@import 'ant/index.less';
@import './theme.less';
+@import './entry.css';

 input:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset !important;
@ -66,3 +67,10 @@ html[data-theme='dark'] {
    box-shadow: none;
  }
 }
+
+// 保持 和 windi 一样的全局样式，减少升级带来的影响
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
--- a/src/layouts/default/tabs/index.less
+++ b/src/layouts/default/tabs/index.less
@ -6,11 +6,13 @@ html[data-theme='dark'] {
      border-bottom: none !important;
    }
  }
+
  .ant-tabs-tab:not(.ant-tabs-tab-active) {
    border: none !important;
+
    &:hover {
      color: inherit;
-      background-color: rgba(255, 255, 255, 0.5) !important;
+      background-color: rgba(255, 255, 255/50%) !important;
    }
  }
 }
@ -19,6 +21,7 @@ html[data-theme='light'] {
  .@{prefix-cls} {
    .ant-tabs-tab:not(.ant-tabs-tab-active) {
      border: none !important;
+
      &:hover {
        color: inherit;
        background-color: #dee1e6;
@ -58,13 +61,14 @@ html[data-theme='light'] {
        color: @text-color-base;
        background-color: @component-background;
        transition: padding 0.3s;
-        padding: 0 20px;
+        padding: 0 16px;
        margin: 0 -14px 0 0 !important;
        /* stylelint-disable-next-line function-url-quotes */
        mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
        mask-size: 100% 100%;
        position: relative;
        z-index: 1;
+        border-radius: 8px 8px 0 0;

        .ant-tabs-tab-btn {
          color: @text-color-base;
@ -133,7 +137,7 @@ html[data-theme='light'] {

      .ant-tabs-tab-active {
        position: relative;
-        padding: 0 20px;
+        padding: 0 16px;
        color: @primary-color !important;
        background: #d4ebff;
        border: 0;
--- a/src/main.ts
+++ b/src/main.ts
@ -1,7 +1,5 @@
-import 'virtual:windi-base.css'
-import 'virtual:windi-components.css'
+import 'uno.css'
 import '@/design/index.less'
-import 'virtual:windi-utilities.css'
 // Register icon sprite
 import 'virtual:svg-icons-register'
 import App from './App.vue'
--- a/stylelint.config.js
+++ b/stylelint.config.js
@ -21,7 +21,7 @@ module.exports = {
    'at-rule-no-unknown': [
      true,
      {
-        ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'function', 'if', 'each', 'include', 'mixin']
+        ignoreAtRules: ['unocss', 'apply', 'variants', 'responsive', 'screen', 'function', 'if', 'each', 'include', 'mixin']
      }
    ],
    'no-empty-source': null,
--- a/windi.config.ts
+++ b/windi.config.ts
@ -1,74 +0,0 @@
-import { defineConfig } from 'vite-plugin-windicss'
-import { primaryColor } from './build/config/themeConfig'
-
-export default defineConfig({
-  darkMode: 'class',
-  plugins: [createEnterPlugin()],
-  theme: {
-    extend: {
-      zIndex: {
-        '-1': '-1'
-      },
-      colors: {
-        primary: primaryColor
-      },
-      screens: {
-        sm: '576px',
-        md: '768px',
-        lg: '992px',
-        xl: '1200px',
-        '2xl': '1600px'
-      }
-    }
-  }
-})
-
-/**
- * Used for animation when the element is displayed.
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
- */
-function createEnterPlugin(maxOutput = 6) {
-  const createCss = (index: number, d = 'x') => {
-    const upd = d.toUpperCase()
-    return {
-      [`*> .enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(50px)`
-      },
-      [`*> .-enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(-50px)`
-      },
-      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
-        'z-index': `${10 - index}`,
-        opacity: '0',
-        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
-        'animation-fill-mode': 'forwards',
-        'animation-delay': `${(index * 1) / 10}s`
-      }
-    }
-  }
-  const handler = ({ addBase }) => {
-    const addRawCss = {}
-    for (let index = 1; index < maxOutput; index++) {
-      Object.assign(addRawCss, {
-        ...createCss(index, 'x'),
-        ...createCss(index, 'y')
-      })
-    }
-    addBase({
-      ...addRawCss,
-      [`@keyframes enter-x-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateX(0)'
-        }
-      },
-      [`@keyframes enter-y-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateY(0)'
-        }
-      }
-    })
-  }
-  return { handler }
-}