Function addCssVariable

src/chibiScript/functions/core/coreFunctions.ts:370–410

* Adds a CSS variable to the document root and updates it based on a callback. * Should be used inside of the setup lifecycle * @param name - Name of the CSS variable (e.g., --my-variable) * @param callback - Callback that returns the value of the CSS variable * @param defaultValue - Def

(
    ctx: ChibiCtx,
    input: void,
    name: string,
    callback: ChibiJson<string>,
    defaultValue: string = '',
  )

   * )
   */
  addCssVariable(
    ctx: ChibiCtx,
    input: void,
    name: string,
    callback: ChibiJson<string>,
    defaultValue: string = '',
  ) {
    const storageKey = `mal-sync-css-var${name}`;

    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    asyncFunctions.domReady(ctx, undefined).then(() => {
      const savedValue = localStore.getItem(storageKey);
      if (savedValue || defaultValue) {
        styleSet(savedValue || defaultValue);
      }

      ctx.event.on('overview.uiSelector', runCallback);
      ctx.event.on('sync.uiSelector', runCallback);
    });

    function styleSet(value: string) {
      domFunctions.setStyle(ctx, document.documentElement, name, value, true);
    }
    async function runCallback() {
      let result;
      if (ctx.isAsync()) {
        result = await ctx.runAsync(callback);
      } else {
        result = ctx.run(callback);
      }

      if (result && result instanceof ChibiReturn) {
        result = result.getValue();
      }

      if (result && result !== localStore.getItem(storageKey)) {
        styleSet(result);
        localStore.setItem(storageKey, result);
      }
    }
  },
};