chore: use mako for docs

.umirc.ts

@@ -2,7 +2,7 @@ export default {
   favicons: [
     'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
   ],
-  mfsu: { strategy: 'normal' },
+  mfsu: false,
   routePrefetch: {},
   manifest: {},
   plugins: ['@umijs/plugin-docs'],

docs/blog/mfsu-faster-than-vite.mdx

@@ -1,6 +1,6 @@
 # 比 Vite 还快的 MFSU
 
-<p style={{ color: 'blue' }}>
+<p>
   编者按：Change the code, don't Workaround! Webpack
   慢就去改他，优化到位后，Bundle 也可以很快。此方案会在 Umi 4
   中默认开启，适用于既要 Webpack 功能与生态，又想要 Vite 速度的同学们。
@@ -9,9 +9,7 @@
 Umi 4 中同时支持 webpack 和 vite 两种构建方式，跑通了后，迫不及待对比了 Vite 和 Webpack + MFSU 的效果，结果有点意外。关于什么是 MFSU，我在[《SEE Conf: Umi 4 设计思路文字稿》](https://mp.weixin.qq.com/s?__biz=MjM5NDgyODI4MQ%3D%3D&mid=2247484533&idx=1&sn=9b15a67b88ebc95476fce1798eb49146)中有一段详细介绍。
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>
-    两个示例、四种模式、四个维度的对比。
-  </span>
+  两个示例、四种模式、四个维度的对比。
   两个示例分别是大型的全量 ant-design-pro 和小型的 libs example；四种模式分别是 webpack、webpack
   + MFSU、webpack + MFSU with esbuild mode、Vite in umi；四个维度分别是无缓存的冷启动、有缓存的热启动、修改代码后的热更新、页面打开速度。
 </p>
@@ -22,14 +20,14 @@ Umi 4 中同时支持 webpack 和 vite 两种构建方式，跑通了后，迫
 
 ![](https://img.alicdn.com/imgextra/i4/O1CN01Gz9AA81szqy3BbRfK_!!6000000005838-2-tps-2150-1084.png)
 
-<p style={{ color: 'gray', marginTop: 0, textAlign: 'center' }}>
+<p>
   图：全量 ant-design-pro 速度对比图
 </p>
 
 ![](https://img.alicdn.com/imgextra/i1/O1CN01HNfH7l23L3SRjJUka_!!6000000007238-2-tps-2058-1078.png)
 
-<p style={{ color: 'gray', marginTop: 0, textAlign: 'center' }}>
+<p>
   图：libs example 速度对比图
 </p>
 
-可以看到，<span style={{color:'red',fontWeight:'bold'}}>在这几个场景下，MFSU with esbuild 数据领先。</span>四个模式的页面打开速度差不多，所以对比数据没在图中列出，这也是让我意外的点，原以为 Vite 请求多会让页面打开速度变慢，也有可能项目还不够复杂？
+可以看到，在这几个场景下，MFSU with esbuild 数据领先。四个模式的页面打开速度差不多，所以对比数据没在图中列出，这也是让我意外的点，原以为 Vite 请求多会让页面打开速度变慢，也有可能项目还不够复杂？

docs/blog/umi-4-rc.mdx

@@ -5,15 +5,15 @@
 🎉 新官网和文档<br /> 🚀 MFSU V3 & 默认开启<br /> 🎭 双构建引擎和 ESMi<br /> 🕸 Webpack 5<br /> ⛹🏾‍♂️ React Router 6 & 新路由<br /> 🐹 最佳实践迭代<br /> 🛡️ 依赖预打包<br /> 🤺 Umi Max<br /> 🐛 Low Import 研发模式<br /> ⚠️ 强约束功能集成<br /> 🎈 Import All From Umi 迭代<br /> 🍀 srcTranspiler 和 depTranspiler<br /> 🌼 jsMinifier 和 cssMinifier<br /> 🌸 应用元数据<br /> ❄️ 微生成器<br /> 🧪 贴心小改进<br />
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>新官网和文档。</span>
+  **新官网和文档。**
   下图是新官网的首页，包括重新梳理的文档、信息结构、以及新写的文档插件。目前包含基础的配置、API、升级和快速上手等基础文档，剩余文档还在紧张编写中。有个变化是之前插件的文档集成到
   Umi 官网中，成为 Umi Max 的一部分，之后无需跳转。
 </p>
 
 ![](https://img.alicdn.com/imgextra/i1/O1CN014dDq4L1Zc3guRwcse_!!6000000003214-2-tps-1600-941.png)
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>MFSU V3 & 默认开启。</span>
+  **MFSU V3 & 默认开启。**
   MFSU 更新了他的第三个大版本，如果你有用 Umi 3 内置的 MFSU 并遇到问题，建议重新尝试，这个版本有很多改进，解决基本所有之前可能会遇到的诡异问题，并且编译速度和页面打开速度都更快。昨天我还有写一篇
   [《比 Vite 更快的 MFSU》](https://mp.weixin.qq.com/s?__biz=MjM5NDgyODI4MQ==&mid=2247484624&idx=1&sn=2addfa8cc2511fbea91faf831195788f)。基于此，我们自信地把这个功能在
   Umi 4 中默认开启。还有值得一提的是，MFSU 可脱离 Umi 运行。
@@ -22,32 +22,30 @@
 ![](https://img.alicdn.com/imgextra/i2/O1CN01Znj8HD1mCwz72voXv_!!6000000004919-2-tps-1600-807.png)
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>双构建引擎和 ESMi。</span>
+  **双构建引擎和 ESMi。**
   Umi 4 提供 Vite 和 Webpack 两种构建模式供开发者选择，并尽可能保证他们之间功能的一致性，可能有些同学会喜欢
   dev 用 vite，build 用 webpack 这样的组合。同时基于 Vite 模式实现了 ESMi 的 Client
   端，ESMi 依赖服务端，在外网还无法使用。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>Webpack 5。</span>Umi 4
-  默认使用 webpack 5 并开启物理缓存。
+  **Webpack 5。**
+  Umi 4 默认使用 webpack 5 并开启物理缓存。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>
-    React Router 6 & 新路由。
-  </span>
+  **React Router 6 & 新路由。**
   Umi 4 的路由基于 React Router 6 实现，个人非常喜欢这个版本，因为 Remix 的原因，React
   Router 6 从设计上考虑了配置式路由的场景，让我得以删除大量 Umi 3 中关于路由渲染的代码。同时基于此，设计了新的路由结构，方便扩展和在未来处理路由的约定式请求。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>最佳实践迭代。</span>
+  **最佳实践迭代。**
   针对之前 umijs/plugins 仓库中的插件进行了重写、升级，并整合到主仓库。这么做是为了更好的顶层设计，让官方插件之间的风格更一致。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>​​依赖预打包。</span>
+  ​​**依赖预打包。**
   由于服务企业内部，安全和稳定是其中很重要点，加上最近 colors 和 faker.js 闹得社区沸沸扬扬，谁都不希望睡一觉醒来，自己负责的业务挂了，还背个故障。Umi
   4 接着 Umi 3 继续做依赖预打包的事，并且更彻底，不仅是 node 侧的依赖，部分运行时的依赖也会做锁定，比如
   core-js 和 @babel/runtime。
@@ -56,15 +54,12 @@
 ![](https://img.alicdn.com/imgextra/i1/O1CN01h44iJg1T09DNuYOlm_!!6000000002319-2-tps-1600-758.png)
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>Umi Max。</span>Umi Max
-  是内部 Bigfish
-  框架的对外版本，解我们自己的问题，同时也给社区另一个集中化框架的选择。
+  **Umi Max。**
+  Umi Max 是内部 Bigfish 框架的对外版本，解我们自己的问题，同时也给社区另一个集中化框架的选择。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>
-    Low Import 研发模式。
-  </span>
+  **Low Import 研发模式。**
   这是 Umi 4 的试验性功能之一，目前已开发完成，解的问题是让开发者少些或不写 import
   语句。项目中大量的 import 其实都可以通过工程化的方式自动处理。Umi 4 里通过 lowImport:{' '}
   {} 开启，然后就可以无 import 直接用路由相关的 Link、useLocation 等，数据流相关的
@@ -74,66 +69,59 @@
 ![](https://img.alicdn.com/imgextra/i4/O1CN0142Vcpt25kMZqjmioe_!!6000000007564-2-tps-1600-631.png)
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>强约束功能集成。</span>Umi
-  4 提供 API 让强约束和代码校验变得非常容易。API 包括
+  **强约束功能集成。**
+  Umi 4 提供 API 让强约束和代码校验变得非常容易。API 包括
   api.onCheck、api.onCheckConfig、api.onCheckPkgJSON 和
   api.onCheckCode，顾名思义，非常好理解他们分别是干嘛的，可以分别对依赖类、代码类和配置类的内容做校验和卡点，适用于团队。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>
-    Import All From Umi 迭代。
-  </span>
+  **Import All From Umi 迭代。**
   这是两年前 Umi 3 加的功能，最近发现 Remix、prisma、vitekit 等框架和工具都有类似实现。这种方式有好有坏。好处是通过
   umi 将大量依赖管理起来，用户无需手动安装。坏处是更黑盒，同时有点 Hack。Umi 4 不能解其黑盒问题，但解了
   Hack 问题，让实现无副作用，可以和 Vite、MFSU 等方案无缝结合。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>
-    srcTranspiler 和 depTranspiler。
-  </span>
+  **srcTranspiler 和 depTranspiler。**
   提供针对源码编译和依赖编译更多选择。源码编译可选 babel、swc 和 esbuild，目前没有银弹，合适场景做合适的选择。比如
   swc 由于不支持 top level await，和 mfsu 会有些冲突，但他适用于 build，因为有补丁可以兼容到
   es7；比如 esbuild 适用于 dev，因为快。数据方面以 ant-design-pro 项目为例，源码编译用
   esbuild 相比 babel 在 M1 2020 无缓存情况下会快 3s。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>
-    jsMinifier 和 cssMinifier。
-  </span>
+  **jsMinifier 和 cssMinifier。**
   js 压缩和 css 压缩 Umi 4 默认都用的 esbuild，因为快。同时也提供更多选择，js 压缩还支持
   swc、terser 和 uglifyJs，css 压缩还支持 cssnano。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>应用元数据。</span>Umi 4
-  有通过 api.appData
-  收集各种项目数据，从配置、路由、package.json、tsconfig.json、npmClient
+  **应用元数据。**
+  Umi 4 有通过 api.appData 收集各种项目数据，从配置、路由、package.json、tsconfig.json、npmClient
   到数据流、国际化、antd 用了哪个版本、react 和 react-dom
   的版本等，应有尽有，这对于插件开发者会非常实用，也适用于有统计需求的场景。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>微生成器。</span>没错，就是
-  modern.js 的微生成器，这功能从 modern.js
+  **微生成器。**
+  没错，就是 modern.js 的微生成器，这功能从 modern.js
   里学习了不少，名字就不改了。举个例子，比如 prettier
   功能，可能不是每个项目都需要，就比较适用于微生成器，按需启用、添加配置、安装依赖。
 </p>
 
 <p>
-  <span style={{ color: 'red', fontWeight: 'bold' }}>贴心小改进。</span>
+  **贴心小改进。**
   还有不少贴心小改进，举两个例子。1 是项目中新增 plugin.ts，会默认作为插件添加，方便项目进行一些插件级的扩展；2
   是调试问题时通常需要修改编译后的代码看看有没有改对，你把 umi.js 下下来存到项目根目录，umi
   会优先使用这份代码。
 </p>
 
 以上是 Umi 4 目前的新功能。
 
-除此之外，还有一些计划在正式版发布之前做的事情。包括 <span style={{color:'red'}}>api route、umi server and adapter、route loader、稳定的 lint、更多命令、组件研发 father 4、文档工具 dumi 2</span> 等，会在之后的 RC 版本中与大家见面。
+除此之外，还有一些计划在正式版发布之前做的事情。包括 api route、umi server and adapter、route loader、稳定的 lint、更多命令、组件研发 father 4、文档工具 dumi 2 等，会在之后的 RC 版本中与大家见面。
 
-欢迎大家尝鲜 Umi 4，官方文档有准备 ant-design-pro 从 Umi 3 到 4 的升级文档。同时 RC 阶段，还准备了一个<span style={{color:'red',fontWeight:'bold'}}>手把手升级的微信交流群</span>，欢迎 Umi 4 的先行者们加入，祝大家升级顺利，也提前祝大家新年快乐 🧨，🐯 年吉祥。
+欢迎大家尝鲜 Umi 4，官方文档有准备 ant-design-pro 从 Umi 3 到 4 的升级文档。同时 RC 阶段，还准备了一个手把手升级的微信交流群，欢迎 Umi 4 的先行者们加入，祝大家升级顺利，也提前祝大家新年快乐 🧨，🐯 年吉祥。
 
 <p>
   <img

docs/components/Contributing/Contributing.css → docs/components/Contributing/Contributing.module.css

@@ -9,7 +9,7 @@
   margin-bottom: 16px;
 }
 
-:global(.dark) .normal p {
+:global .dark :local .normal p {
   color: rgba(255, 255, 255, 0.8);
 }
 

docs/components/Contributing/Contributing.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 // @ts-ignore
 import { Link } from 'umi';
 // @ts-ignore
-import styles from './Contributing.css';
+import styles from './Contributing.module.css';
 
 export default () => {
   return (

docs/components/Features/Features.css → docs/components/Features/Features.module.css

@@ -55,14 +55,14 @@
   margin-bottom: 12px;
   text-align: center;
 }
-:global(.dark) .feature h3 {
+:global .dark :local .feature h3 {
   color: rgba(255, 255, 255, 0.8);
 }
 
 .feature p {
   font-size: 18px;
   color: #4a5e71;
 }
-:global(.dark) .feature p {
+:global .dark :local .feature p {
   color: rgba(255, 255, 255, 0.6);
 }

docs/components/Features/Features.tsx

@@ -1,7 +1,7 @@
 import SectionHeader from '@/docs/components/SectionHeader/SectionHeader';
 import React from 'react';
 // @ts-ignore
-import styles from './Features.css';
+import styles from './Features.module.css';
 
 export default () => {
   // prettier-ignore

docs/components/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from 'umi';
 import NewsLetterForm from './NewsLetterForm';
 // @ts-ignore
-import styles from './Footer.css';
+import styles from './Footer.module.css';
 
 export default () => {
   return (

docs/components/Footer/NewsLetterForm.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 // @ts-ignore
-import styles from './NewsLetterForm.css';
+import styles from './NewsLetterForm.module.css';
 
 export default () => {
   return (

docs/components/Hero/Hero.css → docs/components/Hero/Hero.module.css

@@ -15,7 +15,7 @@
   height: 640px;
   z-index: 1;
 }
-:global(.dark) .bg {
+:global .dark :local .bg {
   opacity: 0.1;
 }
 
@@ -91,10 +91,10 @@
   content: '';
   margin-right: 6px;
 }
-:global(.dark) .githubStar {
+:global .dark :local .githubStar {
   color: rgba(255, 255, 255, 0.7);
 }
-:global(.dark) .githubStar:before {
+:global .dark :local .githubStar:before {
   filter: invert(80%);
 }
 
@@ -132,7 +132,7 @@
   color: #0273dc;
   font-weight: normal;
 }
-:global(.dark) .slogan {
+:global .dark :local .slogan {
   color: rgba(255, 255, 255, 0.8);
 }
 
@@ -144,6 +144,6 @@
   background-size: 380px 193px;
   margin: 8px auto 0;
 }
-:global(.dark) .bow {
+:global .dark :local .bow {
   opacity: 0.8;
 }

docs/components/Hero/Hero.tsx

@@ -4,7 +4,7 @@ import GithubStar from './GithubStar';
 // @ts-ignore
 import { Link } from 'umi';
 // @ts-ignore
-import styles from './Hero.css';
+import styles from './Hero.module.css';
 
 export default () => {
   // TODO: github stars 存 localStorage

docs/components/SectionHeader/SectionHeader.css → docs/components/SectionHeader/SectionHeader.module.css

@@ -17,6 +17,6 @@
   padding: 0 20px;
 }
 
-:global(.dark) .normal h2 {
+:global .dark :local .normal h2 {
   color: rgba(255, 255, 255, 0.7);
 }

docs/components/SectionHeader/SectionHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 // @ts-ignore
-import styles from './SectionHeader.css';
+import styles from './SectionHeader.module.css';
 
 export default (props: { title: string }) => {
   return (

docs/components/WhoIsUsing/WhoIsUsing.css → docs/components/WhoIsUsing/WhoIsUsing.module.css

@@ -12,7 +12,7 @@
 .normal li {
 }
 
-:global(.dark) .normal li {
+:global .dark :local .normal li {
   background: rgba(255, 255, 255, 0.9);
 }
 

docs/components/WhoIsUsing/WhoIsUsing.tsx

@@ -1,7 +1,7 @@
 import SectionHeader from '@/docs/components/SectionHeader/SectionHeader';
 import React from 'react';
 // @ts-ignore
-import styles from './WhoIsUsing.css';
+import styles from './WhoIsUsing.module.css';
 
 export default () => {
   return (