postcss+postcss-scss处理SCSS时如何保留行内注释不转为块注释

PostCSS 核心AST原生只支持标准CSS的/* */块注释格式，postcss-scss虽然可以正确解析SCSS专属的//行内注释，但调用声明节点的assign()方法批量覆写属性时，会触发核心库默认的节点重序列化逻辑，该逻辑不会保留postcss-scss额外解析到的行内注释格式标记，直接把尾部注释按标准CSS规则转成块注释输出。

不要用assign()方法批量覆写整个声明节点，直接修改节点上的对应属性即可，这种操作不会重置节点存储原始格式信息的raws字段，行内注释的格式会被完整保留：

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

const scss = `div {
  padding: 0; // comment
}`;

postcss().process(scss, {syntax: postcssScss}).then(result => {
  const node = result.root.nodes[0].nodes[0];
  // 直接修改属性，不触发节点整体重构
  node.prop = 'spacing'
  console.log(result.root.toString())
})

执行后输出完全符合预期：

div {
  spacing: 0; // comment
}

如果需要同时修改属性名、属性值等多个字段，修改完成后手动还原节点raws字段下的between、left、right等原始格式配置即可，核心是避免PostCSS核心逻辑覆写行内注释的格式标记。

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