解析和字符串化 CSS

如果你想将 CSS 解析为抽象语法树 (AST)，那么你可以考虑以下两种解决方案

• reworkcss/css
• deno_css

reworkcss/css 最初是为 Node.js 编写的，但在从 CDN 使用时也能很好地工作。从 esm.sh 导入也会自动合并来自 DefinitelyTyped 的类型定义。不过需要注意的是，DefinitelyTyped 上的类型并不很好，因为许多应该被标记为联合类型的联合类型只是联合类型，这使得类型非常模糊，需要大量类型转换。

此外，如果您想获取 AST 并生成 CSS，reworkcss/css 也提供了将它生成的 AST 字符串化的功能。

deno_css 是用 TypeScript 编写的，专门用于 Deno，可在 deno.land/x 上获得。

使用 reworkcss/css 的基本示例

在本示例中，我们将解析一些 CSS 到 AST，并对 body 规则的 background 声明进行修改，将颜色更改为 white。然后，我们将对修改后的 CSS AST 进行字符串化，并将其输出到控制台。

import * as css from "https://esm.sh/[email protected]";
import { assert } from "https://deno.land/[email protected]/assert/mod.ts";

declare global {
  interface AbortSignal {
    reason: unknown;
  }
}

const ast = css.parse(`
body {
  background: #eee;
  color: #888;
}
`);

assert(ast.stylesheet);
const body = ast.stylesheet.rules[0] as css.Rule;
assert(body.declarations);
const background = body.declarations[0] as css.Declaration;
background.value = "white";

console.log(css.stringify(ast));

使用 deno_css 的基本示例

在本示例中，我们将解析一些 CSS 到 AST，并将 body 规则的 background 声明输出到控制台。

import * as css from "https://deno.land/x/[email protected]/mod.ts";

const ast = css.parse(`
body {
  background: #eee;
  color: #888;
}
`);

const [body] = ast.stylesheet.rules;
const [background] = body.declarations;

console.log(JSON.stringify(background, undefined, "  "));