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)

Disclaimer

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 as of right now, they have not done that yet.

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

• Wait for Unity to support runtime stylesheet, or
• Wait for us to fully re-implement custom stylesheets (we will do this if Unity takes too long), or
• Don't use runtime uss, styled, and emo, and strip OneJS.CustomStyleSheets from your project, or
• Get Full-access source code license from Unity.