refactor: unocss plugin with vite plugin and webpack plugin

docs/docs/guides/styling.md

@@ -96,13 +96,13 @@ 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` 的文件目录
+3. 在 Umi 设置中启用插件
 
 ```js
 // .umirc.ts 或 config/config.ts
@@ -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` 字段，动态生成样式文件并自动套用

packages/plugins/src/unocss.ts

@@ -1,18 +1,12 @@
-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({
     key: 'unocss',
     config: {
       schema(Joi) {
         return Joi.alternatives().try(
-          Joi.object({
-            watch: Joi.array(),
-          }),
+          Joi.object(),
           Joi.boolean().invalid(true),
         );
       },
@@ -22,34 +16,38 @@ 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 (api.isPluginEnable('mfsu')) {
+      // mfsu默认开启时为undefined
+      if (memo.mfsu === undefined) {
+        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 }];
   });
 };