Walkthrough

The PR refactors CSS variable management from in-memory storage to DOM-backed CSS rules, introducing a dynamic stylesheet approach that ensures ScopedTheme components and non-global theme overrides reliably reflect runtime variable updates across native and web platforms.

Changes

Sequence Diagram

sequenceDiagram
    participant App as Application
    participant Uniwind as Uniwind.updateCSSVariables()
    participant DOMRules as Dynamic CSS Rules<br/>(DOM-backed)
    participant Listener as UniwindListener
    participant Component as ScopedTheme Component

    App->>Uniwind: updateCSSVariables(theme, vars)
    Uniwind->>DOMRules: getUniwindDynamicCSSRules() if needed
    DOMRules->>DOMRules: Inject `#uniwind-dynamic-styles` element<br/>with theme selectors (.light, .dark, etc)
    Uniwind->>DOMRules: For each cached rule, call<br/>rule.style.setProperty(varName, value)<br/>for matching theme
    Uniwind->>Listener: notify([StyleDependency.Variables])
    Listener->>Component: Trigger component subscribed<br/>to Variables dependency
    Component->>Component: Re-render with updated<br/>CSS variables from DOM

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix: getWebStyles not return default html styles #440 — Modifies the same CSSListenerBuilder.subscribeToClassName in cssListener.ts; both PRs restructure listener subscription patterns, though with different approaches to rule tracking and variable dependency handling.

Poem

🐰 A stylesheet that blooms and grows,
With dynamic rules the DOM now knows,
No more in memory we hold our cache,
Each theme gets CSS to dash and flash! ✨

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

• X
• Mastodon
• Reddit
• LinkedIn