PostCSS,在生成新规则后丢失分号

时间:2017-04-30 15:13:15

标签: css postcss

我两次遇到这个问题。

首先,当我删除规则的最后一项时,以及当我创建一个新规则时。 如您所见,最后一个括号不合适,最终的分号无处可寻。

请指出我错过的内容,或者告诉我在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}

0 个答案:

没有答案