如何用ReworkCSS解析器为CSS声明添加或注释内容？

ReworkCSS的核心是操作CSS抽象语法树（AST），既然你已经能定位到需要处理的声明，下面直接说两种需求的具体修改方式：

1. 在指定声明上方添加注释 #

Rework的AST里，注释属于comment类型节点。要给目标声明加前置注释，只需要在目标声明所在规则（rule）的declarations数组中，找到目标声明的索引，在其前一位插入一个新的comment节点即可。

2. 将指定声明转为注释 #

把目标声明替换成comment节点，comment的text字段填入原声明的完整文本（属性名+属性值）即可。

完整代码示例 #

假设你已经能通过选择器、属性名定位到目标声明，以下是完整的处理代码：

const rework = require('rework');
const fs = require('fs');

// 读取原始CSS文件
const originalCSS = fs.readFileSync('input.css', 'utf8');
// 解析生成AST
const ast = rework.parse(originalCSS);

// 遍历AST节点，处理两种情况
ast.nodes.forEach(node => {
  // 处理媒体查询内的规则
  if (node.type === 'media') {
    node.rules.forEach(rule => {
      if (rule.selector === 'body') {
        // 找到background-color声明，插入前置注释（Case 1）
        const bgDeclIndex = rule.declarations.findIndex(decl => decl.property === 'background-color');
        if (bgDeclIndex !== -1) {
          rule.declarations.splice(bgDeclIndex, 0, {
            type: 'comment',
            text: 'Case 1: add my comment here'
          });
        }
      }
    });
  }
  // 处理#main规则
  else if (node.type === 'rule' && node.selector === '#main') {
    // 找到border声明，替换为注释（Case 2）
    const borderDeclIndex = node.declarations.findIndex(decl => decl.property === 'border');
    if (borderDeclIndex !== -1) {
      const originalDecl = node.declarations[borderDeclIndex];
      // 构造原声明的完整文本
      const declText = `${originalDecl.property}: ${originalDecl.value};`;
      // 替换为comment节点
      node.declarations[borderDeclIndex] = {
        type: 'comment',
        text: `Case 2: ${declText}`
      };
    }
  }
});

// 将修改后的AST渲染回CSS
const processedCSS = rework(ast).toString();
// 写入输出文件
fs.writeFileSync('output.css', processedCSS);

关键说明 #

• Rework的AST节点类型：媒体查询是media，普通选择器规则是rule，声明是declaration，注释是comment
• 插入注释时用splice方法在目标位置前插入comment节点
• 转换声明为注释时，需要手动拼接原声明的属性和值，因为AST里的declaration是拆分为property和value两个字段的

内容的提问来源于stack exchange，提问作者Jeremie