A plugin for concatenating lists

[SergeVDev]

I want to add a function for concatenating lists:

@list1:
	'../images/layer1.png',
	'../images/layer2.png',
	'../images/layer3.png';

@list2:
	'../images/layer4.png',
	'../images/layer5.png',
	'../images/layer6.png';

@list: concat(@list1, @list2);

// The same as:
@list:
	'../images/layer1.png',
	'../images/layer2.png',
	'../images/layer3.png',
	'../images/layer4.png',
	'../images/layer5.png',
	'../images/layer6.png';

What do I write in here?

functions.add('concat', function (list1, list2)
{
	return list1.value.concat(list2.value); // Not working: length(@list) returns 1.
});

Something with return new tree.List()? I cannot find a documentation for writing plugins.

[matthew-dean]

Why not just do this?

@list1:
	'../images/layer1.png',
	'../images/layer2.png',
	'../images/layer3.png';

@list2:
	'../images/layer4.png',
	'../images/layer5.png',
	'../images/layer6.png';

.test {
  list: @list1, @list2;
}

[SergeVDev]

Thank you for the response!

I have mixins, based on each. For instance:

.assert-images-are-square(@images)
{
	each(@images,
	{
		.assert-image-is-square(@value);
	});
}

.assert-images-are-the-same-size(@images)
{
	@first-image: extract(@images, 1);
	@width: image-width(@first-image);
	@height: image-height(@first-image);

	each(@images,
	{
		assertEq(image-width(@value), @width);
		assertEq(image-height(@value), @height);
	});
}

I want to check the combined list for squareness / equality, but use the source lists separately for defining background-image of two different (but linked) elements (I have a plugin for wrapping list items in url()).

[puckowski]

Hopefully you can adapt this code to suit your needs.

function ConcatPlugin() {
    this.install = function (less, pluginManager) {
        less.functions.functionRegistry.add('concat', function (...args) {
            const context = this.context;
            const values = [];

            for (const arg of args) {
                if (arg.value instanceof Array) {
                    values.push(...arg.value);
                } else {
                    values.push(arg);
                }
            }

            return new less.tree.Value(values);
        });
    };
}

module.exports = ConcatPlugin;

less.render(input, {
  plugins: [new ConcatPlugin()]
}).then(output => {
  console.log(output.css);
});

length(@list) returns 6 for two lists of size 3.

[SergeVDev]

Thank you kindly!

[SergeVDev]

The cool things are:

1. It's based on the rest parameters paradigm, so any number of lists can be passed. Frankly, I didn't think LESS/JS interface supported that.
2. It can combine lists with a single item, which is what I needed in my case.

Thank you again!