Style
/ API Reference / Plugins
Style
/ API Reference / Plugins

debug

This plugin adds debug styles to elements for simple layout debugging.
It uses styles-debugger (new tab) under the hood.

The Gist

import { debugPlugin } from '@weser/style'

const plugin = debugPlugin(false, {
  debugWith: 'background',
})

Parameters

ParameterTypeDefaultDescription
autoActivebooleantrueWhether debug styles are active globally
configConfig?{}Custom styles-debugger (new tab) configuration

Config

PropertyTypeDefaultDescription
debugWithstring'outline'The CSS property to use for debugging ('outline' or 'background')
Note

When autoActive is disabled, one can opt-in by adding debug: true to a style object.

Returns

(Plugin) A plugin function that can be passed to the createRenderer function.

Style Type

In order to use this package properly, you need to extend the T_Style type with T_DebugStyle.

import {
  createRenderer,
  debugPlugin,
  type T_Style,
  type T_DebugStyle,
} from '@weser/style'

type Style = T_Style & T_DebugStyle

const css = createRenderer<Style>({
  plugins: [debugPlugin()],
})
On this page