Есть ли способ программно получить список объявленных css-переменных?

Question

[Роман Кофф]

В стилях определены css-переменные. Их можно посмотреть с помощью средств разработчика встроенных в современные браузеры, например:



Есть ли какая-нибудь возможность получить перечень этих переменных программным путем для автоматизации формирования документации?

Comments

[v3shin]

На уровне идеи: получить список подключаемых стилей, сделать fetch по каждому файлу, затем регуляркой достать все переменные. Вопрос в том, нужен ли вам плоский список переменных или список переменных по селекторам.

[Роман Кофф]

v3shin, это решение напрашивается (тем более, что файл стилей один). Если других вариантов не будет — придется юзать его.

Нужно сформировать справочную страницу в проекте (для разработчиков), в которой будут перечислены предустановленные переменные. Если бы это можно было выудить на чистом js, на стороне клиента, получилось бы достаточно гибкое решение, а так придется привязываться к серверной стороне и хостингу (чего хотелось бы избежать).

Answer 1

[WapSter]

https://www.npmjs.com/package/get-custom-properties

Comments

[Роман Кофф]

Спасибо! То, что нужно!

Answer 2

[denisromanenko]

Если хочешь все переменные:
https://stackoverflow.com/questions/48760274/get-a...

Если знаешь имя:

getComputedStyle(document.body).getPropertyValue("--clr-primary-5")

Comments

[Роман Кофф]

Нет. Задача именно в том, чтобы узнать имена))

А это (https://stackoverflow.com/questions/48760274/get-a...), да. Тоже подходит...

Answer 3

[Роман Кофф]

В итоге, на основе примера предложенного denisromanenko получилось такое решение:
(менее глючное, чем в примере)

function getAllCSSVariableNames(styleSheets = document.styleSheets) {
   let names1 = [];
   for (const sheet1 of styleSheets) {
      try {
         for (const rule1 of sheet1.cssRules)
            if (rule1.cssText.startsWith(':root'))
               for (const name1 of rule1.style)
                  if (names1.indexOf(name1) == -1)
                     names1.push(name1);
      } catch { }
   }
   return names1;
}

function getElementCSSVariables(names, element = document.body, pseudo) {
   let styles1 = window.getComputedStyle(element, pseudo);
   let vars1 = {};
   for (let i1 = 0; i1 < names.length; i1++) {
      let key1 = names[i1];
      let value1 = styles1.getPropertyValue(key1)
      vars1[key1] = value1;
   }
   return vars1;
}

const names = getAllCSSVariableNames();
const vars = getElementCSSVariables(names);
const elem1 = document.getElementById('cssVariables');

let s1 = '';
for (let key1 in vars) {
    s1 += `<tr><td class="text-nowrap">${key1}</td><td><code>${vars[key1]}</code></td></tr>`;
}
elem1.innerHTML = s1;