Удалить свойства из рендеринга Less CSS

Question

Кажется, в LessCSS (1.7.x) есть некоторые шаблоны, которые позволяют (до / после)-обработки дерева рендеринга CSS. Мне было интересно, можно ли использовать Visitor (я пробовал это, но не мог заставить его работать - или что-то еще), чтобы удалить свойства из вывода CSS при рендеринге. Например, если результат был

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

Я хотел бы удалить -some-arbitrary-property из вывода CSS при вызове .toCSS, Кажется, я не могу найти какую-либо документацию по этому поводу, только ссылки на предстоящую версию 2.0 - кто-нибудь знает, возможно ли это, и если да, то как это сделать, или укажите мне на какой-нибудь пример?

Answer 1

Я пытался сделать это редактированием поста @bass-jobsen, но он был отклонен по той причине, что это должен быть ответ. Итак, для Less 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 [];
        }
    }
};

затем в вашем коде синтаксического анализа используйте его так:

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

исправление самого себя (как в ответе @bass-jobsen) не требуется.

Answer 2

Начиная с Less v2, вы можете использовать плагины. Вы также можете использовать посетителя в своем плагине. Пример использования посетителя можно найти по адресу: https://github.com/less/less-plugin-inline-urls.

Внутри вашего плагина для посетителей вы можете использовать что-то похожее на показанное ниже:

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

Обратите внимание, что вышесказанное в настоящее время не удаляет, но производит : ; , Я обновлю свой ответ позже, см. Также: Как удалить запись из дерева в плагине Less посетитель.

Похоже, что это не работает для посетителей в v1.7 - у вас есть пример для этого?

для менее

Обновить

как подсказывает сам @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)(), в less/lib/parser.js, около строки 554, так что код выглядит так, как показано ниже:

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