sx()

Merge multiple style sources into a single object to pass as the style prop. Function values in a source are preserved (not invoked), so the style prop’s per-property reactivity sees them.

Signature

function sx(...sources: SxStyleSource[]): Record<string, SxStyleValue | (() => SxStyleValue)>;

How it merges

• Each source is either a plain style object or a falsy value. Falsy sources are skipped.
• Keys from later sources override earlier ones.
• Merging happens at call time, not reactively. A source that reads a signal value (active.value && { ... }) is evaluated once during setup — frozen after.
• For reactive conditionals, put the function on the property, not the source: { borderColor: () => active.value ? "blue" : "transparent" }.

Examples

import { signal, sx, div } from "@whisq/core";

const active = signal(false);
const x = signal(0);

div({
  style: sx(
    { color: "red", padding: "1rem" },                              // base
    { borderColor: () => active.value ? "blue" : "transparent" },   // reactive conditional
    { transform: () => `translateX(${x.value}px)` },                // reactive
  ),
});

For scoped class-based styles instead of inline, see sheet() and rcx().