從已渲染的CSS中刪除屬性

Question

LessCSS（1.7.x）中似乎有一些允許（預處理/後處理）CSS渲染樹處理的模式。我想知道是否可以使用Visitor（我嘗試過，但無法使其工作 - 或其他任何東西）在渲染時從CSS輸出中移除屬性。 例如如果輸出是

a { 
font-size: 12px; 
-some-aribitrary-property: value; 
} 

我想打電話​​何時從CSS輸出中刪除-some-arbitrary-property。 我似乎無法找到關於此的任何文檔，只有對即將到來的2.0版的引用 - 有誰知道這是甚至可能的，如果是的話該怎麼做，或者指點我一些例子？

Answer 1

我試圖讓這個編輯到@低音jobsen的帖子，但它得到了與它應該是一個回答的理由拒絕。 所以對於1.7。X，你創建一個訪問者類：

RemoveProperty = function() { 
    this._visitor = new less.tree.visitor(this); 
}; 
RemoveProperty.prototype = { 
    isReplacing: true, 
    run: function (root) { 
     return this._visitor.visit(root); 
    }, 
    visitRule: function (ruleNode, visitArgs) { 
     if(ruleNode.name != '-some-aribitrary-property') {   
      return ruleNode; 
     } else { 
      return []; 
     } 
    } 
}; 

然後在解析代碼，這樣使用它：少本身（如在@低音jobsen的回答）不需要

var parser = new(less.Parser)(); 
parser.parse(yourLessData, function(err, tree) { 
    var css = tree.toCSS({ 
     plugins: [new RemoveProperty()] 
    }); 
}); 

修補。

Answer 2

由於減少v2，您可以使用plugins。你也可以在你的插件中使用訪問者。使用訪問者的示例可以在以下網址找到：https://github.com/less/less-plugin-inline-urls。

裏面訪問者插件，您可以使用一些象下面這樣顯示：

visitRule: function (ruleNode, visitArgs) { 
     if(ruleNode.name[0].value != '-some-aribitrary-property') 
     {   
      return ruleNode; 
     } 
     else 
     { 
      return []; 
     } 
    } 

注意的是，上述目前不會刪除，但產生 : ;。稍後我會更新我的答案，另請參閱： Howto remove a entry from the tree in a Less visitor plugin。

它似乎不適用於v1.7訪問者 - 你有一個例子嗎？

少< V2

更新

通過@Joscha的建議自己使用：

var parser = new(less.Parser)(); 
parser.parse(yourLessData, function(err, tree) { 
    var css = tree.toCSS({ 
     plugins: [new RemoveProperty()] 
    }); 
}); 

有：

RemoveProperty = function() { 
    this._visitor = new tree.visitor(this); 
}; 
RemoveProperty.prototype = { 
    isReplacing: true, 
    run: function (root) { 
    return this._visitor.visit(root); 
    }, 
    visitRule: function (ruleNode, visitArgs) { 
     if(ruleNode.name != '-some-aribitrary-property') 
     {   
      return ruleNode; 
     } 
     else { 
      return []; 
     } 
    } 
}; 

末更新

創建lib/less一個名爲custom-visitor.js其中包含以下內容：

(function (tree) { 

    tree.RemoveProperty = function() { 
     this._visitor = new tree.visitor(this); 
    }; 
    tree.RemoveProperty.prototype = { 
     isReplacing: true, 
     run: function (root) { 
     return this._visitor.visit(root); 
     }, 
     visitRule: function (ruleNode, visitArgs) { 
      if(ruleNode.name != '-some-aribitrary-property') 
      {   
       return ruleNode; 
      } 
      else { 
       return []; 
      } 
     } 
    }; 
})(require('./tree')); 

較在/ lib中/ index.js添加require('./custom-visitor.js');，這個文件的末尾將現看起來像如下所示：

require('./env'); 
require('./functions'); 
require('./colors'); 
require('./visitor.js'); 
require('./import-visitor.js'); 
require('./extend-visitor.js'); 
require('./join-selector-visitor.js'); 
require('./custom-visitor.js'); 
require('./to-css-visitor.js'); 
require('./source-map-output.js'); 

for (var k in less) { if (less.hasOwnProperty(k)) { exports[k] = less[k]; }} 

最後new(tree.RemoveProperty)(),成更少/ LIB/parser.js，圍繞升INE 554，使代碼看起來像下圖所示：

visitors = [ 
    new(tree.joinSelectorVisitor)(), 
    new(tree.processExtendsVisitor)(), 
    new(tree.RemoveProperty)(), 
    new(tree.toCSSVisitor)({compress: Boolean(options.compress)}) 
    ],