refactor(css): refactored windicss to tailwindcss

.vscode/settings.json

@@ -122,11 +122,13 @@
     "vben",
     "windi",
     "browserslist",
+    "tailwindcss",
     "esnext",
     "antv",
     "tinymce",
     "qrcode",
     "sider",
-    "pinia"
+    "pinia",
+    "sider"
   ]
 }

CHANGELOG.zh_CN.md

@@ -1,4 +1,11 @@
-## Wip
+## 2.5.0(2021-06-20)
+
+## (破坏性更新) Breaking changes
+
+- 将项目`windicss`改为`tailwindcss`，解决内存溢出问题
+  - 目前项目不兼容地方有
+    - `!xl:m-4` 之类的写法需要改为`xl:!m-4`,注意只有`!`这个不兼容，没用到则不用改
+    - `windicss`自身新增的特性需要调整，比如`Attribute`模式不兼容
 
 ### ✨ Refactor
 

build/vite/plugin/index.ts

@@ -5,7 +5,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import legacy from '@vitejs/plugin-legacy';
 
 import purgeIcons from 'vite-plugin-purge-icons';
-import windiCSS from 'vite-plugin-windicss';
 
 import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
@@ -46,9 +45,6 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // vite-plugin-svg-icons
   vitePlugins.push(configSvgIconsPlugin(isBuild));
 
-  // vite-plugin-windicss
-  vitePlugins.push(windiCSS());
-
   // vite-plugin-mock
   VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
 

jest.config.mjs

@@ -17,7 +17,6 @@ export default {
   ],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
-    '^.+\\.(vue)$': 'vue-jest',
   },
   transformIgnorePatterns: ['<rootDir>/tests/__mocks__/', '/node_modules/'],
   // A map from regular expressions to module names that allow to stub out resources with a single module

package.json

@@ -87,9 +87,8 @@
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.5",
     "@vue/compiler-sfc": "3.0.11",
-    "@vue/test-utils": "^2.0.0-rc.6",
+    "@vue/test-utils": "^2.0.0-rc.7",
     "autoprefixer": "^10.2.6",
-    "babel-jest": "^27.0.2",
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.3",
@@ -109,6 +108,7 @@
     "jest": "^27.0.4",
     "less": "^4.1.1",
     "lint-staged": "^11.0.0",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.3.5",
     "prettier": "^2.3.1",
     "pretty-quick": "^3.1.1",
@@ -118,10 +118,11 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
+    "tailwindcss": "^2.2.2",
     "ts-jest": "^27.0.3",
     "ts-node": "^10.0.0",
     "typescript": "4.3.4",
-    "vite": "2.3.7",
+    "vite": "2.3.8",
     "vite-plugin-compression": "^0.2.5",
     "vite-plugin-html": "^2.0.7",
     "vite-plugin-imagemin": "^0.3.2",
@@ -131,9 +132,7 @@
     "vite-plugin-style-import": "^1.0.0",
     "vite-plugin-svg-icons": "^0.7.1",
     "vite-plugin-theme": "^0.8.1",
-    "vite-plugin-windicss": "^1.0.4",
     "vue-eslint-parser": "^7.6.0",
-    "vue-jest": "^5.0.0-alpha.10",
     "vue-tsc": "^0.1.7"
   },
   "resolutions": {

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    tailwindcss: {},
     autoprefixer: {},
   },
 };

src/main.ts

@@ -1,7 +1,6 @@
 import '/@/design/index.less';
+import '/@/design/tailwind.css';
 
-// Register windi
-import 'virtual:windi.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
 

src/utils/mitt.ts

@@ -27,6 +27,7 @@ export interface Emitter {
 
   emit<T = any>(type: EventType, event?: T): void;
   emit(type: '*', event?: any): void;
+  clear(): void;
 }
 
 /**
@@ -88,5 +89,12 @@ export default function mitt(all?: EventHandlerMap): Emitter {
         handler(type, evt);
       });
     },
+
+    /**
+     * Clear all
+     */
+    clear() {
+      this.all.clear();
+    },
   };
 }

src/views/dashboard/analysis/components/GrowCard.vue

@@ -5,8 +5,8 @@
         size="small"
         :loading="$attrs.loading"
         :title="item.title"
-        class="md:w-1/4 w-full !md:mt-0 !mt-4"
+        class="md:w-1/4 w-full md:!mt-0 !mt-4"
-        :class="[index + 1 < 4 && '!md:mr-4']"
+        :class="[index + 1 < 4 && 'md:!mr-4']"
         :canExpan="false"
       >
         <template #extra>

src/views/dashboard/analysis/index.vue

@@ -6,7 +6,7 @@
     <div class="md:flex enter-y">
       <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
 
-      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
+      <VisitSource class="md:w-1/3 md:!mx-4 md:!my-0 !my-4 w-full" :loading="loading" />
       <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
     </div>
   </div>

src/views/dashboard/workbench/components/ProjectCard.vue

@@ -5,7 +5,7 @@
     </template>
 
     <template v-for="item in items" :key="item">
-      <CardGrid class="!md:w-1/3 !w-full">
+      <CardGrid class="md:!w-1/3 !w-full">
         <span class="flex">
           <Icon :icon="item.icon" :color="item.color" size="30" />
           <span class="text-lg ml-4">{{ item.title }}</span>

src/views/dashboard/workbench/index.vue

@@ -10,7 +10,11 @@
         <QuickNav :loading="loading" class="enter-y" />
 
         <Card class="!my-4 enter-y" :loading="loading">
-          <img class="xl:h-50 h-30 mx-auto" src="../../../assets/svg/illustration.svg" />
+          <img
+            style="height: 216px"
+            class="h-20 mx-auto"
+            src="../../../assets/svg/illustration.svg"
+          />
         </Card>
 
         <SaleRadar :loading="loading" class="enter-y" />

src/views/sys/login/LoginForm.vue

@@ -53,7 +53,7 @@
           {{ t('sys.login.mobileSignInFormTitle') }}
         </Button>
       </ACol>
-      <ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2">
+      <ACol :md="8" :xs="24" class="!my-2 md:!my-0 xs:mx-0 md:mx-2">
         <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
           {{ t('sys.login.qrSignInFormTitle') }}
         </Button>

stylelint.config.js

@@ -18,7 +18,18 @@ module.exports = {
     'at-rule-no-unknown': [
       true,
       {
-        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin'],
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+          'function',
+          'if',
+          'each',
+          'include',
+          'mixin',
+        ],
       },
     ],
     'no-empty-source': null,

windi.config.ts → tailwind.config.js

@@ -1,35 +1,41 @@
-import lineClamp from 'windicss/plugin/line-clamp';
+const colors = require('tailwindcss/colors');
-import colors from 'windicss/colors';
 
-import { defineConfig } from 'vite-plugin-windicss';
+module.exports = {
-import { primaryColor } from './build/config/themeConfig';
+  mode: 'jit',
-
+  // darkMode: 'class',
-export default defineConfig({
+  plugins: [createEnterPlugin()],
-  darkMode: 'class',
+  purge: {
-  plugins: [lineClamp, createEnterPlugin()],
+    enabled: false,
+    content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
+  },
   theme: {
     extend: {
-      colors: {
+      zIndex: {
-        ...colors,
+        '-1': '-1',
-        primary: primaryColor,
       },
-      screens: {
+    },
-        sm: '576px',
+    colors: {
-        md: '768px',
+      ...colors,
-        lg: '992px',
+      primary: {
-        xl: '1200px',
+        DEFAULT: '#0960bd',
-        '2xl': '1600px',
+        // dark: primaryColorDark,
       },
     },
+    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 = 10) {
+function createEnterPlugin(maxOutput = 6) {
-  const createCss = (index: number, d = 'x') => {
+  const createCss = (index, d = 'x') => {
     const upd = d.toUpperCase();
     return {
       [`*> .enter-${d}:nth-child(${index})`]: {