API Reference

Master CSS Runtime

The core syntax parsing and runtime engine of Master CSS.

The Runtime extends the MasterCSS and only works in the browser environment.

Create a Master Runtime CSS instance with your custom configuration:

import { RuntimeCSS } from '@master/css-runtime'
 
const runtimeCSS = new RuntimeCSS(config)

Observe the root element.

Default	`document`
Type	`Document` `ShadowRoot`

runtimeCSS.root

Observe the root's host element, usually this.root.host or document.documentElement.

Default	`auto` ( Read Only )
Type	`Element`

runtimeCSS.host

Container for inserting style <style>.

Default	`auto` ( Read Only )
Type	`HTMLElement` `ShadowRoot`

runtimeCSS.host

Observation state. true after .observe(); false after .disconnect().

Default	`auto` ( Read Only )
Type	`boolean`

runtimeCSS.observing

Observe the class attribute changes of this.root and all descendant elements.

Argument	Type	Default
`return`	`this`	`-`

runtimeCSS.observe()

Cancel the previous .observe() of this.root.

Argument	Type	Default
`options?`	`MutationObserverInit`	`{ subtree: true, childList: true }`
`return`	`this`	`-`

runtimeCSS.disconnect()

Refresh the Master Runtime CSS with the configuration.

Argument	Type	Default
`config?`	`Config`	`this.customConfig`
`return`	`this`	`-`

css.refresh(config)

Clear all rules and styles and reset to initial.

Argument	Type	Default
`return`	`this`	`-`

css.reset()

Destroy and remove the current instance from globalThis.runtimeCSSs.

Argument	Type	Default
`return`	`this`	`-`

css.reset()

Global

Record the registered root document Runtime CSS instance; the field will be recorded only after executing css.observe().

Default	`undefined`
Type	`RuntimeCSS`

All objects instantiated via new RuntimeCSS().

Default	`[]`
Type	`RuntimeCSS[]`

Default	`RuntimeCSS`
Type	`typeof RuntimeCSS`

Initializes the Master CSS runtime rendering engine.

Argument	Type	Default
`config?`	`Config`	`undefined`
`return`	`MasterCSS`	`-`

import { initCSSRuntime } from '@master/css-runtime'
 
const css = initCSSRuntime()

Equivalent to:

import { RuntimeCSS } from '@master/css-runtime'
 
const runtimeCSS = new RuntimeCSS().observe()