@alifd/fusion-theme-config

theme config depends on css variables

Usage no npm install needed!

<script type="module">
  import alifdFusionThemeConfig from 'https://cdn.skypack.dev/@alifd/fusion-theme-config';
</script>

README

主题配置 CLI

主题配置相关的命令行工具 🔧。

开始

安装：

tnpm i fusion-theme-config --save-dev

配置 package.json 脚本命令：

"scripts": {
  // ...
  "theme": "theme-scripts start --env=mobile",
  "theme:build": "theme-scripts build --env=mobile",
  "theme:publish": "theme-scripts publish --name=meet",
  // ...
}

用法

start 命令

本地启动主题配置服务，用于组件库本地开发调试主题配置页面及配置变量。目前只支持 mobile 端的配置。关于配置页面的书写和相关配置，可见：https://yuque.antfin.com/fusion-design-system/fusion-design/gapznv

build 命令

用于构建主题配置文档，目前只支持 mobile 端，构建之后发布到 npm 之后，即可发布到平台上。

publish 命令

参数 name 可选值 meet, next。

next 组件一般通过 github 的 webhook 接口自动在组件库发布新版本的时候自动触发入库接口，不过如果需要更新日常环境或者需要发布 beta 版本，则可以通过该命令行进行发布。

meet 组件暂时没有 webhook 入库方式，必须需要通过该命令进行入库。

代码

.
├── package.json
├── bin                             // 命令入口
├── plugin                          // postcss 插件
    ├── postcss-replace-selector.js // 样式 selector 替换插件
    ├── postcss-rpx-to-px.js        // rpx 转 px 插件
├── scripts                         // 脚本
    ├── build                       // 构建脚本
    ├── publish                     // 发布脚本
    ├── start                       // 配置页启动脚本
├── share                           // 公共方法
└── src
    ├── common
        ├── comment-parser          // 样式注释解析
        ├── css-shorthand-expand    // 样式简写展开逻辑
        ├── css-variables-extract.js  // css 变量抽取逻辑
    ├── component                     // 组件
      ├── Color                       // 颜色选择组件
      ├── ConfigEditor                // 配置面板
      ├── ConfigItem                  // 配置项
      ├── Device                      // 设备样式：废弃
      ├── ShadowEditor                // 阴影编辑器
    ├── template                      // 页面模板
    ├── test                          // 测试用例
    ├── README.md
    └── build.js                      // 构建脚本

开发调试

  1. 本地测试
npm run test

或

npm run dev
  1. 通过 link 命令
  • 在当前仓库运行
tnpm link
  • 打开 meet 项目
tnpm uninstall fusion-theme-config && tnpm link fusion-theme-config