Экстрактор CSS-переменных
Вставьте таблицу стилей и извлеките каждое --пользовательское-свойство, сгруппированное по префиксу,
с пометкой повторяющихся определений.
Сканирует каждый блок селектора, а не только :root. Одно и то же имя с разным значением в разных селекторах помечается как дубликат.
Сгруппированные переменные появятся здесь.
Как это работает
Входные данные сканируются блок за блоком (по парам selector { ... },
включая вложенные, например медиазапросы), и внутри каждого блока фиксируется каждое
объявление --name: value; вместе с селектором, к которому оно относится. Переменные
группируются по префиксу — первому сегменту после ведущих
--, разделённому дефисом, поэтому --color-primary-500 и --color-accent
оба попадают в группу «color», что повторяет то, как обычно устроены соглашения об именовании дизайн-токенов.
Имя помечается как дубликат только тогда, когда оно объявлено где-то ещё с действительно другим значением,
а не просто повторно под другим селектором с тем же значением
(это обычный паттерн для переопределений темы).
Всё выполняется при каждом нажатии клавиши в JavaScript этой страницы с помощью лёгкого сканера, сопоставляющего фигурные скобки, а не полноценного CSS-парсера. Ничего из вставленного не загружается.
Частые вопросы
Какие пользовательские свойства он находит?
Любое объявление вида --name: value; внутри любого блока селектора, а не только :root, включая вложенные правила и медиазапросы. Для каждого вхождения фиксируется, под каким селектором оно объявлено.
Как работает обнаружение дубликатов?
Если одна и та же переменная объявлена более одного раза с разными значениями (частый признак скопированных или несогласованных токенов), она помечается. Объявление одного и того же имени с одинаковым значением в разных областях (например, в переопределениях светлой/тёмной темы) — это нормально и не помечается.
Отправляется ли мой CSS куда-нибудь?
Нет, разбор происходит полностью в вашем браузере с помощью небольшого JavaScript-сканера. Ничего из вставленного не загружается.