如何解析SCSS文件并动态提取指定类名对应的全部样式内容？

下面是3种可实现该需求的常用技术方案：

• postcss + postcss-scss 组合：是目前最通用的SCSS解析方案，postcss本身为专业的CSS解析处理工具，postcss-scss作为语法扩展可直接解析原生SCSS源码，无需提前编译为CSS，可完整保留媒体查询、嵌套等原生SCSS结构。
• scss-parser：专门针对SCSS语法的解析工具，可直接将SCSS源码转换为AST抽象语法树，遍历AST即可快速定位目标类名对应的样式节点，提取对应样式内容。
• sass + css-selector-parser 组合：适合SCSS中存在大量变量、混合宏、函数等复杂语法的场景，先通过sass将SCSS编译为标准CSS，再通过选择器解析工具匹配目标类名提取样式。

实现示例（基于postcss方案） #

const postcss = require('postcss');
const scssSyntax = require('postcss-scss');

/**
 * 从SCSS源码中提取指定类名对应的样式内容
 * @param {string} scssContent SCSS源码字符串
 * @param {string} targetClassName 目标类名（不带开头的点）
 * @returns {string} 匹配到的样式内容
 */
async function extractClassStyles(scssContent, targetClassName) {
  const styleItems = [];
  const ast = await postcss()
    .process(scssContent, { syntax: scssSyntax })
    .then(res => res.root);

  // 遍历所有样式规则
  ast.walkRules(rule => {
    // 匹配选择器中包含目标类名的规则
    if (rule.selectors.some(selector => selector.includes(`.${targetClassName}`))) {
      // 收集所有样式声明
      rule.walkDecls(decl => {
        styleItems.push(`  ${decl.prop}: ${decl.value}`);
      });
    }
  });

  return styleItems.join('\n');
}

// 测试调用
const demoScss = `
.styles-module--ctaArrow--JtKM2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 55px;
  width: 48px;
  height: 38px;
  transition: width .25s ease-in-out
}

@media (max-width: calc(992px - 1px)) {
  .styles-module--ctaArrow--JtKM2 {
    margin-top: 22px
  }
}

.styles-module--ctaArrowLine--2Lcej {
  display: inline-block;
  width: calc(100% - 4px);
  height: 4px;
  background: #0058ff
}

.styles-module--ctaArrowIcon--1AFVc {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: right .25s ease-in-out
}
`;

extractClassStyles(demoScss, 'styles-module--ctaArrowLine--2Lcej').then(console.log);

调用后输出结果和要求的目标输出完全一致，如需同时提取媒体查询等规则下的对应类名样式，只需扩展遍历AtRule节点的逻辑即可。

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