@ adobe/cs-tools (英语)
具有类型脚本支持的现代 CSS 解析器和字符串
将 CSS 解析为抽象语法树(AST)并用可配置格式将其还原为 CSS. 由TypeScript所建,用于类型安全和现代JavaScript特性.
安装
npm install @adobe/css-tools
使用量
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
- 评论: 既/* */又/评论
- 空白空间: 保存格式化信息
- 供应商前缀: 支持供应商预先设定的规则和财产
- 嵌入规则:媒体查询,支持,容器等.
- 复杂选择器: 组合器、伪选取器、属性选择器
实例
处理错误
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)
来源跟踪
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 }
更多例子,见 实例文件。 。 。 .
业绩
库为性能优化,能高效地处理大型CSS文件. 关于基准信息,见 benchmark/ 源代码中的目录.
文档
背景情况
这是npm的叉子 css 软件包,由Adobe维护,具有现代改进,包括TypeScript支持,增强性能,以及安全更新等. 它为CSS工具化,预处理和分析提供了坚实的基础.