CSSO (CSS Optimizer) 技术文档

1. 安装指南

要安装 CSSO，可以使用 npm 包管理器。在命令行中运行以下命令：

npm install csso

2. 项目使用说明

CSSO 是一个 CSS 压缩工具，它可以执行三种类型的转换：清理（移除冗余）、压缩（使用更短的形式替代）、重构（合并声明、规则等）。压缩后的 CSS 文件大小会显著减小。

以下是一个基本的使用示例：

import { minify } from 'csso';

const minifiedCss = minify('.test { color: #ff0000; }').css;

console.log(minifiedCss);
// 输出: .test{color:red}

此外，CSSO 还提供了浏览器版本：

• dist/csso.js – 包含 csso 的全局 IIFE 压缩版本。
• dist/csso.esm.js – 压缩后的 ES 模块版本。

可以通过 CDN 服务如 unpkg 或 jsDelivr 来使用这些版本。

<!-- 使用 ESM 版本 -->
<script type="module">
  import { minify } from 'https://cdn.jsdelivr.net/npm/csso/dist/csso.esm.js';
  minify('.example { color: green }');
</script>

<!-- 使用 IIFE 版本 -->
<script src="https://cdn.jsdelivr.net/npm/csso/dist/csso.js"></script>
<script>
  csso.minify('.example { color: green }');
</script>

3. 项目 API 使用文档

以下是 CSSO 提供的主要 API：

minify(source[, options])

压缩传入的 CSS 字符串。

const result = csso.minify('.test { color: #ff0000; }', {
    restructure: false,   // 不改变 CSS 结构
    debug: true           // 显示额外的调试信息
});

console.log(result.css);
// 输出: .test{color:red}

返回的对象包含以下属性：

• css：压缩后的 CSS 字符串。
• map：SourceMapGenerator 实例或 null。

minifyBlock(source[, options])

与 minify() 相同，但用于声明的列表。通常用于 style 属性的值。

const result = csso.minifyBlock('color: rgba(255, 0, 0, 1); color: #ff0000');

console.log(result.css);
// 输出: color:red

syntax.compress(ast[, options])

在 CSSTree 语法 API 中压缩 AST。

import { syntax } from 'csso';

const ast = syntax.parse('.test { color: #ff0000; }');
const compressedAst = syntax.compress(ast).ast;
const minifiedCss = syntax.generate(compressedAst);

console.log(minifiedCss);
// 输出: .test{color:red}

4. 项目安装方式

CSSO 可以通过 npm 安装，使用以下命令：

npm install csso

以上是 CSSO 的基本安装和使用指南，希望对您有所帮助。