postcss - 如何将选择器添加到现有规则？

Question

有没有办法使用 Postcss API 将选择器添加到现有规则？像myRule.addSelector(".newSelector")什么？

目前我必须这样做：

myRule.selector = myRule.selector ? myRule.selector + ", .newSelector" : ".newSelector";

Answer 1

您可以使用rule.selectors，它是一个属性，它带有一个getter返回选择器数组（从rule.selector字符串生成）的属性，以及一个setter接受选择器数组（并覆盖rule.selector字符串）的属性。

var sels = myRule.selectors; //save the getter returned array so we can modify it with push.
sels.push('.newSelector'); //push returns the new length not the array, that's why we had to save the array in sels.
myRule.selectors = sels; //the setter will join the array elements and overwrite myRule.selector

使用更短的版本concat（因为concat返回一个新数组）。

myRule.selectors = myRule.selectors.concat('.newSelector');

请参阅此处的 PostCSS 源代码。