@yak/solid 0.1.0 → 0.2.1

package/dist/internal.js

@@ -1,15 +1,17 @@
-import { createMemo, merge } from "solid-js";
-import { Dynamic, createComponent } from "@solidjs/web";
+import { $PROXY, createMemo } from "solid-js";
+import { ChildProperties, DOMWithState, MathMLElements, SVGElements, createComponent, escape, getNextElement, insert, isServer, runHydrationEvents, spread, ssr, ssrClassName, ssrHydrationKey, ssrStyle, template } from "@solidjs/web";
 import { YakThemeContext, YakThemeProvider, useTheme, useTheme as useTheme$1 } from "@yak/solid/context";
 
 //#region runtime/cssLiteral.ts
-const yakComponentSymbol = Symbol("yak");
+const yakComponentSymbol = Symbol.for("@yak/solid:component");
 var Classes = class {
 	value;
+	generated = true;
 	constructor(initial) {
 		this.value = initial || "";
 	}
-	add(name) {
+	add(name, generated = true) {
+		if (!generated) this.generated = false;
 		if (!this.value) this.value = name;
 		else if (!this.has(name)) this.value += " " + name;
 	}
@@ -37,10 +39,10 @@ function css(...args) {
 	}, { $dynamic: false });
 	return Object.assign((props, classes, allStyles) => {
 		if (staticClass) classes.add(staticClass);
-		for (let i = 0; i < dynamicCssFunctions.length; i++) unwrapProps(props, dynamicCssFunctions[i], classes, allStyles);
+		for (let i = 0; i < dynamicCssFunctions.length; i++) runProcessor(props, dynamicCssFunctions[i], classes, allStyles);
 	}, { $dynamic: true });
 }
-const unwrapProps = (props, fn, classes, style) => {
+const runProcessor = (props, fn, classes, style) => {
 	let result = fn(props, classes, style);
 	while (result) {
 		if (typeof result === "function") {
@@ -81,65 +83,223 @@ const mergeClasses = (yakClass, userClass) => {
 
 //#endregion
 //#region runtime/styled.ts
-const renderDynamic = (props) => createComponent(Dynamic, props);
+const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
 const styledFactory = (Component) => Object.assign(yakStyled(Component), { attrs: (attrs) => yakStyled(Component, attrs) });
 const styled = styledFactory;
 const yakStyled = (Component, attrs) => {
-	const isYakComponent = typeof Component === "function" && Component[yakComponentSymbol] !== void 0;
-	const [, parentAttrsFn, parentRuntimeStylesFn, parentTarget] = isYakComponent ? Component[yakComponentSymbol] : [];
-	const targetComponent = isYakComponent ? parentTarget : Component;
-	const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);
+	const [parentAttrs, parentRuntimeStylesFn, parentTarget] = typeof Component === "function" && Component[yakComponentSymbol] !== void 0 ? Component[yakComponentSymbol] : [];
+	const targetComponent = parentTarget ?? Component;
+	const mergedAttrs = composeAttrs(attrs, parentAttrs);
 	return (styles, ...values) => {
-		const runtimeStyleProcessor = buildRuntimeStylesProcessor(css(styles, ...values), parentRuntimeStylesFn);
+		const runtimeStylesFn = css(styles, ...values);
+		const runtimeStyleProcessor = composeStyles(runtimeStylesFn, parentRuntimeStylesFn);
 		const isTag = typeof targetComponent === "string";
-		const targetProps = isTag ? { component: targetComponent } : {};
-		const renderTarget = isTag ? renderDynamic : (finalProps) => createComponent(targetComponent, finalProps);
-		const Yak = !mergedAttrsFn && !runtimeStyleProcessor.$dynamic ? (props) => renderTarget(filterDomProps(merge(props, targetProps, { get class() {
-			const classes = new Classes(normalizeClass(props.class));
-			runtimeStyleProcessor(props, classes, void 0);
-			return classes.value || void 0;
-		} }))) : (props) => {
-			const theme = useTheme$1();
-			const propsWithTheme = merge({ theme }, props);
-			const attrsProps = mergedAttrsFn ? createMemo(() => mergedAttrsFn(propsWithTheme)) : void 0;
-			const styleInput = attrsProps ? merge(propsWithTheme, attrsProps) : propsWithTheme;
-			const computed = createMemo(() => {
-				const attrsResult = attrsProps?.();
-				const classes = new Classes(normalizeClass(props.class));
-				const attrsClass = normalizeClass(attrsResult?.class);
-				if (attrsClass) classes.add(attrsClass);
-				const style = runtimeStyleProcessor.$dynamic || attrsResult?.style ? {
-					...unwrapStyle(props.style),
-					...unwrapStyle(attrsResult?.style)
-				} : unwrapStyle(props.style);
-				runtimeStyleProcessor(styleInput, classes, style);
-				return {
-					class: classes.value || void 0,
-					style: style && Object.keys(style).length > 0 ? style : void 0
-				};
-			});
-			const merged = merge(props, attrsProps ?? {}, {
-				get class() {
-					return computed().class;
-				},
-				get style() {
-					return computed().style;
-				}
-			});
-			const allowTheme = () => {
-				const attrsResult = attrsProps?.();
-				return !!attrsResult && "theme" in attrsResult && attrsResult.theme !== theme;
-			};
-			return renderTarget(filterDomProps(merge(merged, targetProps), allowTheme));
-		};
-		return Object.assign(Yak, { [yakComponentSymbol]: [
-			Yak,
-			mergedAttrsFn,
+		const baked = isTag && mergedAttrs && typeof mergedAttrs !== "function" && bakeable(targetComponent, mergedAttrs) ? mergedAttrs : void 0;
+		const attrString = baked ? bakeAttributes(baked) : "";
+		const renderTarget = createTargetRenderer(targetComponent, attrString);
+		const isStatic = (!mergedAttrs || !!baked) && !runtimeStyleProcessor.$dynamic;
+		const skip = (key) => typeof key !== "string" || key.charCodeAt(0) === 36 || key === "class" || key === "theme" || !isStatic && key === "style" || baked !== void 0 && Object.hasOwn(baked, key);
+		const Yak = isStatic ? createStaticComponent(isTag ? targetComponent : void 0, renderTarget, runtimeStyleProcessor, skip, attrString) : createDynamicComponent(renderTarget, typeof mergedAttrs === "function" ? mergedAttrs : mergedAttrs && (() => mergedAttrs), runtimeStyleProcessor, skip, !!baked);
+		const metadata = [
+			mergedAttrs,
 			runtimeStyleProcessor,
 			targetComponent
-		] });
+		];
+		return Object.assign(Yak, { [yakComponentSymbol]: metadata });
+	};
+};
+const bakeable = (tag, attrs) => {
+	const stateful = DOMWithState[tag.toUpperCase()];
+	return Object.getOwnPropertyNames(attrs).every((key) => {
+		const descriptor = Object.getOwnPropertyDescriptor(attrs, key);
+		if (!descriptor.enumerable || !("value" in descriptor)) return false;
+		const type = typeof descriptor.value;
+		return (type === "string" || type === "number" || type === "boolean" || descriptor.value == null) && ATTRIBUTE_NAME.test(key) && key.charCodeAt(0) !== 36 && key !== "class" && key !== "style" && key !== "theme" && key !== "ref" && !ChildProperties.has(key) && !key.startsWith("on") && !key.startsWith("prop:") && !(stateful && key in stateful);
+	});
+};
+const bakeAttributes = (attrs) => {
+	let result = "";
+	for (const key of Object.keys(attrs)) {
+		const value = attrs[key];
+		if (value == null || value === false) continue;
+		result += value === true || value === "" ? ` ${key}` : ` ${key}="${escapeAttribute(String(value))}"`;
+	}
+	return result;
+};
+const escapeAttribute = (value) => value.replaceAll("&", "&amp;").replaceAll("\"", "&quot;");
+const ATTRIBUTE_NAME = /^[A-Za-z_:][\w:.-]*$/;
+const composeAttrs = (attrs, parent) => {
+	if (!attrs) return parent;
+	if (!parent) return attrs;
+	if (typeof attrs !== "function" && typeof parent !== "function" && !hasGetter(attrs) && !hasGetter(parent)) return combineProps(parent, attrs);
+	const own = typeof attrs === "function" ? attrs : () => attrs;
+	const parentFn = typeof parent === "function" ? parent : () => parent;
+	return (props) => {
+		const parentProps = parentFn(props);
+		return combineProps(parentProps, own(combineProps(props, parentProps)));
+	};
+};
+const composeStyles = (own, parent) => {
+	if (!parent) return own;
+	return Object.assign((props, classes, style) => {
+		parent(props, classes, style);
+		own(props, classes, style);
+	}, { $dynamic: own.$dynamic || parent.$dynamic });
+};
+const combineProps = (props, newProps) => {
+	if (!newProps) return props;
+	const descriptors = {
+		...Object.getOwnPropertyDescriptors(props),
+		...Object.getOwnPropertyDescriptors(newProps)
+	};
+	if (newProps.class && props.class !== newProps.class) descriptors.class = valueDescriptor(mergeClasses(normalizeClass(props.class), newProps.class));
+	if (newProps.style && props.style !== newProps.style) descriptors.style = valueDescriptor({
+		...unwrapStyle(props.style),
+		...unwrapStyle(newProps.style)
+	});
+	return Object.defineProperties({}, descriptors);
+};
+const valueDescriptor = (value) => ({
+	value,
+	enumerable: true,
+	configurable: true,
+	writable: true
+});
+const hasGetter = (object) => {
+	for (const key of Object.getOwnPropertyNames(object)) if (!("value" in Object.getOwnPropertyDescriptor(object, key))) return true;
+	return false;
+};
+const createStaticComponent = (tag, renderTarget, processor, skip, attrString) => {
+	const collected = new Classes();
+	processor(void 0, collected);
+	const staticClass = collected.value || void 0;
+	const classOf = (props) => {
+		const userClass = normalizeClass(props.class);
+		if (!userClass) return staticClass;
+		const classes = new Classes(userClass);
+		processor(props, classes);
+		return classes.value || void 0;
+	};
+	const renderChildrenOnly = tag && !VOID_ELEMENTS.test(tag) ? createChildrenOnlyRenderer(tag, staticClass, attrString) : void 0;
+	const meta = {
+		skip,
+		compute: void 0,
+		classOf,
+		attrsAddKeys: false,
+		unescapedClass: collected.generated ? staticClass : void 0
+	};
+	return (props) => {
+		if (renderChildrenOnly && (isServer || !($PROXY in props))) {
+			const keys = Object.keys(props);
+			if (!keys.length || keys.length === 1 && keys[0] === "children") return renderChildrenOnly(props, keys.length !== 0);
+		}
+		return renderTarget(props, meta);
+	};
+};
+const createChildrenOnlyRenderer = (tag, className, attrString) => {
+	if (isServer) {
+		const head = `<${tag}${attrString}`;
+		const open = `${className ? ` class="${ssrClassName(className)}"` : ""}>`;
+		const closing = `</${tag}>`;
+		const parts = [
+			head,
+			open,
+			closing
+		];
+		const raw = tag === "script" || tag === "style";
+		return (props, hasChildren) => {
+			const hk = ssrHydrationKey();
+			const children = hasChildren ? raw ? props.children : escape(props.children) : void 0;
+			const text = plainContent(children);
+			if (text !== void 0) return { t: `${head}${hk}${open}${text}${closing}` };
+			return ssr(parts, hk, children);
+		};
+	}
+	const create = createElementTemplate(tag, attrString, className);
+	return (props, hasChildren) => {
+		const el = getNextElement(create);
+		if (hasChildren) {
+			const descriptor = Object.getOwnPropertyDescriptor(props, "children");
+			if (descriptor && "value" in descriptor) insert(el, descriptor.value);
+			else insert(el, () => props.children);
+		}
+		runHydrationEvents();
+		return el;
 	};
 };
+const createDynamicComponent = (renderTarget, attrsFn, processor, skip, baked) => (props) => {
+	const theme = useTheme$1();
+	const propsWithTheme = withTheme(props, theme);
+	const compute = () => computeStyles(props, propsWithTheme, attrsFn, processor);
+	const computed = isServer ? once(compute) : createMemo(compute, { transparent: true });
+	const allowTheme = attrsFn && (() => {
+		const attrs = computed().attrs;
+		return !!attrs && "theme" in attrs && attrs.theme !== theme;
+	});
+	return renderTarget(props, {
+		skip: allowTheme ? (key) => key === "theme" ? !allowTheme() : skip(key) : skip,
+		compute: computed,
+		classOf: void 0,
+		attrsAddKeys: !!attrsFn && !baked,
+		unescapedClass: void 0
+	});
+};
+const computeStyles = (props, propsWithTheme, attrsFn, processor) => {
+	const attrs = attrsFn?.(propsWithTheme);
+	const authorClass = normalizeClass(props.class);
+	const classes = new Classes(authorClass);
+	const attrsClass = normalizeClass(attrs?.class);
+	if (attrsClass) classes.add(attrsClass);
+	const style = processor.$dynamic || attrs?.style ? {
+		...unwrapStyle(props.style),
+		...unwrapStyle(attrs?.style)
+	} : unwrapStyle(props.style);
+	processor(attrs ? withAttrs(propsWithTheme, attrs) : propsWithTheme, classes, style);
+	return {
+		class: classes.value || void 0,
+		generatedClass: !authorClass && !attrsClass && classes.generated,
+		style: style && hasKeys(style) ? style : void 0,
+		attrs
+	};
+};
+const viewTraps = {
+	get: ({ props, theme, attrs }, key) => {
+		if (key === "theme" && theme && !("theme" in props)) return theme;
+		if (attrs && key in attrs) return Reflect.get(attrs, key);
+		return Reflect.get(props, key);
+	},
+	has: ({ props, theme, attrs }, key) => key === "theme" && !!theme || !!attrs && key in attrs || Reflect.has(props, key),
+	ownKeys: ({ props, theme, attrs }) => {
+		const keys = new Set(Reflect.ownKeys(props));
+		if (attrs) for (const key of Reflect.ownKeys(attrs)) keys.add(key);
+		if (theme) keys.add("theme");
+		return [...keys];
+	},
+	getOwnPropertyDescriptor: ({ props, theme, attrs }, key) => {
+		if (key === "theme" && theme && !("theme" in props)) return {
+			value: theme,
+			enumerable: true,
+			configurable: true
+		};
+		const descriptor = Reflect.getOwnPropertyDescriptor(attrs && key in attrs ? attrs : props, key);
+		return descriptor && {
+			...descriptor,
+			configurable: true
+		};
+	}
+};
+const withTheme = (props, theme) => !($PROXY in props) && "theme" in props ? props : new Proxy({
+	props,
+	theme
+}, viewTraps);
+const withAttrs = (props, attrs) => new Proxy({
+	props,
+	attrs
+}, viewTraps);
+const once = (fn) => {
+	let value;
+	return () => value ??= fn();
+};
 const unwrapStyle = (style) => {
 	if (typeof style !== "string") return style;
 	const result = {};
@@ -152,45 +312,178 @@ const unwrapStyle = (style) => {
 	}
 	return result;
 };
-const isBlockedProp = (key, allowTheme) => typeof key === "string" && (key.startsWith("$") || key === "theme" && !(allowTheme && allowTheme()));
-const filterDomProps = (props, allowTheme) => new Proxy(props, {
-	get: (target, key) => isBlockedProp(key, allowTheme) ? void 0 : Reflect.get(target, key),
-	has: (target, key) => !isBlockedProp(key, allowTheme) && Reflect.has(target, key),
-	ownKeys: (target) => Reflect.ownKeys(target).filter((key) => !isBlockedProp(key, allowTheme)),
-	getOwnPropertyDescriptor: (target, key) => isBlockedProp(key, allowTheme) ? void 0 : Reflect.getOwnPropertyDescriptor(target, key)
-});
-const mergeClasses$1 = (a, b) => {
-	if (!a && !b) return void 0;
-	if (!a) return b;
-	if (!b) return a;
-	return a + " " + b;
-};
-const combineProps = (props, newProps) => newProps ? (props.class === newProps.class || !newProps.class) && (props.style === newProps.style || !newProps.style) ? {
-	...props,
-	...newProps
-} : {
-	...props,
-	...newProps,
-	class: mergeClasses$1(props.class, newProps.class),
-	style: {
-		...unwrapStyle(props.style),
-		...unwrapStyle(newProps.style)
+const hasKeys = (object) => {
+	for (const _ in object) return true;
+	return false;
+};
+const createTargetRenderer = (target, attrString) => {
+	if (typeof target !== "string") return (props, meta) => createComponent(target, targetProps(props, meta));
+	if (isServer) {
+		const head = `<${target}${attrString}`;
+		const closing = VOID_ELEMENTS.test(target) ? void 0 : `</${target}>`;
+		return (props, meta) => serializeElement(target, head, closing, props, meta);
 	}
-} : props;
-const buildRuntimeAttrsProcessor = (attrs, parentAttrsFn) => {
-	const ownAttrsFn = attrs && (typeof attrs === "function" ? attrs : () => attrs);
-	if (ownAttrsFn && parentAttrsFn) return (props) => {
-		const parentProps = parentAttrsFn(props);
-		return combineProps(parentProps, ownAttrsFn(combineProps(props, parentProps)));
-	};
-	return ownAttrsFn || parentAttrsFn;
+	return createElementRenderer(target, attrString);
+};
+const serializeElement = (tag, head, closing, props, meta) => {
+	const hk = ssrHydrationKey();
+	let computed;
+	let className;
+	if (meta.compute) {
+		computed = meta.compute();
+		className = computed.class;
+	} else className = meta.classOf(props);
+	const attrs = computed?.attrs;
+	const style = computed?.style;
+	const skip = meta.skip;
+	let result = head + hk;
+	let children;
+	const textarea = tag === "textarea";
+	for (const key of Object.keys(props)) {
+		if (skip(key)) continue;
+		const source = attrs && key in attrs ? attrs : props;
+		if (!isChildKey(key, textarea)) result += attribute(key, source[key]);
+		else if (children === void 0 && closing) children = childContent(tag, key, source[key]);
+	}
+	if (attrs) for (const key of Object.keys(attrs)) {
+		if (skip(key) || key in props) continue;
+		if (!isChildKey(key, textarea)) result += attribute(key, attrs[key]);
+		else if (children === void 0 && closing) children = childContent(tag, key, attrs[key]);
+	}
+	if (className !== void 0) {
+		const generated = computed ? computed.generatedClass : className === meta.unescapedClass;
+		result += ` class="${generated ? className : ssrClassName(className)}"`;
+	}
+	if (style !== void 0) result += ` style="${ssrStyle(style)}"`;
+	if (!closing) return { t: result + " />" };
+	const text = plainContent(children);
+	if (text !== void 0) return { t: result + ">" + text + closing };
+	return ssr([result + ">", closing], children);
+};
+const isChildKey = (key, textarea) => ChildProperties.has(key) || textarea && (key === "value" || key === "defaultValue");
+const plainContent = (node) => {
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node !== "object" || Array.isArray(node)) return void 0;
+	const server = node;
+	if (server.h && server.h.length > 0) return void 0;
+	if (typeof server.t === "string") return server.t;
+};
+const attribute = (prop, value) => {
+	if (prop === "style") return ` style="${ssrStyle(value)}"`;
+	if (prop === "class") return ` class="${ssrClassName(value)}"`;
+	if (value == void 0 || prop === "ref" || prop.startsWith("on") || prop.startsWith("prop:")) return "";
+	if (typeof value === "boolean") return value ? ` ${escape(prop)}` : "";
+	return value === "" ? ` ${escape(prop)}` : ` ${escape(prop)}="${escape(value, true)}"`;
+};
+const childContent = (tag, prop, value) => tag === "script" || tag === "style" || prop === "innerHTML" ? value : escape(value);
+const createElementTemplate = (tag, attrString, className) => {
+	const opening = `<${tag}${attrString}${className ? ` class="${escapeAttribute(className)}"` : ""}>`;
+	if (SVGElements.has(tag) && tag !== "svg") return template(`<svg>${opening}`, 2);
+	if (MathMLElements.has(tag) && tag !== "math") return template(`<math>${opening}`, 2);
+	return template(opening);
+};
+const createElementRenderer = (tag, attrString) => {
+	const create = createElementTemplate(tag, attrString);
+	return (props, meta) => bindElement(getNextElement(create), props, meta);
+};
+const bindElement = (el, props, meta) => {
+	const bound = targetProps(props, meta);
+	const skipChildren = !($PROXY in bound) && !("children" in bound);
+	spread(el, bound, skipChildren);
+	runHydrationEvents();
+	return el;
+};
+const targetProps = (props, meta) => {
+	if (!meta.attrsAddKeys && !($PROXY in props)) return copyProps(props, meta);
+	return proxyProps(props, meta);
+};
+const copyProps = (props, meta) => {
+	const { compute, classOf } = meta;
+	const out = {};
+	for (const key of Object.getOwnPropertyNames(props)) {
+		if (meta.skip(key)) continue;
+		const descriptor = Reflect.getOwnPropertyDescriptor(props, key);
+		if ("value" in descriptor && descriptor.enumerable) out[key] = descriptor.value;
+		else Object.defineProperty(out, key, descriptor);
+	}
+	if (isServer) {
+		if (compute) {
+			const computed = compute();
+			out.class = computed.class;
+			if (computed.style !== void 0) out.style = computed.style;
+		} else out.class = classOf(props);
+		return out;
+	}
+	const classFn = compute ? () => compute().class : () => classOf(props);
+	const styleFn = styleGetter(compute);
+	Object.defineProperty(out, "class", {
+		get: classFn,
+		enumerable: true,
+		configurable: true
+	});
+	if (styleFn) Object.defineProperty(out, "style", {
+		get: styleFn,
+		enumerable: true,
+		configurable: true
+	});
+	return out;
+};
+const styleGetter = (compute) => {
+	if (!compute) return void 0;
+	if (isServer && compute().style === void 0) return void 0;
+	return () => compute().style;
 };
-const buildRuntimeStylesProcessor = (runtimeStylesFn, parentRuntimeStylesFn) => {
-	if (runtimeStylesFn && parentRuntimeStylesFn) return Object.assign((props, classes, style) => {
-		parentRuntimeStylesFn(props, classes, style);
-		runtimeStylesFn(props, classes, style);
-	}, { $dynamic: runtimeStylesFn.$dynamic || parentRuntimeStylesFn.$dynamic });
-	return runtimeStylesFn || parentRuntimeStylesFn;
+const proxyProps = (props, meta) => {
+	const { skip, compute, classOf } = meta;
+	const attrsProps = () => meta.attrsAddKeys ? meta.compute().attrs : void 0;
+	const classFn = compute ? () => compute().class : () => classOf(props);
+	const styleFn = styleGetter(compute);
+	const contributed = (key) => key === "class" ? classFn : key === "style" ? styleFn : void 0;
+	const fromAttrs = (key) => {
+		const attrs = attrsProps();
+		return attrs && key in attrs ? attrs : void 0;
+	};
+	return new Proxy(props, {
+		get(target, key, receiver) {
+			if (key === $PROXY) return receiver;
+			const getter = contributed(key);
+			if (getter) return getter();
+			if (skip(key)) return void 0;
+			const attrs = fromAttrs(key);
+			return attrs ? attrs[key] : Reflect.get(target, key);
+		},
+		has(target, key) {
+			if (key === $PROXY) return true;
+			if (contributed(key)) return true;
+			if (skip(key)) return false;
+			return Reflect.has(target, key) || fromAttrs(key) !== void 0;
+		},
+		ownKeys(target) {
+			const keys = /* @__PURE__ */ new Set();
+			for (const key of Reflect.ownKeys(target)) if (!skip(key)) keys.add(key);
+			for (const key of Object.keys(attrsProps() ?? {})) if (!skip(key)) keys.add(key);
+			keys.add("class");
+			if (styleFn) keys.add("style");
+			return [...keys];
+		},
+		getOwnPropertyDescriptor(target, key) {
+			const getter = contributed(key);
+			if (getter) return {
+				enumerable: true,
+				configurable: true,
+				get: getter
+			};
+			if (skip(key)) return void 0;
+			if (fromAttrs(key)) return {
+				enumerable: true,
+				configurable: true,
+				get: () => attrsProps()?.[key]
+			};
+			return Reflect.getOwnPropertyDescriptor(target, key);
+		}
+	});
 };
 
 //#endregion
@@ -200,9 +493,10 @@ const atoms = (...atoms) => {
 	const dynamicFunctions = [];
 	for (const atom of atoms) if (typeof atom === "string") staticClasses.push(...atom.split(" "));
 	else if (typeof atom === "function") dynamicFunctions.push(atom);
-	return css(...staticClasses.length > 0 ? [(_, classes) => {
-		staticClasses.forEach((cls) => classes.add(cls));
-	}, ...dynamicFunctions] : dynamicFunctions);
+	const runtimeFunctions = staticClasses.length > 0 ? [(_, classes) => {
+		staticClasses.forEach((cls) => classes.add(cls, false));
+	}, ...dynamicFunctions] : dynamicFunctions;
+	return css(...runtimeFunctions);
 };
 
 //#endregion
@@ -228,17 +522,49 @@ const unitPostFix = (arg, unit) => {
 
 //#endregion
 //#region runtime/internals/mergeCssProp.ts
-const mergeCssProp = (relevantProps, cssProp) => {
-	const classes = new Classes(relevantProps.class);
-	const existingStyle = relevantProps.style;
-	const style = existingStyle ? { ...existingStyle } : {};
-	if (cssProp) cssProp({}, classes, style);
-	const result = { ...relevantProps };
-	if (Object.keys(style).length > 0) result.style = style;
-	else delete result.style;
-	if (classes.value) result.class = classes.value;
-	else delete result.class;
-	return result;
+const lastWith = (sources, key) => {
+	for (let index = sources.length - 1; index >= 0; index--) if (key in sources[index]) return sources[index];
+};
+const mergeCssProp = (cssProp, ...sources) => {
+	const present = sources.filter((source) => source != null);
+	const out = {};
+	for (const source of present) for (const key of Reflect.ownKeys(source)) {
+		if (key === "class" || key === "style") continue;
+		const descriptor = Reflect.getOwnPropertyDescriptor(source, key);
+		if (descriptor.get || descriptor.set || !descriptor.enumerable) Object.defineProperty(out, key, descriptor);
+		else out[key] = descriptor.value;
+	}
+	const classOwner = lastWith(present, "class");
+	const styleOwner = lastWith(present, "style");
+	const mergedClass = () => {
+		const classes = new Classes(normalizeClass(classOwner?.class));
+		if (cssProp) cssProp({}, classes, {});
+		return classes.value || void 0;
+	};
+	const mergedStyle = () => {
+		const base = styleOwner?.style;
+		const style = base ? { ...base } : {};
+		if (cssProp) cssProp({}, new Classes(), style);
+		for (const _ in style) return style;
+	};
+	if (isServer) {
+		const className = mergedClass();
+		if (className !== void 0) out.class = className;
+		const style = mergedStyle();
+		if (style !== void 0) out.style = style;
+		return out;
+	}
+	if (cssProp || classOwner) Object.defineProperty(out, "class", {
+		get: mergedClass,
+		enumerable: true,
+		configurable: true
+	});
+	if (cssProp || styleOwner) Object.defineProperty(out, "style", {
+		get: mergedStyle,
+		enumerable: true,
+		configurable: true
+	});
+	return out;
 };
 
 //#endregion