PostCSS v8 API：如何用Declaration替代带正则的walkDecls方法？

嘿，很高兴能帮你搞定PostCSS v8的升级问题！其实PostCSS v8里walkDecls方法本身还是支持正则表达式参数的，和你原来的写法兼容度很高，但如果你的需求是更直接地使用Declaration接口来筛选节点，这里有两种可行的方式：

方式1：继续使用walkDecls（兼容且简洁） #

PostCSS v8并没有移除walkDecls的正则匹配功能，你原来的代码其实可以直接继续使用：

root.walkDecls(/^--/, (decl) => {
  // 你的处理逻辑，decl就是PostCSS 8的Declaration接口实例
});

这里的decl参数本身就是PostCSS 8的Declaration类型节点，所以其实你已经在使用新的Declaration接口了，完全不需要改动正则的位置。

方式2：手动遍历节点并筛选（直接操作Declaration接口） #

如果你想手动遍历所有节点，通过正则判断筛选出符合条件的Declaration节点，可以这样写：

root.walk((node) => {
  // 判断节点是否是Declaration类型，且属性名匹配正则
  if (node.type === 'decl' && /^--/.test(node.prop)) {
    // node就是你要的Declaration实例，在这里处理逻辑
  }
});

要是想用更现代的迭代器方式，也可以这么写：

// 遍历根节点下的所有节点
for (const node of root.nodes) {
  if (node.type === 'decl' && /^--/.test(node.prop)) {
    // 处理这个Declaration节点
  }
  // 递归处理嵌套节点（比如@media这类规则内部的节点）
  if (node.nodes) {
    for (const child of node.nodes) {
      if (child.type === 'decl' && /^--/.test(child.prop)) {
        // 处理子节点中的Declaration
      }
    }
  }
}

不过这种方式需要自己处理递归嵌套，不如walkDecls省心，所以更推荐第一种写法。

总结一下：如果你只是想使用PostCSS 8的Declaration接口，原来的walkDecls写法完全没问题，正则还是放在第一个参数的位置，回调里的decl就是新的Declaration实例。如果非要手动遍历，就把正则用在判断node.prop的环节。

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