To request access to the OneJS private repo, please message Singtaa on Discord with your Invoice # and Github username. Our Discord is also a great place to chat and search for answers already asked by the community.
VERSION
Doc Menu

Runtime USS

One of the current limitations of UI Toolkit is its inability to load USS files at runtime (from strings). So, we decided to fill in the gap.

OneJS allows you to load USS strings dynamically at runtime via document.addRuntimeUSS().

import { h, render } from "preact"
import { useEffect } from "preact/hooks"
import { useState } from "preact/hooks"

const App = () => {
    const [text, setText] = useState("#App {\n    padding: 100;\n}")

    const setUSS = () => {
        document.clearRuntimeStyleSheets()
        document.addRuntimeUSS(text)
    }

    useEffect(setUSS, [])

    return <div name="App">
        <textfield multiline={true} onValueChanged={(e) => setText(e.newValue)} value={text}></textfield>
        <div><label text="Lorem Ipsum" /></div>
        <button onClick={setUSS} text="Set USS"></button>
    </div>
}

render(<App />, document.body)

Limitations

Runtime USS was made to work by separating/decoupling Asset path management (editor mode feature) from the StyleSheet importer. So any path-based values such as image and font urls are currently not supported in USS strings. To use these, please either go for inline styles or static uss files.