JS: получить «реальное» значение пользовательского свойства CSS

Question

Я знаю, что этот вопрос, кажется, задают 1 миллион раз, но здесь есть небольшая тонкость.

Представьте, что у меня есть пользовательское свойство CSS, подобное этому:

      /* Yes the colors are terrible in this exemple, I know */
:root {
    --color_1: salmon;
    --color_2: green;
}
.foo {
    background-color: var(--color_1, var(--color_2, black));
    color: var(--color_2, var(--color_1, white));
}
.foo.inverted {
    background-color: var(--color_2, var(--color_1, white));
    color: var(--color_1, var(--color_2, black));
}

И теперь в JS я хочу получить значение свойства «цвет» «.foo». С чем-то вроде этого это довольно легко:

      const firstFoo = document.querySelector('.foo');
const gs = getComputedStyle(firstFoo);
const firstFooColor = gs.getPropertyValue('color');

Так что с такими вещами, если я сделаюconsole.log(firstFooColor), если первый элемент просто .foo, я получуrgb(0, 128, 0), и если второй элемент имеет класс.invertedцвет будетrgb(250, 128, 114).

Мой вопрос: есть ли способ получить var(--color_2, var(--color_1, white))вместо вывода цвета, просто выбрав элемент?

Все, что я пробовал, потерпело неудачу. И я не хочу использовать такие вещи, какdocument.styleSheets, разобрать все, найти класс и сравнить с классами элемента, и вернуть значение. Если более сложный селектор, это будет ужасно, а если есть какой-то @media или другой, это будет практически невозможно...

Заранее спасибо за вашу помощь!