How to list all css variables names/values pairs from element

I have JS library and I have this issue: I'm creating temporary element for calculating size of character using monospace font. Right now I'm copying inlie style, but I need all styles from original including css variables. I don't want to clone the element, because there are elements, that are inside, that I don't need. Also element may have id set by the user, not sure how this will behave when there will be two elements with same id, so it would be better (I think) to just copy each style to new temporary element.

I have code based on these:

My code look like this:

function is_valid_style_property(key, value) {
    //checking that the property is not int index ( happens on some browser
    return typeof value === 'string' && value.length && value !== parseInt(value);
}

function copy_computed_style(from, to) {
    var computed_style_object = false;
    computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from, null);

    if (!computed_style_object) {
        return;
    }
    Object.keys(computed_style_object).forEach(function(key) {
        var value = computed_style_object.getPropertyValue(key);
        if (key.match(/^--/)) {
            console.log({key, value}); // this is never executed
        }
        if (is_valid_style_property(key, value)) {
            to.style.setProperty(key, value);
        }
    });
}

the problem is that getComputedStyle, don't return css variables. Is there any other solution to get list of css variables applied to element?

I need CSS variables because I have css that is applied to element that are inside of my temporary item, that is based on css variables. Is clone node the only way to copy CSS variables from one element to other?

EDIT:

this is not duplicate because css variable can also be set inline not only in style sheet per class. And my element can have style added by very different css selectors that I can't possibly know.

Solution

I found that this works in Firefox and Chrome (I've not tested in other browsers).

  const res: Record<string, string> = {};

  if ("computedStyleMap" in elem) {
    // Chrome
    const styles = elem.computedStyleMap();
    Array.from(styles).forEach(([prop, val]) => {
      if (prop.startsWith("--")) {
        res[prop] = val.toString();
      }
    });
  } else {
    // Firefox
    const styles = getComputedStyle(elem);
    for (let i = 0; i < styles.length; i++) {
      const propertyName = styles[i];
      if (propertyName.startsWith("--")) {
        const value = styles.getPropertyValue(propertyName);
        res[propertyName] = value;
      }
    }
  }

  console.log({ res });