@lingxiteam/theme-utils

antd@4 theme class utils, css utils

pnpm i @lingxiteam/theme-utils

import {} from '@lingxiteam/theme-utils';

新建场景描述：

1、通过编辑页面 form 得到，theme 的对象 如 { backgroundColor:'red',fontSize:'12px'} 2、根据模版 '.cc{ background-color: backgroundColor; font-size: fontSize;}' 解析 css 3、得到最终 css '.cc{ background-color:red; font-size:12px;bor:123}' 4、将最终 css 提交到服务端

编辑场景描述：

1、从服务端取得 css 2、根据模版将 css 中的对象取出 { backgroundColor:'red',fontSize:'12px'} 3、将对象赋值到编辑页面 form 4、重复新建场景

预览场景描述：

1、每次编辑都会实时的生成 css 2、通过 normalizeCSS(css,'#previewId') 将 css 作用到指定 id dom 下 ' #previewId { .cc{ background-color:red; font-size:12px; }}' 3、通过 insertRules('12312', css, document.getElementById('previewId')); 将 style 挂载到预览 dom 上 4、挂载的样式仅会对预览生效

使用场景描述：

1、通过 insertLink('12312', 'http://xxx.css',true); 在页面上加载所有的生成的 css，将会对所有的场景生效。

stringifyCss

根据指定模版，将对象的值解析道模版中，生成最终的 css 字符串

const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
const a = { backgroundColor: 'red', fontSize: '12px' };
const c = stringifyCss(tpl, a);
console.log(c); // .cc{ background-color:red; font-size:12px;}

parseCss

根据指定模版，将值从 css 字符串中解析成对象

const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
const a = '.cc{ background-color:red; font-size:12px;}';
const c = parseCss(tpl, a);
console.log(c); // { backgroundColor:'red',fontSize:'12px'}

normalizeCSS

编译 css 且支持给 css 提供指定的选择器，如

const a = '.a{ .b{ font-size:12px; } }';

const css = normalizeCSS(a);

console.log(css);

// output: '.a .b{font-size:12px;}'

const css1 = normalizeCSS(a, '.cc');
console.log(css1);
// output: '.cc .a .b{font-size:12px;}'

insertRules

将 css 挂载到页面上 insertRules(id: string, rules: string,selector = document.head,); 指定 id，会覆盖生产的 style 标签

insertRules('12312', css);

insertLink

挂载指定的 css link insertLink(id: string, href: string, insertBefore = false)

可选择指定挂在在 body.firstElementChild 还是 head 中

insertLink('12312', 'http://xxx.css', true);

关于配置

  {
    type: '类型',
    // 所有的 css 有一个父级类名，理论上每一个都需要这个配置，是为了兼容第一版本的数据，因为组件太多，要全部重写一遍需要工作量，所以只修改了异常的组件
    hasPrefixClass: true,
    // 隐藏自定义类名按钮，当前只有pc端容器
    hiddenCustomCss: true,
    variable: {
      // 允许配置项
      fontSize: {
        // 对应编辑器的类型，px color select marginInput 四种
        type: 'px',
        label: '尺寸',
        groupsName: '文字' ,
        desc: '说明文字'，
        // 继承其他组件属性时要标记不可编辑
        canEdit: false,
        // 编辑从什么地方支撑这个属性
        extendsKey: 'Form',
        // 表示这个字段跟随全局主题变量
        followTheme: '@font-size-base',
        // 是否隐藏,用于取全局变量，但是不允许用户修改的情况，如表单边框激活颜色
        hidden: false,
      },
    },
    groupsName: '分组名称',
    icon: '图标名称要和组件库对应上',
    title: '标题',
    defaultValue: [
      {
        // 上面定义的配置项的默认值
        fontSize: '14px',
      },
    ],
    // 是否跟随主题的开关，存在表示当前为跟随
    followThemes: {
      '@font-size-base': ['fontSize'],
    },
    // 根据上面的配置项和下面的模版解析得到最终挂在的 css
    tpl: '.hh { font-size: fontSize}',
    // 如果它被别人继承，并且自己需要自定义样式，如父级自定义样式为 .aa.list{ .item { } } 子级的自定义样式为 .aa.item { }
    itemCustomTpl: '',
    // 预览用数据，编辑器中推拽出来的 dsl ，可直接复制，View 下的 components，维护时如预览页面有变更，可直接替换这个数据，无需详细比对
    components: [],
  };

关于继承

因为继承在预览和自定义样式时需要先加载父级的样式，所以需要在工具中写明哪些组件需要先获取。

如： theme-utils/src/lx-mobile.ts#L63 和 theme-utils/src/lx.ts#L62

const extend: any = {};