API Reference

Core and Runtime

The core syntax parsing and runtime engine of Master CSS.

Master CSS

Create a Master CSS instance with your custom configuration:

import MasterCSS from '@master/css'
 
const css = new MasterCSS(config)

`.config`

The .config property is the result of extending the default config with the custom config you passed by the constructor.

Default	`{ … }`
Type	`Config`

css.config

`.text`

This .text getter returns the result of joining the text of all CSS rules.

Default	`''`
Type	`string`

css.text

`.add()`

Add a new syntax class.

Argument	Type	Default
`syntax`	`string`	`-`
`return`	`boolean`	`-`

if (css.add('text:center')) {
    console.log('added')
} else {
    console.log('not added')
}

`.delete()`

Remove an existing syntax class.

Argument	Type	Default
`syntax`	`string`	`-`
`return`	`boolean`	`-`

css.delete('text:center')

`.refresh()`

Refresh the Master CSS with the configuration.

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

css.refresh(config)

`.reset()`

Clear all rules and reset to initial.

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

css.reset()

`.destroy()`

Destroy and remove the current instance from globalThis.masterCSSs.

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

css.destroy()

`MasterCSS.config`

The default Master CSS configuration.

Default	`{ … }`
Type	`Config`

MasterCSS.config

Runtime 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'
 
const runtimeCSS = new RuntimeCSS(config)

`.root`

Observe the root element.

Default	`document`
Type	`Document` `ShadowRoot`

runtimeCSS.root

`.host`

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

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

runtimeCSS.host

`.container`

Container for inserting style <style>.

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

runtimeCSS.host

`.observing`

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

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

runtimeCSS.observing

`.observe()`

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

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

runtimeCSS.observe()

`.disconnect()`

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

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

runtimeCSS.disconnect()

`.refresh()`

Refresh the Master Runtime CSS with the configuration.

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

css.refresh(config)

`.reset()`

Clear all rules and styles and reset to initial.

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

css.reset()

`.destroy()`

Destroy and remove the current instance from globalThis.runtimeCSSs.

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

css.reset()

Global

`globalThis.runtimeCSS`

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

Default	`undefined`
Type	`RuntimeCSS`

`globalThis.runtimeCSSs`

All objects instantiated via new RuntimeCSS().

Default	`[]`
Type	`RuntimeCSS[]`

`globalThis.masterCSSs`

All objects instantiated via new MasterCSS().

Default	`[]`
Type	`MasterCSS[]`

`globalThis.RuntimeCSS`

Default	`RuntimeCSS`
Type	`typeof RuntimeCSS`

`globalThis.MasterCSS`

Default	`MasterCSS`
Type	`typeof RuntimeCSS`

Functions

`initRuntime()`

Initializes the Master CSS runtime rendering engine.

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

import { initRuntime } from '@master/css'
 
const css = initRuntime()

Equivalent to:

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