1.0.0 • Published 3 years ago
smart-optimize-css v1.0.0
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;
}
1.0.0
3 years ago