chore: add windicss plugin

config/config.js

@@ -3,6 +3,7 @@ import { defineConfig } from 'umi'
 import defaultSettings from './defaultSettings'
 import proxy from './proxy'
 import routes from './routes'
+import WebpackWindiCSSPlugin from 'windicss-webpack-plugin/dist/index'
 const { REACT_APP_ENV } = process.env
 export default defineConfig({
   hash: true,
@@ -44,5 +45,15 @@ export default defineConfig({
   extraBabelPlugins: [
     '@babel/plugin-proposal-nullish-coalescing-operator',
     '@babel/plugin-proposal-optional-chaining'
-  ]
+  ],
+  chainWebpack(config) {
+    config.plugin('clearn').use(WebpackWindiCSSPlugin, [
+      {
+        scan: {
+          dirs: ['./'],
+          exclude: ['node_modules', '.git', 'dist', 'mock', '.umi']
+        }
+      }
+    ])
+  }
 })

config/proxy.js

@@ -8,7 +8,7 @@
 export default {
   dev: {
     '/api/': {
-      target: 'http://cld2.com',
+      target: 'http://cld2qa.com',
       changeOrigin: true,
       pathRewrite: {
         '^': ''

package.json

@@ -108,7 +108,9 @@
     "pro-download": "1.0.1",
     "puppeteer-core": "^5.0.0",
     "stylelint": "^13.9.0",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.3",
+    "windicss": "^2.5.14",
+    "windicss-webpack-plugin": "^0.5.0"
   },
   "engines": {
     "node": ">=10.0.0"

src/global.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { useIntl } from 'umi'
 import defaultSettings from '../config/defaultSettings'
 import './basic/css/common.scss'
+import 'windi.css'
 
 const { pwa } = defaultSettings
 const isHttps = document.location.protocol === 'https:' // if pwa is true
@@ -17,7 +18,7 @@ if (pwa) {
     )
   }) // Pop up a prompt on the page asking the user if they want to use the latest version
 
-  window.addEventListener('sw.updated', (event) => {
+  window.addEventListener('sw.updated', event => {
     const e = event
 
     const reloadSW = async () => {
@@ -32,7 +33,7 @@ if (pwa) {
       await new Promise((resolve, reject) => {
         const channel = new MessageChannel()
 
-        channel.port1.onmessage = (msgEvent) => {
+        channel.port1.onmessage = msgEvent => {
           if (msgEvent.data.error) {
             reject(msgEvent.data.error)
           } else {
@@ -44,7 +45,7 @@ if (pwa) {
           {
             type: 'skip-waiting'
           },
-          [ channel.port2 ]
+          [channel.port2]
         )
       }) // Refresh current page to use the updated HTML and other assets after SW has skiped waiting
 
@@ -59,8 +60,7 @@ if (pwa) {
         onClick={() => {
           notification.close(key)
           reloadSW()
-        }}
-      >
+        }}>
         {useIntl().formatMessage({
           id: 'app.pwa.serviceworker.updated.ok'
         })}
@@ -83,20 +83,20 @@ if (pwa) {
   const { serviceWorker } = navigator
 
   if (serviceWorker.getRegistrations) {
-    serviceWorker.getRegistrations().then((sws) => {
-      sws.forEach((sw) => {
+    serviceWorker.getRegistrations().then(sws => {
+      sws.forEach(sw => {
         sw.unregister()
       })
     })
   }
 
-  serviceWorker.getRegistration().then((sw) => {
+  serviceWorker.getRegistration().then(sw => {
     if (sw) sw.unregister()
   }) // remove all caches
 
   if (window.caches && window.caches.keys) {
-    caches.keys().then((keys) => {
-      keys.forEach((key) => {
+    caches.keys().then(keys => {
+      keys.forEach(key => {
         caches.delete(key)
       })
     })

src/pages/Customer/Test/index.jsx

@@ -146,6 +146,9 @@ const Test = ({ natures, dispatch }) => {
           console.log(page, size)
         }}
       />
+      <div>
+        <span className="text-red-50 text-4xl">11111</span>
+      </div>
     </Card>
   )
 }