# smart-optimize-css

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

Latest version **1.0.0** (published 2021-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install smart-optimize-css
pnpm add smart-optimize-css
yarn add smart-optimize-css
bun add smart-optimize-css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-06-23 |
| First published | 2021-06-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 14 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yipai |
| Maintainers | column_meng |

## Links

- npm: https://www.npmjs.com/package/smart-optimize-css
- npm.io page: https://npm.io/package/smart-optimize-css

## Dependencies (2)

- [cssfmt](https://npm.io/package/cssfmt.md) ^2.1.5
- [postcss](https://npm.io/package/postcss.md) ^8.2.4

## Recent versions

- 1.0.0 (latest) — 2021-06-23

## README

## Smart-Optimize-CSS

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

#### 功能点:
- 压缩
- 排序(支持选择器列表进行文件内容排序)
- 去重(根据选择器 + 选择器内容去重)

#### 安装:
```bash
  yarn add -D smart-optimize-css
```

#### 使用方法
```javascript
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: [], // 自定义插件插槽
});
```

#### 插件定制
```typescript 
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;
}
```

---
_Source: https://npm.io/package/smart-optimize-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._