feat: update mako and fix less

umijs · Aug 19, 2024 · 674e408 · 674e408
2 parents 10966e5 + 49bd3b2
commit 674e408
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 43 deletions.
diff --git a/demo/.umirc.ts b/demo/.umirc.ts
@@ -5,6 +5,9 @@ export default defineConfig({
   nodeModulesTransform: {
     type: 'none',
   },
+  theme: {
+    'primary-color': '#00FF00',
+  },
   routes: [{ path: '/', component: '@/pages/index' }],
   fastRefresh: {},
   mfsu: false,

diff --git a/demo/src/pages/index.less b/demo/src/pages/index.less
@@ -1,4 +1,4 @@
 .title {
-  background: rgb(121, 242, 157);
+  background: @primary-color;
   font-size: 515px;
 }
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   "dependencies": {
     "@umijs/bundler-webpack": "3.5.41",
     "@umijs/deps": "^3.5.41",
-    "@umijs/mako": "^0.7.5",
+    "@umijs/mako": "0.8.2",
     "@umijs/preset-built-in": "^3.5.41",
     "@umijs/types": "3.x",
     "compression": "^1.7.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/bundler-mako.ts b/src/bundler-mako.ts
@@ -1,6 +1,5 @@
 import { Bundler as WebpackBundler } from '@umijs/bundler-webpack';
 import { createProxyMiddleware } from 'http-proxy-middleware';
-import path from 'path';
 import { getDevBanner, getMakoConfig, getStats } from './utils';
 
 class Bundler extends WebpackBundler {
@@ -28,18 +27,21 @@ class Bundler extends WebpackBundler {
       }
       const config = bundleConfigs[0];
       const makoConfig = getMakoConfig(this.config, config);
-
+      makoConfig.plugins ??= [];
+      let statsJson: any;
+      makoConfig.plugins.push({
+        name: 'mako-stats',
+        generateEnd: (args: any) => {
+          statsJson = args.stats;
+        },
+      });
       build({
         root: this.cwd,
         config: makoConfig,
         watch: false,
       })
         .then(() => {
-          const outputPath = path.resolve(
-            this.cwd,
-            this.config.outputPath || 'dist',
-          );
-          const statsUtil = getStats(outputPath);
+          const statsUtil = getStats(statsJson);
           onBuildComplete?.(null, statsUtil);
           resolve({ stats: statsUtil, compiler: {} });
         })
@@ -71,12 +73,9 @@ class Bundler extends WebpackBundler {
         makoConfig.plugins.push({
           name: 'mako-dev',
           generateEnd: (args: any) => {
-            const outputPath = path.resolve(
-              this.cwd,
-              this.config.outputPath || 'dist',
-            );
-            const statsUtil = getStats(outputPath);
+            const statsUtil = getStats(args.stats);
             const compilation = statsUtil.toJson();
+            // console.log(compilation);
             // onDevCompileDone { startTime: 1720582011441, endTime: 1720582011804 }
             // console.log('onDevCompileDone', args);
             config.onCompileDone?.({
@@ -86,7 +85,7 @@ class Bundler extends WebpackBundler {
                 compilation,
               },
             });
-            if (args.isFirstCompile) {
+            if (args.is_first_compile) {
               const protocol = this.config.https ? 'https:' : 'http:';
               const banner = getDevBanner(protocol, hostname, port);
               console.log(banner);
@@ -102,7 +101,6 @@ class Bundler extends WebpackBundler {
         } catch (e: any) {
           // opts.onBuildError?.(e);
           config.onCompileFail?.(e);
-
           console.error(e.message);
           const err: any = new Error('Build with mako failed.');
           err.stack = null;

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,9 +1,16 @@
 import address from '@umijs/deps/compiled/address';
 import chalk from '@umijs/deps/compiled/chalk';
-import fs from 'fs';
 import lodash from 'lodash';
 import path from 'path';
 
+function getLessSourceMapConfig(devtool: any) {
+  return (
+    devtool && {
+      sourceMapFileInline: true,
+      outputSourceFiles: true,
+    }
+  );
+}
 export const getMakoConfig = (config: any, bundleConfig: any) => {
   const define: any = {};
   function normalizeDefineValue(val: string) {
@@ -40,30 +47,32 @@ export const getMakoConfig = (config: any, bundleConfig: any) => {
     generatorEntry[key] = bundleConfig.entry[key][0];
   });
 
+  const normalizedDevtool = config.devtool === false ? false : 'source-map';
+
   return {
     mode: bundleConfig.mode,
-    // FIXME: devtool 为 false 时 mako dev 的时候缺失 css 的 chunks https://github.com/umijs/mako/issues/1134
-    devtool: {},
+    devtool: config.devtool,
     autoCSSModules: true,
-    less: {},
+    less: {
+      modifyVars: config.lessLoader?.modifyVars || config.theme,
+      globalVars: config.lessLoader?.globalVars,
+      sourceMap: getLessSourceMapConfig(normalizedDevtool),
+      math: config.lessLoader?.math,
+      plugins: config.lessLoader?.plugins,
+    },
     resolve: { alias: generatorAlias },
     entry: generatorEntry,
     // always enable stats to provide json for onBuildComplete hook
     stats: {
       modules: false,
     },
     define,
+    sass: config?.sass,
     ...(config?.mako || {}),
   };
 };
 
-export const getStats = (outputPath: string) => {
-  const statsJsonPath = path.join(outputPath, 'stats.json');
-  const statsJson = JSON.parse(fs.readFileSync(statsJsonPath, 'utf-8'));
-
-  // remove stats.json file
-  // fs.rmSync(statsJsonPath);
-
+export const getStats = (statsJson?: any) => {
   // 手动对标 chunks，主要是 @umijs/preset-built-in/lib/plugins/commands/htmlUtils.js 中用于生成 html
   const stats = {
     compilation: {