Skip to content

pantoken / visual-debug

visual-debug

Бета

@pantoken/plugin-visual-debug — CSS для пропа withVisualDebug в InstUI.

Примитивы раскладки InstUI (View, Flex, Grid, List, …) принимают withVisualDebug, чтобы очертить блок и его дочерние элементы при отладке раскладки. Этот плагин выдаёт один модификатор с дефисом, -with-visual-debug, который работает с любым элементом (включая составные с любой базой, напр. .instui-view -with-visual-debug). Цвет обводки задаётся кастомным свойством --pantoken-visual-debug-color (по умолчанию яркая магента), поэтому его легко перекрасить.

Пример

ts
import { toCss } from "@pantoken/css";
import { byTheme } from "@pantoken/tokens";
import { visualDebug } from "@pantoken/plugin-visual-debug";

const css = toCss(byTheme("rebrand"), { plugins: [visualDebug()] });
// <div class="instui-view -with-visual-debug">…</div>

Интерфейсы

Переменные

Функции

Ссылки

default

Переименовывает и реэкспортирует visualDebug