Build-In-Color

内置颜色约束

在项目中，为了统一对齐设计侧给的基础颜色，基本会书写单独的文件使用 js 变量来定义项目中的基础颜色，抑或是 css 变量，例如：

export const Grey11 = '#4C5E70';
export const Info6 = '#568FB2';
export const Brand1 = '#F2F5FC';

.root {
  --grey11: #f6f6fe;
  --info6: #568FB2;
  --brand1: #F2F5FC;
}

而当我们在日常开发时，可能会直接将颜色编号书写到代码中，例如：

const Page = <span style={{ color: '#568FB2' }}>this is a title</span>

const StyledTotalCnt = styled.span`
  color: #4C5E70;
`;

但这样的话，当项目基础颜色变更时，项目中会遗留大量的错误颜色，无法做到同步更新

而开启此插件后，可以自动检测代码中是否有内置颜色，如果有，会将其修复为项目中定义该颜色的变量形式，并将变量自动引入

修复为：

const Page = <span style={{ color: Info6 }}>this is a title</span>

const StyledTotalCnt = styled.span`
  color: ${Grey11};
`;

const Page = <span style={{ color: 'var(--info6)' }}>this is a title</span>

const StyledTotalCnt = styled.span`
  color: var(--grey11);
`;

Usage

此插件支持两种模式： js 变量模式与 css 变量模式，以 mode 区分，具体配置如下：

默认为 css 模式，可以只传递颜色映射

若需要 js 模式，需要传递变量引入的路径，并且配置 mode 为 variable，如下：


const COLOR_MAPPING_JS = {
  '#4C5E70': 'Grey11',
  '#568FB2': 'Info6',
  '#F2F5FC': 'Brand1'
}

const COLOR_MAPPING_CSS = {
  '#4C5E70': '--grey11',
  '#568FB2': '--info6',
  '#F2F5FC': '--brand1'
}

// js 变量模式
module.exports = {
  plugins: ['@aoviz'],
  rules: [
    '@aoviz/build-in-color': ['warn', COLOR_MAPPING_JS, {
      mode: 'variable',
      path: '@libs/colors'
    }],
  ]
}

// css 变量模式
module.exports = {
  plugins: ['@aoviz'],
  rules: [
    '@aoviz/build-in-color': ['warn', COLOR_MAPPING_CSS],
  ]
}

@libs/colors 表示当前颜色值变量应从哪里引入，COLOR_MAPPING 表示当前颜色值与变量的映射关系。