Извлекатель пользовательских свойств CSS

Извлекатель пользовательских свойств CSS

Вставьте любой CSS или SCSS-файл стиля и мгновенно получите чистый, отсортированный, дублируемый список всех переменных, объявленных в нём — вместе с областью селектора, в которой они были объявлены. Извлекатель также выявляет переменные, которые ссылаются, но не объявлены в любом месте, что является распространённой причиной неисправных стилей в больших системах дизайна. --custom-property объявлены в нём — вместе с областью селектора, в которой они были объявлены. Извлекатель также выявляет переменные, которые ссылаются, но не объявлены в любом месте, что является распространённой причиной неисправных стилей в больших системах дизайна. var(--name) которые ссылаются, но не объявлены в любом месте, что является распространённой причиной неисправных стилей в больших системах дизайна.

Как использовать

1. Вставьте свой стиль в Ввод CSS / SCSS поле (или нажмите Попробуйте пример загрузить образец).
2. Выберите Формат выводаполе, чтобы ввести простой текст, объект JSON или готовый блок для вставки :root { } блока.
3. Используйте Фильтр поле для узкого поиска результатов по имени переменной, значению или области селектора.
4. Переключать Включить область селектора чтобы управлять тем, показывает ли таблица, где была объявлена каждая переменная.
5. Проверьте панель Неопределённые переменные на любые ссылки, у которых нет соответствующего объявления. var(--name) Скопируйте или загрузите извлечённый список с помощью кнопок на панели вывода.
6. Разбор, учитывающий скобки

Возможности

• – проходит по стилю посимвольно, чтобы правильно обрабатывать вложенные селекторы, запросы на медиа и значения в кавычках. Отслеживание области
• – каждая переменная связывается с селектором или правилом, в котором она была объявлена, поэтому вы можете отличить токен от перекрытия на уровне компонента. – простая таблица для просмотра, объект JSON для программного использования и чистый блок, который можно вставить обратно в стиль. :root Обнаружение неопределённых переменных
• Три формата вывода – выделяет любые переменные, у которых нет соответствующего объявления в любом месте входного файла. :root { } Живой фильтр
• – введите текст, чтобы узко сформировать результат по имени переменной, значению или области селектора в реальном времени. Удаление дубликатов и сортировка var(--name) – дублирующиеся объявления в одной области объединяются, а список сортируется по алфавиту для быстрого просмотра.
• – ничего не загружается; работает с приватными и незавершёнными стилями. Аудит стиля системы дизайна для создания общей базы токенов.
• Миграция переменных SCSS в собственные CSS-переменные. Поиск повреждённого стиля, вызванного опечаткой в ссылке.
• Работает полностью в браузере Генерация начального блока из внешнего темы.

Когда использовать этот инструмент

• Экспорт токенов в формате JSON для использования в документационном сайте или в вхождении Storybook.
• Что такое CSS-переменная?
• CSS-переменная (также называемая CSS-переменной) — это идентификатор, определяемый автором, с префиксом из двух дефисов (например, --color-primary), значение которого может быть повторно использовано в любом месте стиля через функцию var(). В отличие от переменных препроцессора, переменные CSS разрешаются на уровне выполнения браузером, что означает, что они каскадируют и наследуются, как любая другая CSS-свойство, и могут быть динамически изменены с помощью JavaScript. var() Как область селектора влияет на CSS-переменную?
• Переменная существует только в поддереве элемента, который её объявляет. Объявление на уровне :root делает её эффективно глобальной, поскольку :root соответствует элементу html, в то время как объявление внутри селектора компонента, например .card, ограничивает её значение только для этого компонента и его потомков. Тот же самый идентификатор может иметь разные значения в разных областях, что является механизмом тематики, переключения на темную тему и перекрытия на уровне компонента. :root { } Почему CSS не выдаёт ошибку при var() с неопределённой переменной?
• Спецификация CSS-переменных требует от браузера делать плавный переход, когда переменная, на которую ссылается var(), не была объявленна. Если var() не имеет аргумента для падения, вся свойство рассматривается как если бы значение было неопределено, что часто оставляет элемент с его начальным или наследуемым стилем. Поскольку в консоли не отображаются ошибки, неопределённые ссылки легко упускаются, и их выявление на раннем этапе предотвращает незаметные визуальные сбои.