How to create a LESS variable with a Plugin

[Ora9]

I want to create a simple LESS plugin that create variables on a function call

I want to do this because i want to have a less variable dynamic on runtime (link of unanswered question on why i want to do that)

In short

i want to do this :

without having to do :

And just declare each variable once like :

And var() is the custom LESS plugin function i wanna make

What i tried

I tried to learn how to create plugin on lesscss.org, github.com, and on diverse site, but it's either just not enough, or really obscure on how to create variables

I also saw this blog post where he creates variables, but i tried every thing, and nothing worked

Finally

I just want some advices or code, and ideally an explanation on how tf it works

Thanks :)

[gzb1128]

hello,i mean less support creating variables like this
is it not enough or maybe i don't get your point
`
@width: 10px;
@height: @width + 10px;

#header {
width: @width;
height: @height;
}
`

[Ora9]

hello,i mean less support creating variables like this is it not enough or maybe i don't get your point ` @width: 10px; @height: @width + 10px;

#header { width: @width; height: @height; } `

Hi, thanks, but i want to create a variable programmatically with a js plugin, not directly in .less file

[iChenLei]

@Fukv I think less plugin's preProcessor is for you, you can parse less source file via postcss and postcss-less, and then modify the var function ast node, and leave the rest work to less.

[iSplasher]

I realize this might be super late, hopefully, someone will appreciate it. After poking around the internals for a bit, I figured out a way to do it. I use this to break maps into individual scalar values dynamically, and it all works because it's done pre-evaluation. It's also way more efficient than @iChenLei's suggestion of having to parse twice. E.g.

@breakpoint: {
  xs: 36em;
  sm: 48em;
  md: 62em;
};

// the following variables are added dynamically
// @breakpoint-xs: 36em;
// @breakpoint-sm: 48em;
// @breakpoint-md: 62em;

Here's the plugin code in TypeScript:

import type Less from 'less';
//@ts-expect-error
import type Node from 'less/lib/less/tree/node.js';

//@ts-expect-error
import LessVisitor from 'less/lib/less/visitors/visitor.js';

const DEFAULTS = {};

type Options = typeof DEFAULTS;

export default class LessPluginDynvars implements Less.Plugin {
  options: Options;
  minVersion: [number, number, number];

  constructor(options: Partial<Options> = {}) {
    this.minVersion = [3, 0, 0];
    this.options = Object.assign({}, DEFAULTS, options);
  }

  install(less: LessStatic, pluginManager: Less.PluginManager) {
    // @ts-expect-error
    pluginManager.addVisitor(new PluginVistor(less, this.options));
  }

  setOptions(str: string) {
    const opts = { ...this.options };
    Object.assign(opts, JSON.parse(str));
    this.options = opts;
  }

  printUsage() {
    return '--dynvars';
  }
}

interface Visitor {
  isPreEvalVisitor?: boolean;
  isPreVisitor?: boolean;
  isReplacing?: boolean;
}

interface VisitArgs {
  visitDeeper: boolean;
}

class PluginVistor implements Visitor {
  public isPreEvalVisitor = true;
  public isPreVisitor = false;
  public isReplacing = true;
  private less: LessStatic;
  private options: Options;
  private _visitor: LessVisitor;
  private root: Node | null = null;

  constructor(less: LessStatic, opts: Options) {
    this.less = less;
    this.options = opts;
    this._visitor = new LessVisitor.default(this);
  }

  run(root: Node) {
    this.root = root;
    const r = this._visitor.visit(root);
    return r;
  }

  visitDeclaration(node: Node, visitArgs: VisitArgs) {
    const isMapDecl =
      node.variable && node.parent === this.root && node?.value?.ruleset;

    const isMapListDecl =
      node.variable &&
      node.parent === this.root &&
      node?.value?.value?.[0]?.variableRegex &&
      node?.value?.value?.[0]?.propRegex;

    // console.log(this.less.tree);
    if (isMapDecl || isMapListDecl) {
      visitArgs.visitDeeper = false;
      const m = isMapDecl
        ? this.getMapValues(node)
        : this.getMapRegexValues(node);
      const vars = Object.entries(m).map(([name, valueNode]) => {
        // this is the part that declares a new variable
        // @ts-expect-error
        const v = new this.less.declaration(
          `${node.name}-${name}`,
          valueNode, // value
          // @ts-expect-error
          valueNode?.important ?? '', // important
          null, // merge
          node.index, // index
          node._fileInfo, // fileInfo
          false, // inline
          true // variable
        );

        v.parent = node.parent;
        return v;
      });

      return [node, ...vars];
    } else {
      visitArgs.visitDeeper = false;
    }
    return node;
  }

  getMapRegexValues(node: Node) {
    if (
      node?.value?.value?.[0]?.variableRegex &&
      node?.value?.value?.[0]?.propRegex
    ) {
      const valNode = node.value.value[0];
      const value = valNode.value;
      const keyRegex = /([\w-]+):/g;

      // first get all matches
      const matches = [];
      let match;
      while ((match = keyRegex.exec(value)) !== null) {
        matches.push(match);
      }

      // get all keys
      const m = {} as Record<string, any>;
      for (const match of matches) {
        const key = match[1]!;
        // value is between key and next key
        const start = match.index + match[0].length;
        const nextMatch = matches.find((m) => m.index > start);
        const end = nextMatch ? nextMatch.index : value.length;

        let keyValue = value.slice(start, end).trim();

        // remove newlines
        keyValue = keyValue.replace(/\n/g, '');
        // remove redundant spaces
        keyValue = keyValue.replace(/\s+/g, ' ');
        // remove last semicolon
        keyValue = keyValue.replace(/;\}?$/, '');
        // remove outer parentheses
        keyValue = keyValue.replace(/^\(/, '').replace(/\)$/, '');

        // @ts-expect-error
        keyValue.split(',').forEach((v, i) => {
          // @ts-expect-error
          const n = this.less.node();
          n.value = v.trim();

          let val = this.less
            // @ts-expect-error
            .expression([n]);
          // @ts-expect-error
          val = this.less.value([val]);

          m[`${key}-${i + 1}`] = val;
        });
      }
      return m;
    }
    return {};
  }

  getMapValues(node: Node) {
    if (node?.value?.ruleset?.rules) {
      // @ts-expect-error
      return node.value.ruleset.rules.reduce((acc, rule) => {
        let name = rule.name;
        if (Array.isArray(rule.name)) {
          name = rule.name[0]?.value;
        }
        acc[name] = rule.value;
        return acc;
      }, {} as Record<string, Node>);
    }
    return {};
  }
}

Use programmatically like this:

const lessOptions = {
  plugins: [
    new LessPluginDynvars(),
  ],
};