我两次遇到这个问题。
首先,当我删除规则的最后一项时,以及当我创建一个新规则时。 如您所见,最后一个括号不合适,最终的分号无处可寻。
请指出我错过的内容,或者告诉我在API文档中我可以找到有关此行为的更多信息。
import * as postcss from 'postcss';
export default postcss.plugin('...', (options = {}) => {
return root => {
root.walkRules(rules => {
const atrule = rules.nodes.filter(node => {
return (node.type === 'atrule' && node.name === 'add');
});
if (atrule.length === 1){
const params = atrule[0].params.split(' ');
const position = params[0];
const radius = (params[1] === 'circle' ? '100%' : '0');
const color = params[2];
const side = params[3];
const dimensions = params[4];
rules.removeChild(atrule[0]);
const decl1 = postcss.decl({ prop: 'content', value: '" "' });
const decl2 = postcss.decl({ prop: 'border-radius', value: radius });
const decl3 = postcss.decl({ prop: 'width', value: dimensions +'px' });
const decl4 = postcss.decl({ prop: 'height', value: dimensions +'px'});
const decl5 = postcss.decl({ prop: 'border', value: side + 'px solid ' + color });
const new_rule = postcss.rule({ selector: rules.selector + ':' + position });
new_rule.append(decl1, decl2, decl3,decl4,decl5);
root.append(new_rule);
}
});
};
});
我的输出如下
#test{
background-color : red}
#test:before{
content : " ";
border-radius : 100%;
width : 15px;
height : 15px;
border : 1px solid blue}