feat: 添加WindiCSS支持

4 years ago · 1f07597320
7 changed files with 167 additions and 3 deletions
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,5 +1,6 @@
 {
  "recommendations": [
+    "voorjaar.windicss-intellisense",
    "stylelint.vscode-stylelint",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -6,6 +6,7 @@
   * vscode-icons
   * i18n Ally
   * Iconify IntelliSense
+   * WindiCSS IntelliSense
   * TypeScript Vue Plugin (Volar)
   * Vue Language Features (Volar)
   */
--- a/package.json
+++ b/package.json
@ -102,8 +102,10 @@
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-remove-console": "^0.0.5",
    "vite-plugin-style-import": "^1.2.1",
+    "vite-plugin-windicss": "^1.6.1",
    "vite-svg-loader": "^2.2.0",
-    "vue-eslint-parser": "7.10.0"
+    "vue-eslint-parser": "7.10.0",
+    "windicss": "^3.4.2"
  },
  "repository": "git@github.com:xiaoxian521/vue-pure-admin.git",
  "author": "xiaoxian521",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -69,12 +69,14 @@ specifiers:
  vite-plugin-mock: ^2.9.6
  vite-plugin-remove-console: ^0.0.5
  vite-plugin-style-import: ^1.2.1
+  vite-plugin-windicss: ^1.6.1
  vite-svg-loader: ^2.2.0
  vue: ^3.2.24
  vue-eslint-parser: 7.10.0
  vue-i18n: ^9.2.0-beta.3
  vue-router: ^4.0.12
  vue-types: ^4.1.0
+  windicss: ^3.4.2

 dependencies:
  "@ctrl/tinycolor": 3.4.0
@ -151,10 +153,21 @@ devDependencies:
  vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@2.6.14
  vite-plugin-remove-console: 0.0.5
  vite-plugin-style-import: 1.3.0_vite@2.6.14
+  vite-plugin-windicss: 1.6.1_vite@2.6.14
  vite-svg-loader: 2.2.0
  vue-eslint-parser: 7.10.0_eslint@7.30.0
+  windicss: 3.4.2

 packages:
+  /@antfu/utils/0.3.0:
+    resolution:
+      {
+        integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==
+      }
+    dependencies:
+      "@types/throttle-debounce": 2.1.0
+    dev: true
+
  /@babel/code-frame/7.12.11:
    resolution:
      {
@ -529,7 +542,7 @@ packages:
      "@babel/helper-split-export-declaration": 7.16.0
      "@babel/parser": 7.16.2
      "@babel/types": 7.16.0
-      debug: 4.3.2
+      debug: 4.3.3
      globals: 11.12.0
    transitivePeerDependencies:
      - supports-color
@ -1140,6 +1153,13 @@ packages:
      "@types/node": 14.14.14
    dev: true

+  /@types/throttle-debounce/2.1.0:
+    resolution:
+      {
+        integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
+      }
+    dev: true
+
  /@types/unist/2.0.6:
    resolution:
      {
@ -1596,6 +1616,36 @@ packages:
      vue-demi: 0.12.1_vue@3.2.24
    dev: false

+  /@windicss/config/1.6.1:
+    resolution:
+      {
+        integrity: sha512-E4FKtWdYl5HwFknBQ+Z2JIF58TZiR4/ZiP8B30sfRxNlG6clh4agn5MJqTb4ER0MLkDb30Hugl2tGun0AQNbFw==
+      }
+    dependencies:
+      debug: 4.3.3
+      jiti: 1.12.9
+      windicss: 3.4.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@windicss/plugin-utils/1.6.1:
+    resolution:
+      {
+        integrity: sha512-hFQY27bOr9SSpekIvSwBpIX25nR4cwrU5/1kJFqCwAzqyazvd7U9c/iI1E2sTEQOkPbpTTJkY2Act21Q70oSDQ==
+      }
+    dependencies:
+      "@antfu/utils": 0.3.0
+      "@windicss/config": 1.6.1
+      debug: 4.3.3
+      fast-glob: 3.2.7
+      magic-string: 0.25.7
+      micromatch: 4.0.4
+      windicss: 3.4.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
  /@zougt/some-loader-utils/1.4.1_sass@1.45.0:
    resolution:
      {
@ -2674,6 +2724,21 @@ packages:
      ms: 2.1.2
    dev: true

+  /debug/4.3.3:
+    resolution:
+      {
+        integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+      }
+    engines: { node: ">=6.0" }
+    peerDependencies:
+      supports-color: "*"
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
  /decamelize-keys/1.1.0:
    resolution: { integrity: sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk= }
    engines: { node: ">=0.10.0" }
@ -4259,6 +4324,14 @@ packages:
    resolution: { integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= }
    dev: true

+  /jiti/1.12.9:
+    resolution:
+      {
+        integrity: sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==
+      }
+    hasBin: true
+    dev: true
+
  /js-cookie/3.0.1:
    resolution:
      {
@ -4369,6 +4442,13 @@ packages:
      }
    dev: true

+  /kolorist/1.5.1:
+    resolution:
+      {
+        integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==
+      }
+    dev: true
+
  /levn/0.4.1:
    resolution:
      {
@ -4694,7 +4774,7 @@ packages:
        integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==
      }
    dependencies:
-      debug: 4.3.2
+      debug: 4.3.3
      parse-entities: 2.0.0
    transitivePeerDependencies:
      - supports-color
@ -7136,6 +7216,23 @@ packages:
      - supports-color
    dev: true

+  /vite-plugin-windicss/1.6.1_vite@2.6.14:
+    resolution:
+      {
+        integrity: sha512-63uv4HqBxtSZB0WOtrZS8yhyfQPgGQwYgcBald+/BpLSlYJREcDKgX9Xd/qDgTAjpDRozxKQj/JWreIlyIahGg==
+      }
+    peerDependencies:
+      vite: ^2.0.1
+    dependencies:
+      "@windicss/plugin-utils": 1.6.1
+      debug: 4.3.3
+      kolorist: 1.5.1
+      vite: 2.6.14_sass@1.45.0
+      windicss: 3.4.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
  /vite-svg-loader/2.2.0:
    resolution:
      {
@ -7295,6 +7392,15 @@ packages:
      isexe: 2.0.0
    dev: true

+  /windicss/3.4.2:
+    resolution:
+      {
+        integrity: sha512-YieqWaXiwPu0JJoB7z03RXdjZjQQJtMZAeXUXu/j3JXSMhIgV/2rUXu4Q7QrworRlbaASZlFhxjnL/78aAty+Q==
+      }
+    engines: { node: ">= 12" }
+    hasBin: true
+    dev: true
+
  /word-wrap/1.2.3:
    resolution:
      {
--- a/src/main.ts
+++ b/src/main.ts
@ -10,6 +10,7 @@ import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";

 import "animate.css";
+import "virtual:windi.css";
 // 导入公共样式
 import "./style/index.scss";
 // 导入字体图标
--- a/vite.config.ts
+++ b/vite.config.ts
@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
 import svgLoader from "vite-svg-loader";
 import legacy from "@vitejs/plugin-legacy";
 import vueJsx from "@vitejs/plugin-vue-jsx";
+import WindiCSS from "vite-plugin-windicss";
 import { warpperEnv, regExps } from "./build";
 import fullReload from "vite-plugin-full-reload";
 import { viteMockServe } from "vite-plugin-mock";
@ -83,6 +84,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
      vue(),
      // jsx、tsx语法支持
      vueJsx(),
+      WindiCSS(),
      // 线上环境删除console
      removeConsole(),
      // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
--- a/windi.config.ts
+++ b/windi.config.ts
@ -0,0 +1,51 @@
+// https://cn.windicss.org/ 中文文档
+import { defineConfig } from "windicss/helpers";
+import colors from "windicss/colors";
+import typography from "windicss/plugin/typography";
+
+export default defineConfig({
+  darkMode: "class",
+  attributify: true,
+
+  plugins: [typography()],
+  theme: {
+    extend: {
+      zIndex: {
+        "-1": "-1"
+      },
+      screens: {
+        sm: "576px",
+        md: "768px",
+        lg: "992px",
+        xl: "1200px",
+        "2xl": "1600px"
+      },
+      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" }
+          }
+        }
+      }
+    }
+  }
+});