Package

DevTools Hook

A global bridge injected into the browser runtime.

npm i @master/css-devtools-hook

The @master/css-devtools-hook package provides a global hook for monitoring runtime style changes. It is especially useful for building developer tools extensions or debugging in real time.

Basic usage

Import and attach to `globalThis`

You’ll typically expose the hook globally so that devtools or browser extensions can interact with it:

import devToolsHook, { type DevToolsHook } from '@master/css-devtools-hook'// expose on the global objectdeclare global {    var __MASTER_CSS_DEVTOOLS_HOOK__: DevToolsHook}if (!globalThis.__MASTER_CSS_DEVTOOLS_HOOK__) {    globalThis.__MASTER_CSS_DEVTOOLS_HOOK__ = devToolsHook}

By default, @master/css-runtime will automatically detect and attach to this hook when present.

Listen to runtime changes

Once the hook is attached, you can subscribe to runtime changes — such as class additions, removals, or lifycycle hooks — emitted by @master/css-runtime.

const hook = globalThis.__MASTER_CSS_DEVTOOLS_HOOK__const onMutated = (context) => {  console.log('CSS Mutations:', context.records)  console.log('Class counts:', context.classCounts)  console.log('CSSRuntime instance:', context.cssRuntime)}hook.on('runtime:mutated', onMutated)// later, if needed// hook.off('mutated', onMutated)

API Reference

`hook.on(event, callback)`

hook.on('mutated', (context) => {    console.log(context.records, context.classCounts, context.cssRuntime)})

`hook.off(event, callback)`

Removes a previously registered listener.

hook.off('mutated', onMutated)

`hook.emit(event, context)`

Manually trigger an event. Typically used internally.

hook.emit('mutated', {    records: mutationRecords,    classCounts: classCounts,    cssRuntime: cssRuntime})

`EventCallbacks`

The type definition for the available event callbacks.

import type { Config } from '@master/css'import type { CSSRuntime, HydrateResult } from '@master/css-runtime'export default interface EventCallbacks {    'runtime:created': (context: { cssRuntime: CSSRuntime }) => void    'runtime:hydrated': (context: { cssRuntime: CSSRuntime, result: HydrateResult }) => void    'runtime:observed': (context: { cssRuntime: CSSRuntime }) => void    'runtime:mutated': (context: { cssRuntime: CSSRuntime, classCounts: Map<string, number>, records: MutationRecord[] }) => void    'runtime:refreshed': (context: { cssRuntime: CSSRuntime, customConfig: Config }) => void    'runtime:disconnected': (context: { cssRuntime: CSSRuntime }) => void    'runtime:destroyed': (context: { cssRuntime: CSSRuntime }) => void}

`EventNames`

The type definition for the available event names.

import EventCallbacks from './event-callbacks'declare type EventNames = keyof EventCallbacksexport default EventNames

Summary

Best Practices

Avoid leaving unnecessary listeners running; clean them up when not needed.
Use the hook only in development builds or behind feature flags.
Keep your event handlers lightweight to avoid performance issues during frequent mutations.

Inspiration

Similar in purpose to __REACT_DEVTOOLS_GLOBAL_HOOK__ and __VUE_DEVTOOLS_GLOBAL_HOOK__.
Enables building browser extensions or devtools panels to visualize and monitor dynamic style changes.
Ideal for teams developing complex CSS setups and needing insight into runtime styling behavior.