ネストされたpostcssはここ

Question

Interactive Fiddle

を削除していない私が達成したい行動のための短い再現可能な例である：

私は希望の入力

@keepme { 
    @removeme { 
     .selector { color: red; } 
    } 
    } 

を考えると

var postcss = require('postcss'); 
var plugin = postcss.plugin('keepme',() => (root) => { 
    root.walkAtRules(/keepme|removeme/, (atRule) => { 
    if (atRule.name === 'keepme') { 
     atRule.replaceWith(atRule.nodes); 
    } else { 
     atRule.remove(); 
    } 
    }); 
}); 
postcss([plugin]).process(` 
    @keepme { 
    @removeme { 
     .selector { color: red; } 
    } 
    } 
`).then(result => console.log(result.css)); 

これは空の文字列を返す。

代わりに、私は出力

@removeme { 
    .selector { color: red; } 
} 

を受ける@keepmeルールが（その後、実行されない？）が正しくそのノードで自身を置き換えるようです。

私はこれについてどうなるかわかりません。助言がありますか？トラバースすることで、ルールのリストが与えられる

/** 
* Inserts node(s) before the current node and removes the current node. 
* 
* @param {...Node} nodes - node(s) to replace current one 
* 
* @example 
* if (atrule.name == 'mixin') { 
* atrule.replaceWith(mixinRules[atrule.params]); 
* } 
* 
* @return {Node} current node to methods chain 
*/ 
replaceWith(...nodes) { 
    if (this.parent) { 
     for (let node of nodes) { 
      this.parent.insertBefore(this, node); 
     } 
     this.remove(); 
    } 
    return this; 
} 

：

1. @keepme
2. @removeme

ルール・ウォーカー

Answer 1

replaceWithは、このように実装されています現在検査されているルールのインデックスを保持します。インデックス1では、keepmeが見つかりました。 keepme.replaceWith(removeme)がremovemeを進めましたので... ASTを歩く

を続行し、keepme前removemeを挿入します、歩行器は、それを通過して移動していると、そのルールを実行しません。

修正がそう、それは子供が検査ルールの後ノードに移動しますreplaceWithを変更することです。

root.walkAtRules(/keepme|removeme/, (atRule) => { 
    if (atRule.name === 'keepme') { 
     if (atRule.parent) { 
     for (let node of atRule.nodes.reverse()) { 
      atRule.parent.insertAfter(atRule, node); 
     } 
     } 
    } 
    atRule.remove(); 
    }); 

意図したとおり、この作品：Interactive fiddle