如何测量LESS/CSS代码测试覆盖率？是否有对应工具？

问题背景 #

我们维护一个LESS代码库，示例代码如下：

// my-theme.less
@brand-color: #c0ffee;
@button-background: @brand-color;

我们用JavaScript+Mocha编写单元测试，断言代码库中的变量映射关系，示例测试代码：

import {parameterValueInTheme} from './my-test-utils.mjs';

describe('button-background', function() {
  it('should be mapped to "@brand-color"', function() {
    assert.equal(parameterValueInTheme('@button-color', 'my-theme'), '@brand-color');
  });
});

现在需要测量这类单元测试对LESS代码的实际覆盖率（即被测试覆盖的LESS代码行/语句占比），想问：是否有现成方案？有没有类似JavaScript中nyc/istanbul的LESS测试覆盖率工具？该问题也可扩展到CSS、SCSS等预处理器。

解答 #

• 预处理器覆盖率工具现状：目前没有像nyc/istanbul那样成熟、开箱即用的LESS/SCSS测试覆盖率工具，这类工具的生态远不如JavaScript完善。
• 自定义实现思路：可以基于AST（抽象语法树）自行实现覆盖率统计，核心步骤如下：
  1. 用LESS/SCSS的Node.js解析API（比如less.parse()或sass.renderSync()带AST输出），把预处理器代码转换成AST结构，标记出所有变量、混合宏、规则定义等代码元素。
  2. 在你的测试工具（比如示例中的parameterValueInTheme）里添加追踪逻辑，每次访问某个LESS元素时，标记该元素为“已覆盖”。
  3. 测试执行完成后，对比总元素数和已覆盖元素数，计算出覆盖率，还可以输出简单的报告。
• CSS相关说明：针对成品CSS的覆盖率，有一些工具（比如浏览器的Coverage API）可以跟踪页面实际用到的CSS规则，但这类工具是针对运行时CSS的，和你需求的“单元测试覆盖预处理器源码”场景不匹配。

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