# @adobe/css-tools 中文文档

规范地址：https://npmcn.com/package/%40adobe/css-tools/

版本：4\.5\.0
npm 元数据更新时间：2026-10-01T01:33:07.969Z
中文译文更新时间：2026-11-05T15:59:59.882Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adobe/css-tools
原文对照：https://npmcn.com/package/%40adobe/css-tools/?lang=original
项目主页：https://github.com/adobe/css-tools#readme
源码仓库：https://github.com/adobe/css-tools

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：266 kB，25 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2022-06-10T00:36:56.548Z
- 最新版本发布：2026-05-21T22:37:48.114Z
- 近 30 天下载量：256475262（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 1 个）

## 中文简介

具有类型脚本支持的现代 CSS 解析器和字符串

## 安装

```sh
npm install @adobe/css-tools
```

也可以使用：`pnpm add @adobe/css-tools`、`yarn add @adobe/css-tools`、`bun add @adobe/css-tools`

## README

# @ adobe/cs-tools (英语)

> 具有类型脚本支持的现代 CSS 解析器和字符串

[![npm version](https://badge.fury.io/js/%40adobe%2Fcss-tools.svg)](https://badge.fury.io/js/%40adobe%2Fcss-tools) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

将 CSS 解析为抽象语法树(AST)并用可配置格式将其还原为 CSS. 由TypeScript所建,用于类型安全和现代JavaScript特性.

## 安装

```bash
npm install @adobe/css-tools
```

## 使用量

```js
import { parse, stringify } from '@adobe/css-tools'

// Parse CSS to AST
const ast = parse('body { font-size: 12px; }')

// Stringify AST back to CSS
const css = stringify(ast)
// => "body { font-size: 12px; }"

// Pretty print with custom indentation
const formatted = stringify(ast, { indent: '  ' })
// => "body {\n  font-size: 12px;\n}"

// Minify output
const minified = stringify(ast, { compress: true })
// => "body{font-size:12px}"
```

## API 密码

### `parse(code, options?)`

解析 CSS 代码并返回一个抽象语法树( AST) .

**参数:**

-   `code` (字符串) - CSS 代码来解析
-   `options` (对象,可选) - 解析选项
    -   `silent` (boolean) - 静静地失败于解析错误而不是抛出
    -   `source` (字符串) - 更好的错误报告文件路径

**回返情况:** `CssStylesheetAST` - 解析为AST的CSS

### `stringify(ast, options?)`

将 CSS AST 转换回可配置格式的 CSS 字符串.

**参数:**

-   `ast` (CsstylesheetAST) - CSS AST 用于字符串
-   `options` (对象,可选) - 字符串选项
    -   `indent` (字符串) - 缩进字符串( 默认 : `' '`(中文(简体) )
    -   `compress` (boolean) - 是否压缩/缩小输出(默认 ): `false`(中文(简体) )

**回返情况:** `string` - 格式化的 CSS 字符串

## 特征

-   **CSS支助**: 所有标准 CSS 特性,包括选择器、属性、值、规则和注释
-   **类型脚本支持**: 所有 AST 节点和函数的完整类型定义
-   **处理错误**: 可配置错误处理和详细位置信息
-   **格式化选项**: 漂亮的打印、 微缩或自定义格式
-   **业绩优化**: 大 CSS 文件的有效解析和字符串化
-   **来源地图**: 跟踪用于调试和工具的原始源位置

### 支持的 CSS 特性

-   **选择器**: 元素,类, ID, 属性, 伪类, 伪元素选择器
-   **属性**: 所有标准的 CSS 属性和自定义属性
-   **数值**: 颜色,长度,百分比,函数, calc ()等.
-   **规则**: @media,@keyframes,@import,@charset,@namespace,@font-face,@page,@document,@supports,@container,@layer,@starting-tyle,@host,@cust-media
-   **评论**: 既/\* \*/又/评论
-   **空白空间**: 保存格式化信息
-   **供应商前缀**: 支持供应商预先设定的规则和财产
-   **嵌入规则**:媒体查询,支持,容器等.
-   **复杂选择器**: 组合器、伪选取器、属性选择器

## 实例

### 处理错误

```js
import { parse } from '@adobe/css-tools'

const malformedCss = `
  body { color: red; }
  { color: blue; } /* Missing selector */
  .valid { background: green; }
`

// Parse with silent error handling
const result = parse(malformedCss, { silent: true })

// Check for parsing errors
if (result.stylesheet.parsingErrors) {
  console.log('Parsing errors:', result.stylesheet.parsingErrors.length)
  result.stylesheet.parsingErrors.forEach(error => {
    console.log(`Error at line ${error.line}: ${error.message}`)
  })
}

// Valid rules are still parsed
console.log('Valid rules:', result.stylesheet.rules.length)
```

### 来源跟踪

```js
import { parse } from '@adobe/css-tools'

const css = 'body { color: red; }'
const ast = parse(css, { source: 'styles.css' })

// Position information is available
const rule = ast.stylesheet.rules[0]
console.log(rule.position?.source) // "styles.css"
console.log(rule.position?.start) // { line: 1, column: 1 }
console.log(rule.position?.end) // { line: 1, column: 20 }
```

更多例子,见 [实例文件](https://npmcn.com/package/%40adobe/css-tools/docs/EXAMPLES.md)。 。 。 .

## 业绩

库为性能优化,能高效地处理大型CSS文件. 关于基准信息,见 `benchmark/` 源代码中的目录.

## 文档

-   [API 参考](https://npmcn.com/package/%40adobe/css-tools/docs/API.md) - 完成API文档
-   [AST 结构](https://npmcn.com/package/%40adobe/css-tools/docs/AST.md) - 详细的AST节点类型和结构
-   [实例](https://npmcn.com/package/%40adobe/css-tools/docs/EXAMPLES.md) - 综合使用实例
-   [更改日志](https://npmcn.com/package/%40adobe/css-tools/docs/CHANGELOG.md) - 版本历史和变化

## 背景情况

这是npm的叉子 `css` 软件包,由Adobe维护,具有现代改进,包括TypeScript支持,增强性能,以及安全更新等. 它为CSS工具化,预处理和分析提供了坚实的基础.

## 许可证

[麻省理工学院](https://npmcn.com/package/%40adobe/css-tools/LICENSE)

## 常见问题

### @adobe/css-tools 是什么？

具有类型脚本支持的现代 CSS 解析器和字符串

### 如何安装 @adobe/css-tools？

在项目目录运行 npm install @adobe/css-tools，或使用 pnpm add / yarn add / bun add。

### @adobe/css-tools 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adobe/css-tools 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @adobe/css-tools 可以商用吗？

@adobe/css-tools 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @adobe/css-tools 的下载量有多少？

根据 npm 官方下载统计，@adobe/css-tools 在 2026/10/05 – 2026/11/03 这 30 天内被下载 256,475,262 次，日均约 8,549,175 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adobe/css-tools 还在维护吗？

最新版本 4\.5\.0 发布于 2026/05/22（5 个月前）；至今共发布 22 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/06/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。