Handling mixin calls from a plugin

[SergeVDev]

Hi guys,

Is there a way to handle every call of every mixin from a plugin? I want to add some additional checks of arguments. In the handler I need a list of all params (names and values).

Regards,

[matthew-dean]

Hmm, you should be able to implement a "pre-evaluation" visitor that essentially wraps the mixin? The tricky bit might be that mixins can be overloaded, so you'd have to do that with each mixin if you are calling an overloaded one.

[puckowski]

Maybe this can get you started:

function CountMixinsPlugin() {
  this.mixinCalls = [];
}

CountMixinsPlugin.prototype.install = function (less, pluginManager) {
  const pluginSelf = this;

  function MixinCallCollector() {
    this.isPreEvalVisitor = true;
    this._v = new less.visitors.Visitor(this);
  }

  MixinCallCollector.prototype.run = function (root) {
    return this._v.visit(root);
  };

  MixinCallCollector.prototype.visitMixinCall = function (node) {
    const argStrings = node.arguments.map(argObj => {
      const cssNode = argObj.value || argObj;
      const css = (cssNode && cssNode.toCSS) ? cssNode.toCSS({}) : '';
      return argObj.name ? `${argObj.name}: ${css}` : css;
    });

    pluginSelf.mixinCalls.push({
      selector: node.selector.toCSS({}),
      args: argStrings,
      file: node.currentFileInfo && node.currentFileInfo.filename,
      index: node.index
    });

    return node;
  };

  pluginManager.addVisitor(new MixinCallCollector());
};

module.exports = CountMixinsPlugin;

const less = require('less');
const CountMixinsPlugin = require('./count-mixins-plugin');

const plugin = new CountMixinsPlugin();

let yourLessCode = `
.rounded(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
}

.box-shadow(@x, @y, @blur, @color) {
  box-shadow: @x @y @blur @color;
}

.important {
  font-weight: bold;
  color: red;
}

.button {
  .rounded(10px);   
  .box-shadow(2px, 4px, 6px, #333);  
  .important;          
}

.alert {
  .rounded;      
}
`;

less.render(yourLessCode, { plugins: [plugin] }).then(() => {
  console.log('All mixin calls:', plugin.mixinCalls);
});

Output:

All mixin calls: [
  {
    selector: ' .rounded',
    args: [ '10px' ],
    file: 'input',
    index: 341
  },
  {
    selector: ' .box-shadow',
    args: [ '2px', '4px', '6px', '#333' ],
    file: 'input',
    index: 399
  },
  { selector: ' .important', args: [], file: 'input', index: 474 },
  { selector: ' .rounded', args: [], file: 'input', index: 580 }
]

[SergeVDev]

Hello guys! Thank you for the response.

Hello @puckowski! Thank you for the code example! I've tried it and got basically the same results. (Of course, the values in a real project were different).

It seems, the following line doesn't work as expected:

`argObj.name ? `${argObj.name}: ${css}` : css`

I tried just return argObj.name; instead and it's always empty.

In your output the args after the '.box-shadow call are:

`args: [ '2px', '4px', '6px', '#333' ]`

and not:

`args: [ '@x:2px', '@y:4px', '@blur:6px', '@color:#333' ]`

as I hoped. So got I.

What I want to achieve is sort of strong static type checking. First, you “declare” a “type”:

declareEnum('E-SAFE-COLOR_`, 'red', 'blue');

Then any argument with a name, started with E-SAFE-COLOR_, is checked for the type requirements (to be 'red' or 'blue' only).

But I can't do that until I have defined argObj.name's.

[puckowski]

This should grab the name for the argument value. Hopefully you can adapt for your needs.

function CountMixinsPlugin() {
    this.mixinCalls = [];
}

CountMixinsPlugin.prototype.install = function (less, pluginManager) {
    const pluginSelf = this;

    function MixinCallCollector() {
        this.isPreEvalVisitor = true;
        this._visitor = new less.visitors.Visitor(this);
        this.definitions = {};
    }

    MixinCallCollector.prototype.run = function (root) {
        return this._visitor.visit(root);
    };

    MixinCallCollector.prototype.visitMixinDefinition = function (node) {
        try {
            let selector = node.selectorl
            if (!selector && node.selectors) {
                selector = node.selectors[0];
            }
            const selectorCss = selector.toCSS({});
            this.definitions[selectorCss] = node.params.map(p => p.name);
        } catch (e) {
        }
        return node;
    };

    MixinCallCollector.prototype.visitMixinCall = function (node) {
        const selectorCss = node.selector.toCSS({});
        const paramNames = this.definitions[selectorCss] || [];

        const argStrings = (node.arguments || []).map((argObj, i) => {
            const cssNode = argObj.value || argObj;
            const css = (cssNode && cssNode.toCSS) ? cssNode.toCSS({}) : '';
            const name = argObj.name || paramNames[i] || null;
            return name ? `${name}: ${css}` : css;
        });

        pluginSelf.mixinCalls.push({
            selector: node.selector.toCSS({}),
            args: argStrings,
            file: node.currentFileInfo && node.currentFileInfo.filename,
            index: node.index
        });

        return node;
    };

    pluginManager.addVisitor(new MixinCallCollector());
};

const plugin = new CountMixinsPlugin();

const yourLessCode = `
// Define a mixin
.rounded(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
}

// Another mixin with multiple arguments
.box-shadow(@x, @y, @blur, @color) {
  box-shadow: @x @y @blur @color;
}

// Mixin with no parameters
.important {
  font-weight: bold;
  color: red;
}

// Use mixins in a selector
.button {
  .rounded(10px);      // Mixin call with custom argument
  .box-shadow(2px, 4px, 6px, #333);  // Mixin call with multiple arguments
  .important;          // Mixin call with no arguments
}

// Call a mixin with default parameter
.alert {
  .rounded;            // Uses default 5px
}
`;

async function runLessWithPlugin() {
    if (!window.less) {
        throw new Error('LESS.js is not loaded. Make sure you include less.js in your HTML.');
    }
    await window.less.render(yourLessCode, {
        plugins: [plugin]
    });
    console.log('All mixin calls:', plugin.mixinCalls);
}

runLessWithPlugin();

[puckowski]

@SergeVDev

[SergeVDev]

@puckowski , thank you a lot! It has helped!

P.S. There is a typo here: node.selectorl.