Package

Runtime

The core syntax parsing and runtime engine of Master CSS.


Interfaces

RuntimeCSS

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

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

runtime.root

Observe the root element.

Type
Document
ShadowRoot
Default
document
runtimeCSS.root

runtime.host

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

Type
Element
Default
auto
( Read Only )
runtimeCSS.host

runtime.container

Container for inserting style <style>.

Type
HTMLElement
ShadowRoot
Default
auto
( Read Only )
runtimeCSS.host

runtime.observing

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

Type
boolean
Default
auto
( Read Only )
runtimeCSS.observing

runtime.observe()

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

ArgumentTypeDefault
return
this
-
runtimeCSS.observe()

runtime.disconnect()

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

ArgumentTypeDefault
options?
MutationObserverInit
{ subtree: true, childList: true }
return
this
-
runtimeCSS.disconnect()

runtime.refresh()

Refresh the Master Runtime CSS with the configuration.

ArgumentTypeDefault
config?
this.customConfig
return
this
-
css.refresh(config)

runtime.reset()

Clear all rules and styles and reset to initial.

ArgumentTypeDefault
return
this
-
css.reset()

runtime.destroy()

Destroy and remove the current instance from globalThis.runtimeCSSs.

ArgumentTypeDefault
return
this
-
css.reset()

globalThis.runtimeCSS

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

Type
RuntimeCSS

globalThis.runtimeCSSs

All objects instantiated via new RuntimeCSS().

Type
RuntimeCSS[]
Default
[]

globalThis.RuntimeCSS

Type
typeof RuntimeCSS
Default
RuntimeCSS

initCSSRuntime()

Initializes the Master CSS runtime rendering engine.

ArgumentTypeDefault
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()
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.