From 3930795e9a0e05c4ff7f996e00313648be0330ca Mon Sep 17 00:00:00 2001
From: kirin <wangkyrin@gmail.com>
Date: Thu, 15 Sep 2022 11:05:33 +0800
Subject: [PATCH 1/3] refactor: unocss plugin with vite plugin and webpack
 plugin

---
 docs/docs/guides/styling.md    | 10 ++-----
 packages/plugins/src/unocss.ts | 54 +++++++++++++++-------------------
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/docs/docs/guides/styling.md b/docs/docs/guides/styling.md
index 686d3c19bebf..8c47f257bc19 100644
--- a/docs/docs/guides/styling.md
+++ b/docs/docs/guides/styling.md
@@ -96,10 +96,10 @@ Umi 提供了内置的 [Tailwindcss](https://tailwindcss.com/)
 与 Tailwindcss 相同，Umi 也提供了内置的 [UnoCSS](https://github.com/unocss/unocss) 插件，可以按照相同方式开启。
 
 1. 安装 `plugin-unocss`
-2. 安装 `unocss` 及 `@unocss/cli`
+2. 安装 `unocss` 及 `@unocss/webpack`
 
 ```bash
-pnpm i unocss @unocss/cli
+pnpm i unocss @unocss/webpack
 ```
 
 3. 在 Umi 设置中启用插件，并声明会用到 `unocss` 的文件目录
@@ -111,9 +111,7 @@ export default {
   plugins: [
     require.resolve('@umijs/plugins/dist/unocss')
   ],
-  unocss: {
-    watch: ['pages/**/*.tsx'] // 添加其他包含 unocss 的 classname 的文件目录
-  },
+  unocss: {},
 };
 ```
 
@@ -133,5 +131,3 @@ export function createConfig({strict = true, dev = true} = {}) {
 
 export default createConfig(); 
 ```
-
-5. 启动项目进行开发，插件会监听设置文件中的 `unocss.watch` 字段，动态生成样式文件并自动套用
diff --git a/packages/plugins/src/unocss.ts b/packages/plugins/src/unocss.ts
index 823b26eca7fc..184804b82cc4 100644
--- a/packages/plugins/src/unocss.ts
+++ b/packages/plugins/src/unocss.ts
@@ -1,8 +1,4 @@
-import { exec } from 'child_process';
-import { existsSync } from 'fs';
-import { join } from 'path';
 import { IApi } from 'umi';
-import { winPath } from 'umi/plugin-utils';
 
 export default (api: IApi) => {
   api.describe({
@@ -10,9 +6,7 @@ export default (api: IApi) => {
     config: {
       schema(Joi) {
         return Joi.alternatives().try(
-          Joi.object({
-            watch: Joi.array(),
-          }),
+          Joi.object(),
           Joi.boolean().invalid(true),
         );
       },
@@ -22,34 +16,34 @@ export default (api: IApi) => {
 
   const outputPath = 'uno.css';
 
-  api.onBeforeCompiler(() => {
-    /** 由于 @unocss/cli 对设置文件进行了检查，因此加入需要 unocss.config.ts 设置的提示
-     * https://github.com/antfu/unocss/blob/main/packages/cli/src/index.ts#L93 */
-    if (!existsSync(join(api.paths.cwd, 'unocss.config.ts')))
-      api.logger.warn(
-        '请在项目目录中添加 unocss.config.ts 文件，并配置需要的 unocss presets，否则插件将没有效果！',
-      );
-
-    const generatedPath = join(api.paths.absTmpPath, outputPath);
-    const binPath = join(api.cwd, 'node_modules/.bin/unocss');
-    const watchDirs = api.config.unocss.watch;
+  api.chainWebpack((memo: any) => {
+    try {
+      const UnocssWebpackPlugin = require('@unocss/webpack').default;
+      memo.plugin('unocssPlugin').use(UnocssWebpackPlugin, [{}]);
+    } catch (error) {
+      api.logger.error('请在项目中添加@unocss/webpack依赖');
+    }
+  });
 
-    /** 透过子进程建立 unocss 服务，将生成的 css 写入 generatedPath */
-    const unocss = exec(
-      `${binPath} ${watchDirs.join(' ')} --out-file ${generatedPath} ${
-        api.env === 'development' ? '--watch' : ''
-      }`,
-      { cwd: api.cwd },
-    );
+  api.modifyViteConfig((memo: any) => {
+    try {
+      const UnocssVitePlugin = require('unocss/vite').default;
+      memo.plugins?.unshift(UnocssVitePlugin({}));
+      return memo;
+    } catch (error) {
+      api.logger.error('请在项目中添加unocss依赖');
+    }
+  });
 
-    unocss.on('error', (m: any) => {
-      api.logger.error('unocss service encounter an error: ' + m);
-    });
+  api.modifyConfig((memo) => {
+    if (memo?.mfsu) {
+      memo.mfsu.exclude = [...(memo.mfsu?.exclude || []), outputPath];
+    }
+    return memo;
   });
 
   /** 将生成的 css 文件加入到 import 中 */
   api.addEntryImports(() => {
-    const generatedPath = winPath(join(api.paths.absTmpPath, outputPath));
-    return [{ source: generatedPath }];
+    return [{ source: outputPath }];
   });
 };

From 8132c29efcc619d359f2e068f6901ab3e39228ad Mon Sep 17 00:00:00 2001
From: kirin <wangkyrin@gmail.com>
Date: Mon, 19 Sep 2022 10:20:16 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20mfsu=E9=BB=98=E8=AE=A4=E5=BC=80?=
 =?UTF-8?q?=E5=90=AF=E5=AF=BC=E8=87=B4=E7=9A=84unocss=20plugin=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugins/src/unocss.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/plugins/src/unocss.ts b/packages/plugins/src/unocss.ts
index 184804b82cc4..82e0b189f89c 100644
--- a/packages/plugins/src/unocss.ts
+++ b/packages/plugins/src/unocss.ts
@@ -36,7 +36,11 @@ export default (api: IApi) => {
   });
 
   api.modifyConfig((memo) => {
-    if (memo?.mfsu) {
+    if (api.isPluginEnable('mfsu')) {
+      // mfsu默认开启时为undefined
+      if (memo.mfsu === undefined) {
+        memo.mfsu = {};
+      }
       memo.mfsu.exclude = [...(memo.mfsu?.exclude || []), outputPath];
     }
     return memo;

From d113326d9d9b0d9633826e879cdd67bd13b0e5ac Mon Sep 17 00:00:00 2001
From: kirin <wangkyrin@gmail.com>
Date: Mon, 19 Sep 2022 10:24:49 +0800
Subject: [PATCH 3/3] docs: unocss plugin docs

---
 docs/docs/guides/styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/guides/styling.md b/docs/docs/guides/styling.md
index 8c47f257bc19..d0d32e469f3e 100644
--- a/docs/docs/guides/styling.md
+++ b/docs/docs/guides/styling.md
@@ -102,7 +102,7 @@ Umi 提供了内置的 [Tailwindcss](https://tailwindcss.com/)
 pnpm i unocss @unocss/webpack
 ```
 
-3. 在 Umi 设置中启用插件，并声明会用到 `unocss` 的文件目录
+3. 在 Umi 设置中启用插件
 
 ```js
 // .umirc.ts 或 config/config.ts