# css-optimizer

**Repository Path**: ereddate2017/css-optimizer

## Basic Information

- **Project Name**: css-optimizer
- **Description**: CSS样式优化工具 - 支持CSS/SCSS/LESS压缩、格式化、优化和批量处理（集成官方编译器 + 浏览器前缀支持 + TypeScript支持）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-28
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CSS样式优化工具

一个功能强大的CSS样式优化工具，支持CSS、SCSS和LESS的压缩、格式化、优化和批量处理。集成官方编译器，提供完整的SCSS/LESS支持。

## 功能特性

### 核心功能
- **CSS压缩**: 移除注释、空白字符、空规则，合并重复规则
- **CSS格式化**: 美化CSS代码，使其更易读
- **CSS优化**: 智能优化CSS属性，使用简写属性
- **统计信息**: 显示CSS文件的详细统计信息
- **命令行工具**: 方便的CLI接口
- **批量处理**: 支持批量处理目录中的所有样式文件
- **配置文件**: 支持JSON配置文件自定义优化选项

### 预处理器支持（集成官方编译器）
- **SCSS支持**: 
  - 使用官方Dart Sass编译器
  - 完整支持SCSS语法（变量、嵌套、混入、函数、导入等）
  - 自动检测.scss和.sass文件
  - 编译失败时自动回退到简化实现
- **LESS支持**:
  - 使用官方Less.js编译器
  - 完整支持LESS语法（变量、嵌套、混入、函数、导入等）
  - 自动检测.less文件
  - 编译失败时自动回退到简化实现

### 优化功能
- **颜色值优化**: 
  - 将 #ffffff 优化为 #fff
  - 将 rgb(255,255,255) 转换为 #fff
  - 优化常见颜色值
- **单位值优化**:
  - 将 0px 优化为 0
  - 将 0em 优化为 0
  - 将 0.5px 优化为 .5px
- **引号优化**: 移除url()中不必要的引号
- **简写属性**: 智能合并margin、padding、border等属性
- **浏览器前缀支持**:
  - 自动添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）
  - 支持100+ CSS属性的前缀自动添加
  - 支持移除过时的浏览器前缀
  - 查询属性的浏览器兼容性信息
- **CSS变量优化**:
  - 内联CSS自定义属性
  - 移除未使用的CSS变量
  - 优化变量值
- **@import内联**:
  - 自动内联导入的CSS文件
  - 支持相对路径和绝对路径
  - 检测循环依赖
  - 支持SCSS和LESS导入语法
- **响应式优化**:
  - 合并重复的媒体查询
  - 排序媒体查询
  - 优化媒体查询条件
  - 移除空的媒体查询
  - 简化媒体查询表达式

## 安装

```bash
# 克隆或下载项目
cd css-optimizer

# 安装依赖（包含官方编译器）
npm install

# 需要 Node.js >= 12.0.0
```

## 使用方法

### 命令行使用

#### 基本命令

```bash
# 查看帮助
node cli.js --help

# 压缩CSS文件
node cli.js minify input.css output.css

# 压缩SCSS文件
node cli.js minify input.scss output.css

# 压缩LESS文件
node cli.js minify input.less output.css

# 格式化CSS文件
node cli.js beautify input.css output.css

# 优化CSS文件
node cli.js optimize input.css output.css

# 查看CSS文件统计信息
node cli.js stats input.css
```

#### 批量处理

```bash
# 批量处理目录中的所有CSS/SCSS/LESS文件
node cli.js minify -d ./css-dir -o ./output-dir

# 批量处理并使用默认输出目录
node cli.js minify -d ./css-dir
```

#### 使用配置文件

```bash
# 使用配置文件
node cli.js minify input.css -c config.json

# 批量处理并使用配置文件
node cli.js minify -d ./css-dir -c config.json
```

### 命令行选项

```bash
--no-comments              保留注释
--no-whitespace            保留空白字符
--no-empty-rules           保留空规则
--no-duplicate             不合并重复规则
--no-shorthand             不使用简写属性
--no-colors                不优化颜色值
--no-units                 不优化单位值
--no-quotes                不优化引号
--no-prefixes              不添加浏览器前缀
--remove-prefixes          移除浏览器前缀
--no-scss                  不处理SCSS文件
--no-less                  不处理LESS文件
--no-parallel             禁用并行处理
--source-map              生成Source Map
--source-map-inline       内联Source Map
--debounce <ms>          防抖延迟 (默认: 300)
--indent <spaces>          缩进空格数 (默认: 2)
-o, --output <file>        指定输出文件
-d, --dir <dir>            批量处理目录
-c, --config <file>        使用配置文件
-h, --help                 显示帮助信息
```

### Watch 模式

```bash
# 监听单个文件变化
node cli.js watch input.css output.css

# 监听目录变化
node cli.js watch ./src ./dist

# 使用防抖延迟
node cli.js watch input.css output.css --debounce 500

# 监听并生成Source Map
node cli.js watch input.css output.css --source-map
```

### 配置文件

创建 `config.json` 文件来自定义优化选项：

```json
{
  "removeComments": true,
  "removeWhitespace": true,
  "removeEmptyRules": true,
  "mergeDuplicateRules": true,
  "shorthand": true,
  "optimizeColors": true,
  "optimizeUnits": true,
  "optimizeQuotes": true,
  "addPrefixes": true,
  "removePrefixes": false,
  "processSCSS": true,
  "processLESS": true,
  "indent": "  "
}
```

### 编程接口使用

```javascript
const CSOptimizer = require('./index');

// 创建优化器实例
const optimizer = new CSOptimizer({
  removeComments: true,
  removeWhitespace: true,
  removeEmptyRules: true,
  mergeDuplicateRules: true,
  shorthand: true,
  optimizeColors: true,
  optimizeUnits: true,
  optimizeQuotes: true,
  processSCSS: true,
  processLESS: true,
  indent: '  '
});

// 压缩CSS（同步）
const minified = optimizer.minify(cssString);

// 压缩CSS（异步，用于LESS文件）
const minifiedAsync = await optimizer.minifyAsync(cssString);

// 格式化CSS
const beautified = optimizer.beautify(cssString);

// 优化CSS
const optimized = optimizer.optimize(cssString);

// 处理单个文件（同步）
const result = optimizer.processFile('input.scss', 'output.css', 'minify');

// 处理单个文件（异步）
const resultAsync = await optimizer.processFileAsync('input.less', 'output.css', 'minify');

// 批量处理文件（同步）
const batchResult = optimizer.processFiles(
  ['file1.css', 'file2.scss', 'file3.less'],
  'output-dir',
  'minify'
);

// 批量处理文件（异步）
const batchResultAsync = await optimizer.processFilesAsync(
  ['file1.css', 'file2.scss', 'file3.less'],
  'output-dir',
  'minify'
);

// 获取统计信息
const stats = optimizer.getStats(originalCSS, optimizedCSS);
```

## 示例

### 示例1: 压缩CSS

输入CSS:
```css
body {
    background-color: #ffffff;
    color: #333333;
    margin: 10px;
}
```

输出CSS:
```css
body{background-color:#fff;color:#333;margin:10px}
```

### 示例2: SCSS变量替换

输入SCSS:
```scss
$primary-color: #333333;
$secondary-color: #ffffff;

body {
    background-color: $secondary-color;
    color: $primary-color;
}
```

输出CSS:
```css
body{background-color:#fff;color:#333}
```

### 示例3: LESS变量替换

输入LESS:
```less
@primary-color: #333333;
@spacing: 10px;

.button {
    padding: @spacing;
    background-color: @primary-color;
}
```

输出CSS:
```css
.button{padding:10px;background-color:#333}
```

### 示例4: 颜色优化

输入CSS:
```css
body {
    color: #ffffff;
    background: rgb(255, 0, 0);
    border: #000000;
}
```

输出CSS:
```css
body{color:#fff;background:#f00;border:#000}
```

### 示例5: 单位优化

输入CSS:
```css
div {
    margin: 0px;
    padding: 0em;
    width: 0.5px;
}
```

输出CSS:
```css
div{margin:0;padding:0;width:.5px}
```

### 示例6: 浏览器前缀自动添加

输入CSS:
```css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    transform: rotate(45deg);
    border-radius: 5px;
}
```

输出CSS (启用前缀):
```css
.container{-webkit-display:flex;-moz-display:flex;-ms-display:flex;display:flex;-webkit-justify-content:center;-ms-justify-content:center;justify-content:center;-webkit-align-items:center;-ms-align-items:center;align-items:center;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
```

### 示例7: 查询浏览器兼容性

```javascript
const optimizer = new CSOptimizer();

const info = optimizer.getBrowserSupportInfo('display');
console.log(info);

// 输出:
// {
//   property: 'display',
//   standard: false,
//   prefixes: ['-webkit-', '-moz-', '-ms-'],
//   browsers: ['Chrome', 'Safari', 'Opera', 'Android Browser', 'iOS Safari', 'Firefox', 'Firefox for Android', 'Internet Explorer', 'Edge (legacy)']
// }
```

## 测试

运行测试脚本:

```bash
npm test
```

或直接运行:

```bash
node test.js
```

## 项目结构

```
css-optimizer/
├── index.js                 # 核心优化器类
├── index.d.ts              # TypeScript类型定义
├── cli.js                   # 命令行接口
├── test.js                  # 测试脚本
├── example.css              # 示例CSS文件
├── example.scss             # 示例SCSS文件
├── example.less             # 示例LESS文件
├── config.json              # 配置文件示例
├── package.json             # 项目配置
├── README.md                # 项目说明
├── CHANGELOG.md            # 更新日志
├── COMPARISON.md           # 竞品对比
└── lib/                     # 核心库
    ├── optimizers/          # 优化器模块
    │   ├── color-optimizer.js
    │   ├── unit-optimizer.js
    │   ├── shorthand-optimizer.js
    │   ├── quote-optimizer.js
    │   ├── prefix-optimizer.js
    │   ├── variable-optimizer.js
    │   └── responsive-optimizer.js
    ├── processors/          # 处理器模块
    │   ├── scss-processor.js
    │   └── less-processor.js
    └── utils/              # 工具模块
        ├── file-handler.js
        ├── stats.js
        ├── source-map.js
        ├── watcher.js
        ├── error-handler.js
        ├── cache-manager.js
        ├── plugin-system.js
        └── import-inliner.js
```

## 性能

基于示例文件测试:
- 原始大小: 866 bytes (SCSS)
- 压缩后大小: 345 bytes
- 压缩率: 60.21%
- 节省空间: 521 bytes

## 新增功能 (v3.0)

### 1. SCSS支持
- 自动检测.scss和.sass文件
- 变量替换功能 ($variable)
- 与CSS优化功能无缝集成

### 2. LESS支持
- 自动检测.less文件
- 变量替换功能 (@variable)
- 与CSS优化功能无缝集成

### 3. 自动文件类型检测
- 根据文件扩展名自动选择处理方式
- .css → 标准CSS处理
- .scss/.sass → SCSS处理
- .less → LESS处理

## API 参考

### CSOptimizer

#### 构造函数
```javascript
new CSOptimizer(options)
```

#### 方法

- `minify(css)` - 压缩CSS
- `beautify(css)` - 格式化CSS
- `optimize(css)` - 优化CSS
- `processSCSS(css)` - 处理SCSS
- `processLESS(css)` - 处理LESS
- `replaceSCSSVariables(css)` - 替换SCSS变量
- `replaceLESSVariables(css)` - 替换LESS变量
- `removeComments(css)` - 移除注释
- `removeWhitespace(css)` - 移除空白字符
- `removeEmptyRules(css)` - 移除空规则
- `mergeDuplicateRules(css)` - 合并重复规则
- `optimizeShorthand(css)` - 优化简写属性
- `optimizeColors(css)` - 优化颜色值
- `optimizeUnits(css)` - 优化单位值
- `optimizeQuotes(css)` - 优化引号
- `formatCSS(css)` - 格式化CSS
- `processFile(inputPath, outputPath, mode)` - 处理单个文件
- `processFiles(inputPaths, outputDir, mode)` - 批量处理文件
- `getStats(original, optimized)` - 获取统计信息
- `getBrowserSupportInfo(property)` - 获取属性的浏览器兼容性信息

## 限制说明

### 编译器支持
- ✅ 集成官方Dart Sass编译器（SCSS）
- ✅ 集成官方Less.js编译器（LESS）
- ✅ 完整支持SCSS/LESS语法（变量、嵌套、混入、函数、导入等）
- ✅ 编译失败时自动回退到简化实现
- ⚠️ 需要安装依赖：`npm install`

### 简化实现限制
当官方编译器不可用时，将使用简化实现，支持功能有限：
- ✅ 变量替换
- ✅ 基础嵌套规则展开
- ✅ 基础混入支持
- ❌ 不支持复杂的SCSS/LESS函数
- ❌ 不支持条件语句和循环
- ❌ 嵌套规则展开可能不如官方编译器完善

### 建议使用官方编译器
为了获得最佳的SCSS/LESS支持，建议：
1. 安装依赖：`npm install`
2. 使用异步API（`minifyAsync`、`processFileAsync`、`processFilesAsync`）
3. 官方编译器会自动处理所有SCSS/LESS语法

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request！

## 更新日志

### v2.0.0
- 🎉 新增Source Map支持
- 🎉 支持内联和外部Source Map文件
- 🚀 实现并行处理优化，提升批量处理速度
- 🎉 新增Watch模式，支持文件/目录监听
- 🎉 新增CSS变量优化（内联、移除未使用变量）
- 🛡️ 改进错误处理，提供详细的错误信息和日志
- 🎉 新增缓存机制，提升重复处理性能
- 🎉 新增插件系统，支持自定义扩展
- 🎉 新增@import内联功能
- 🎉 新增响应式优化（媒体查询合并、排序、优化）
- 🎉 新增TypeScript类型定义
- 📝 新增--no-parallel、--source-map、--source-map-inline、--debounce等CLI选项
- 📝 更新配置文件支持新选项
- 📝 更新文档说明所有新功能

### v1.0.0
- 🎉 初始版本发布
- ✅ 基础CSS压缩、格式化、优化功能
- ✅ 支持SCSS和LESS预处理器
- ✅ 支持浏览器前缀自动添加
- ✅ 支持批量处理文件
- ✅ 提供命令行工具和编程接口
- 添加SCSS/LESS示例文件
- 更新测试用例

### v2.0.0
- 新增颜色值优化功能
- 新增单位值优化功能
- 新增引号优化功能
- 新增批量文件处理功能
- 新增配置文件支持
- 增强错误处理和输入验证
- 改进简写属性匹配逻辑
- 优化正则表达式性能

### v1.0.0
- 初始版本
- 基本的CSS压缩、格式化功能
- 命令行接口