@master/css-runtime
Run Master CSS right in the browser
Installation
npm i @master/css-runtimeTo import and initialize the runtime engine in the entry file, such as main.js:
import { initCSSRuntime } from '@master/css-runtime'import config from './master.css'initCSSRuntime(config)API Reference
CSSRuntime
The Runtime extends the MasterCSS and only works in the browser environment.
import CSSRuntime from '@master/css-runtime'const cssRuntime = new CSSRuntime(config)CSSRuntime.instances
All objects instantiated via new WeakMap().
| Type | WeakMap<Document | ShadowRoot, CSSRuntime> |
|---|---|
| Default | [] |
cssRuntime.root
Observe the root element.
| Type | DocumentShadowRoot |
|---|---|
| Default | document |
cssRuntime.host
Observe the root's host element, usually this.root.host or document.documentElement.
| Type | Element |
|---|---|
| Default | auto( Read Only ) |
cssRuntime.container
Container for inserting style <style>.
| Type | HTMLElementShadowRoot |
|---|---|
| Default | auto( Read Only ) |
cssRuntime.observing
Observation state. true after .observe(); false after .disconnect().
| Type | boolean |
|---|---|
| Default | auto( Read Only ) |
cssRuntime.observe()
Observe the class attribute changes of this.root and all descendant elements.
| Argument | Type | Default |
|---|---|---|
return | this | - |
cssRuntime.disconnect()
Cancel the previous .observe() of this.root.
| Argument | Type | Default |
|---|---|---|
options? | MutationObserverInit | { subtree: true, childList: true } |
return | this | - |
cssRuntime.refresh()
Refresh the Master Runtime CSS with the configuration.
| Argument | Type | Default |
|---|---|---|
config? | Config | this.customConfig |
return | this | - |
cssRuntime.reset()
Clear all rules and styles and reset to initial.
| Argument | Type | Default |
|---|---|---|
return | this | - |
cssRuntime.destroy()
Destroy and remove the current instance from globalThis.cssRuntimes.
| Argument | Type | Default |
|---|---|---|
return | this | - |
globalThis.cssRuntime
Record the registered root document Runtime CSS instance; the field will be recorded only after executing css.observe().
| Type | CSSRuntime |
|---|
globalThis.CSSRuntime
| Type | typeof CSSRuntime |
|---|---|
| Default | CSSRuntime |
initCSSRuntime()
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 CSSRuntime from '@master/css-runtime'const cssRuntime = new CSSRuntime().observe()