Smart-Optimize-CSS

对于聚合工程的css代码进行优化,支持以下功能

功能点:

• 压缩
• 排序(支持选择器列表进行文件内容排序)
• 去重(根据选择器 + 选择器内容去重)

安装:

  yarn add -D smart-optimize-css

使用方法

import { parse, stringify } from 'smart-optimize-css';

// 使用工具读取css源码内容
const cssContent = '.a {\nbackground-color: red;\n}';

// 首先解析css内容为自定义列表
const parsedContent = parse(cssContent);

// 输出内容 选项都是可选的
const cssFileContent = stringify(parsedContent, {
  compress: false, // 是否开启压缩, 默认false
  sorts:['.a', 'body'], // 对选择器进行排序, 根据传入的selector的startsWith进行匹配, 按照数组记录优先排序
  unique: false, // 是否开启去重, 根据选择器 + 选择器内容去重, 默认false
  append: [{key: 'body', value: ['padding: 0', 'margin: 0']}], // 尾部插入自定义语句,如果想提前插入,使用sorts进行排序即可
  plugins: [], // 自定义插件插槽
});

插件定制

import { hash } from 'smart-optimize-css/utils';

export interface CSSModel {
  key: string; // 选择器名称
  value: string[]; // 选择器值
  hash: string; // hash字符
}

function xxxPlugin(content: CSSModel[]): CSSModel[] {
  // 示例代码: 自定义处理方法
  
  for (const model of content) {
    model.value = 'xxx';
    // 如果需要修改value的值, 需要随之更新hash
    model.hash = hash(model.key, model.value);
  }

  return content;
}