plugin-theme-less.ts

import fs from 'fs';
import type { IApi } from 'dumi';
import { isNil, omitBy } from 'lodash';
// umi 插件只能 import 支持 CommonJS 语法库和文件，因此需要使用 lib 产物
import formatToken from 'antd/lib/theme/util/alias';
// @ts-ignore
import theme from './.dumi/tmp/plugin-theme-less/theme/index.js';
// @ts-ignore
import defaultTheme from './.dumi/tmp/plugin-theme-less/theme/default.js';
// @ts-ignore
import darkTheme from './.dumi/tmp/plugin-theme-less/theme/dark.js';
// @ts-ignore
import aliyunTheme from './.dumi/tmp/plugin-theme-less/theme/aliyun.js';

function unit(key: string, value: string | number) {
  if (
    typeof value === 'number' &&
    !key.startsWith('lineHeight') &&
    !key.startsWith('zIndex') &&
    !key.startsWith('opacity') &&
    !key.startsWith('motion') &&
    !key.startsWith('fontWeight')
  ) {
    return `${value}px`;
  }
  if (typeof value === 'number' && key.startsWith('motion')) {
    return `${value}s`;
  }
  return value;
}

export default (api: IApi) => {
  // 生成 default.less、dark.less 和 compact.less 主题文件
  api.onGenerateFiles(() => {
    const { defaultAlgorithm, darkAlgorithm, compactAlgorithm, defaultSeed } = theme;
    const themeList = [
      {
        theme: 'default',
        algorithm: defaultAlgorithm,
        token: defaultTheme.token,
      },
      {
        theme: 'dark',
        algorithm: darkAlgorithm,
        token: darkTheme.token,
      },
      {
        theme: 'compact',
        algorithm: compactAlgorithm,
        // 使用 defaultTheme token
        token: defaultTheme.token,
      },
      {
        theme: 'aliyun',
        algorithm: defaultAlgorithm,
        token: aliyunTheme.token,
      },
    ];

    themeList.forEach(item => {
      let mapToken =
        item.theme === 'dark'
          ? {
              // 对于暗色主题，优先级: 算法生成的 Token > 自定义 token
              ...item.token,
              ...item.algorithm(defaultSeed),
            }
          : {
              // 对于非暗色主题，优先级: 自定义 token > 算法生成的 Token
              ...item.algorithm(defaultSeed),
              ...item.token,
            };
      mapToken = {
        ...mapToken,
        // 以下四种预设颜色和语义色保持一致
        blue: mapToken.colorInfo,
        green: mapToken.colorSuccess,
        yellow: mapToken.colorWarning,
        red: mapToken.colorError,
        // override token
        override:
          item.theme === 'dark'
            ? {}
            : // 对于非暗色主题，需要覆盖部分 Alias Token 的值
              omitBy(
                {
                  colorIcon: item.token.colorIcon,
                  colorBgTextHover: item.token.colorBgTextHover,
                  colorBgTextActive: item.token.colorBgTextActive,
                  colorBgContainerDisabled: item.token.colorBgContainerDisabled,
                  controlItemBgHover: item.token.controlItemBgHover,
                  controlItemBgActive: item.token.controlItemBgActive,
                  controlItemBgActiveHover: item.token.controlItemBgActiveHover,
                  lineWidthFocus: item.token.lineWidthFocus,
                  boxShadow: item.token.boxShadow,
                  boxShadowSecondary: item.token.boxShadowSecondary,
                  boxShadowTertiary: item.token.boxShadowTertiary,
                },
                isNil
              ),
      };
      const aliasToken = formatToken(mapToken);

      let lessString = '';
      Object.keys(aliasToken).forEach(key => {
        // fontWeight 相关的变量需要引用 CSS 变量，因为英文环境下的值不同
        if (key === 'fontWeightWeak') {
          lessString += `@${key}: var(--ob-font-weight-sm);\n`;
        } else if (key === 'fontWeight') {
          lessString += `@${key}: var(--ob-font-weight-md);\n`;
        } else if (key === 'fontWeightStrong') {
          lessString += `@${key}: var(--ob-font-weight-lg);\n`;
        } else {
          const value = unit(key, aliasToken[key]);
          lessString += `@${key}: ${value};\n`;
        }
      });

      fs.writeFileSync(`packages/design/src/theme/style/${item.theme}.less`, lessString);
    });
  });
};