Runtime USS

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

import { h, render } from "preact"
import { useEffect, 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)

Caveat

Runtime USS was made to work by using and modifying some internal Unity C# code. At the time, it was meant as a quick hack because Unity had said they were working on their own runtime-friendly Stylesheets. But that never came to be. So, we will be implementing our own custom stylesheets soon from scratch.

If you work for a company and are worried about potential license issue, you have 3 options currently:

1. Wait for us to fully re-implement custom stylesheets, or
2. Don't use runtime uss and emo, and strip OneJS.CustomStyleSheets from your runtime, or
3. Get Full-access source code from Unity.