Mangling names of @keframes

[SergeVDev]

I want to generate unique names for @keyframes, because even nested ones just come global after compilation and this could cause conflicts.

Since, AFAIK, there is no way to get a current scope as a string (?), I decided to write a plugin for mangling names. It provides the following function:

registerPlugin
(
	{
		install: function (less, pluginManager, functions)
		{
			// Used as:
			//
			//	@up-to-down: uniqueName('up-to-down');
			//
			// @up-to-down will be up-to-down-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX (with a GUID as the suffix).
			functions.add('uniqueName', function (name)
			{
				return `${name}-${crypto.randomUUID()}`;
			});
		}
	}
)

Maybe, this would work, if compile LESS code on-the-go (in a browser), but a VS extension Web Compiler 2022+ uses something else. Not sure, what it is, Node.JS, maybe, but the environment doesn't implement crypto at all.

So, I ended up with clumsy Math.random()-based suffixes.

Is there a better way of avoiding conflicts with @keyframes?

[dosubot[bot]]

To generate unique names for @keyframes without relying on the crypto module, you can consider using a combination of Math.random() and a timestamp to create a more unique identifier. While Math.random() alone isn't ideal for generating truly unique identifiers, combining it with a timestamp can help reduce the likelihood of conflicts.

Here's an example of how you might modify your plugin to use this approach:

registerPlugin({
    install: function (less, pluginManager, functions) {
        functions.add('uniqueName', function (name) {
            const randomPart = Math.random().toString(36).substring(2, 10);
            const timestampPart = Date.now().toString(36);
            return `${name}-${randomPart}-${timestampPart}`;
        });
    }
});

This method generates a suffix using a random string and the current timestamp, which should be sufficient for most use cases where you need to avoid conflicts with @keyframes.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[SergeVDev]

Maybe, I can just process all nested @keyframes from the plugin (I mean, from a callback, before the whole LESS file is being compiled)? That would the best solution.

Unfortunately, the plugin architecture seems to be poorly documented on the official page.