@yahoo/uds-v5-wip 0.0.1

package/dist/loader/dist/loader/style-transform.js

@@ -0,0 +1,670 @@
+import { applyComponentStyleDefaults } from "../../../utils/dist/component-style-defaults.js";
+import { kebabCase } from "../../../utils/dist/string-utils/kebabCase.js";
+import { componentVariantClass } from "../../../utils/dist/string-utils/componentClassName.js";
+import "../../../utils/dist/index.js";
+import { expandMacros } from "../packages/core/dist/macros.js";
+import { colorPropToOpacityProp, propMappings } from "../packages/core/dist/propMappings.js";
+import { toCamelCase } from "../packages/core/dist/getStyles.js";
+import "../packages/core/dist/index.js";
+import { buildDynamicClassExpression, parseHandlerString } from "./dynamic-style-codegen.js";
+import * as t from "@babel/types";
+//#region ../loader/dist/loader/style-transform.js
+const parseClassToken = (prefix, value) => {
+	if (value === "") return prefix;
+	return (prefix === value ? String(value) : `${prefix}-${value}`).replace(/[./]/g, "_");
+};
+function parseStaticExpression(expression) {
+	if (t.isStringLiteral(expression)) return expression.value;
+	if (t.isNumericLiteral(expression)) return expression.value;
+	if (t.isBooleanLiteral(expression)) return expression.value;
+	if (t.isNullLiteral(expression)) return null;
+	if (t.isTemplateLiteral(expression) && expression.expressions.length === 0 && expression.quasis.length === 1) return expression.quasis[0]?.value.cooked ?? "";
+	if (t.isUnaryExpression(expression) && expression.operator === "-" && t.isNumericLiteral(expression.argument)) return -expression.argument.value;
+	if (t.isObjectExpression(expression)) {
+		const result = {};
+		for (const property of expression.properties) {
+			if (!t.isObjectProperty(property) || property.computed) return;
+			const key = t.isIdentifier(property.key) ? property.key.name : t.isStringLiteral(property.key) ? property.key.value : void 0;
+			if (!key || !t.isExpression(property.value)) return;
+			const parsedValue = parseStaticExpression(property.value);
+			if (parsedValue === void 0) return void 0;
+			result[key] = parsedValue;
+		}
+		return result;
+	}
+}
+function parseStaticJsxAttributeValue(attribute) {
+	if (!attribute.value) return true;
+	if (t.isStringLiteral(attribute.value)) return attribute.value.value;
+	if (t.isJSXExpressionContainer(attribute.value) && !t.isJSXEmptyExpression(attribute.value.expression)) return parseStaticExpression(attribute.value.expression);
+}
+/**
+* Extract the dynamic expression from a JSX attribute value.
+* Returns null if the attribute is static (handled by parseStaticJsxAttributeValue).
+*/
+function getDynamicJsxAttributeExpression(attribute) {
+	if (!attribute.value) return null;
+	if (t.isStringLiteral(attribute.value)) return null;
+	if (t.isJSXExpressionContainer(attribute.value) && !t.isJSXEmptyExpression(attribute.value.expression)) {
+		const expr = attribute.value.expression;
+		if (parseStaticExpression(expr) !== void 0) return null;
+		return expr;
+	}
+	return null;
+}
+/**
+* Try to compile a conditional/logical expression where all branches are
+* statically resolvable. Returns a clean ternary/logical with pre-compiled
+* class names, or null if not all branches are static.
+*
+* e.g. `color={isActive ? 'on-primary' : 'on-secondary'}`
+*  → `isActive ? 'color-on-primary' : 'color-on-secondary'`
+*/
+function tryCompileStaticBranchExpression(expr, handler, modifierPrefix) {
+	if (t.isConditionalExpression(expr)) {
+		const consequentValue = parseStaticExpression(expr.consequent);
+		const alternateValue = parseStaticExpression(expr.alternate);
+		if (consequentValue !== void 0 && alternateValue !== void 0) {
+			const consequentClass = String(handler(consequentValue));
+			const alternateClass = String(handler(alternateValue));
+			const fullConsequent = modifierPrefix ? `${modifierPrefix}${consequentClass}` : consequentClass;
+			const fullAlternate = modifierPrefix ? `${modifierPrefix}${alternateClass}` : alternateClass;
+			return t.conditionalExpression(t.cloneNode(expr.test), t.stringLiteral(fullConsequent), t.stringLiteral(fullAlternate));
+		}
+		const compiledConsequent = consequentValue !== void 0 ? t.stringLiteral(modifierPrefix ? `${modifierPrefix}${String(handler(consequentValue))}` : String(handler(consequentValue))) : tryCompileStaticBranchExpression(expr.consequent, handler, modifierPrefix);
+		const compiledAlternate = alternateValue !== void 0 ? t.stringLiteral(modifierPrefix ? `${modifierPrefix}${String(handler(alternateValue))}` : String(handler(alternateValue))) : tryCompileStaticBranchExpression(expr.alternate, handler, modifierPrefix);
+		if (compiledConsequent && compiledAlternate) return t.conditionalExpression(t.cloneNode(expr.test), compiledConsequent, compiledAlternate);
+	}
+	if (t.isLogicalExpression(expr) && expr.operator === "&&") {
+		const rightValue = parseStaticExpression(expr.right);
+		if (rightValue !== void 0) {
+			const rightClass = String(handler(rightValue));
+			const fullRight = modifierPrefix ? `${modifierPrefix}${rightClass}` : rightClass;
+			return t.logicalExpression("&&", t.cloneNode(expr.left), t.stringLiteral(fullRight));
+		}
+	}
+	return null;
+}
+function buildClassJoinExpression(parts) {
+	return t.callExpression(t.memberExpression(t.callExpression(t.memberExpression(t.arrayExpression(parts), t.identifier("filter")), [t.identifier("Boolean")]), t.identifier("join")), [t.stringLiteral(" ")]);
+}
+function getStaticMemberKey(node) {
+	if (!node.computed) {
+		if (t.isIdentifier(node.property)) return node.property.name;
+		if (t.isStringLiteral(node.property)) return node.property.value;
+		return null;
+	}
+	if (t.isStringLiteral(node.property)) return node.property.value;
+	if (t.isNumericLiteral(node.property)) return String(node.property.value);
+	if (t.isTemplateLiteral(node.property) && node.property.expressions.length === 0 && node.property.quasis.length === 1) return node.property.quasis[0]?.value.cooked ?? "";
+	return null;
+}
+function getStaticObjectPropertyKey(property) {
+	if (property.computed) return null;
+	if (t.isIdentifier(property.key)) return property.key.name;
+	if (t.isStringLiteral(property.key)) return property.key.value;
+	return null;
+}
+function upsertClassNameAttribute(attributes, classExpression) {
+	const classAttr = attributes.find((attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === "className");
+	if (!classAttr) {
+		attributes.push(t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(classExpression)));
+		return;
+	}
+	let existingExpression = null;
+	if (!classAttr.value) existingExpression = t.booleanLiteral(true);
+	else if (t.isStringLiteral(classAttr.value)) existingExpression = t.stringLiteral(classAttr.value.value);
+	else if (t.isJSXExpressionContainer(classAttr.value) && !t.isJSXEmptyExpression(classAttr.value.expression)) existingExpression = classAttr.value.expression;
+	const nextExpression = existingExpression ? buildClassJoinExpression([existingExpression, classExpression]) : classExpression;
+	classAttr.value = t.jsxExpressionContainer(nextExpression);
+}
+function createStyleTransformRuntime(transformData, manifest) {
+	const manifestAllComponents = manifest ? Object.keys(manifest.components) : [];
+	const manifestPrimitiveComponents = manifest ? Object.entries(manifest.components).filter(([, entry]) => entry.type === "primitive").map(([name]) => name) : [];
+	const allComponents = new Set([...transformData?.allComponents ?? [], ...manifestAllComponents]);
+	const primitiveComponents = new Set([...transformData?.primitiveComponents ?? [], ...manifestPrimitiveComponents]);
+	const componentTagPatterns = [...allComponents].flatMap((name) => [`<${name}`, `(${name},`]);
+	const safeStyleProps = transformData?.safeStyleProps ?? transformData?.styleAndModifierProps ?? [];
+	const styleAndModifierPropSet = new Set(safeStyleProps);
+	const classnamesMap = transformData?.classnamesMap ?? {};
+	const modifiersTwMap = transformData?.modifiersTwMap ?? {};
+	const stylePropHandlerMap = {};
+	const parsedHandlerCache = /* @__PURE__ */ new Map();
+	for (const [key, fnBody] of Object.entries(classnamesMap)) stylePropHandlerMap[key] = new Function("parse", `return ${fnBody}`)(parseClassToken);
+	function getParsedHandler(propName) {
+		if (parsedHandlerCache.has(propName)) return parsedHandlerCache.get(propName) ?? null;
+		const handlerStr = classnamesMap[propName];
+		if (!handlerStr) {
+			parsedHandlerCache.set(propName, null);
+			return null;
+		}
+		const parsed = parseHandlerString(handlerStr);
+		parsedHandlerCache.set(propName, parsed);
+		return parsed;
+	}
+	const componentClassDataMap = transformData?.componentClassData;
+	function getComponentVariantData(componentName) {
+		const data = componentClassDataMap?.[componentName];
+		if (!data) return null;
+		const hasVariants = data.variantClassNames && Object.keys(data.variantClassNames).length > 0;
+		const hasDefaults = data.defaultVariants && Object.keys(data.defaultVariants).length > 0;
+		if (!hasVariants && !hasDefaults) return null;
+		return data;
+	}
+	function isStyleLikeProp(propName) {
+		return styleAndModifierPropSet.has(propName) || propName.startsWith("_");
+	}
+	function compileStyleClassName(styleProps, modifierPrefix = "") {
+		const macroConf = transformData?.macroConfig ?? {};
+		let effectiveProps = styleProps;
+		if (Object.keys(macroConf).length > 0 && !modifierPrefix) {
+			const { expanded, markerClasses } = expandMacros(styleProps, macroConf);
+			effectiveProps = expanded;
+			if (markerClasses.length > 0) effectiveProps.__macroMarkers = markerClasses;
+		}
+		for (const [colorProp, opacityPropName] of Object.entries(colorPropToOpacityProp)) if (effectiveProps[opacityPropName] !== void 0 && effectiveProps[colorProp] !== void 0) {
+			effectiveProps[colorProp] = `${effectiveProps[colorProp]}/${effectiveProps[opacityPropName]}`;
+			delete effectiveProps[opacityPropName];
+		}
+		const classParts = [];
+		if (Array.isArray(effectiveProps.__macroMarkers)) {
+			classParts.push(...effectiveProps.__macroMarkers);
+			delete effectiveProps.__macroMarkers;
+		}
+		for (const key in effectiveProps) {
+			if (!Object.hasOwn(effectiveProps, key)) continue;
+			const value = effectiveProps[key];
+			if (value === void 0) continue;
+			const builtInModifier = modifiersTwMap[key];
+			if (builtInModifier) {
+				if (value && typeof value === "object" && !Array.isArray(value)) {
+					const nested = compileStyleClassName(value, `${modifierPrefix}${builtInModifier}`);
+					if (nested) classParts.push(nested);
+				}
+				continue;
+			}
+			if (key.startsWith("_")) {
+				if (value && typeof value === "object" && !Array.isArray(value)) {
+					const nested = compileStyleClassName(value, `${modifierPrefix}${key.slice(1)}:`);
+					if (nested) classParts.push(nested);
+				}
+				continue;
+			}
+			const handler = stylePropHandlerMap[key];
+			if (!handler) continue;
+			const token = String(handler(value));
+			if (!token) continue;
+			classParts.push(modifierPrefix ? `${modifierPrefix}${token}` : token);
+		}
+		return classParts.join(" ");
+	}
+	function extractVariantClassMapFromCreateVariantsCall(callExpression) {
+		const firstArg = callExpression.arguments[0];
+		if (!firstArg || !t.isObjectExpression(firstArg)) return null;
+		const result = {};
+		for (const property of firstArg.properties) {
+			if (!t.isObjectProperty(property) || property.computed) return null;
+			const key = t.isIdentifier(property.key) ? property.key.name : t.isStringLiteral(property.key) ? property.key.value : null;
+			if (!key || !t.isExpression(property.value)) return null;
+			const parsedStyleProps = parseStaticExpression(property.value);
+			if (!parsedStyleProps || typeof parsedStyleProps !== "object" || Array.isArray(parsedStyleProps)) return null;
+			result[key] = compileStyleClassName(parsedStyleProps);
+		}
+		return result;
+	}
+	/**
+	* Build a dynamic class expression for a modifier object with mixed
+	* static/dynamic values. For example: `_hover={{ bg: someVar, color: 'red' }}`
+	*
+	* Static properties are compiled normally. Dynamic properties get inline
+	* expressions via the codegen module.
+	*/
+	function buildMixedModifierObjectExpression(objectExpr, modifierPrefix) {
+		const staticProps = {};
+		const dynamicExpressions = [];
+		let hasDynamic = false;
+		for (const property of objectExpr.properties) {
+			if (!t.isObjectProperty(property) || property.computed) return null;
+			const key = t.isIdentifier(property.key) ? property.key.name : t.isStringLiteral(property.key) ? property.key.value : null;
+			if (!key || !t.isExpression(property.value)) return null;
+			const nestedModifier = modifiersTwMap[key];
+			if (nestedModifier) {
+				const nestedPrefix = `${modifierPrefix}${nestedModifier}`;
+				if (t.isObjectExpression(property.value)) {
+					const nested = buildMixedModifierObjectExpression(property.value, nestedPrefix);
+					if (nested) {
+						Object.assign(staticProps, nested.staticProps);
+						dynamicExpressions.push(...nested.dynamicExpressions);
+						if (nested.dynamicExpressions.length > 0) hasDynamic = true;
+					}
+				}
+				continue;
+			}
+			if (key.startsWith("_")) {
+				const customModifierPrefix = `${modifierPrefix}${key.slice(1)}:`;
+				if (t.isObjectExpression(property.value)) {
+					const nested = buildMixedModifierObjectExpression(property.value, customModifierPrefix);
+					if (nested) {
+						Object.assign(staticProps, nested.staticProps);
+						dynamicExpressions.push(...nested.dynamicExpressions);
+						if (nested.dynamicExpressions.length > 0) hasDynamic = true;
+					}
+				}
+				continue;
+			}
+			if (!isStyleLikeProp(key)) continue;
+			const parsedValue = parseStaticExpression(property.value);
+			if (parsedValue !== void 0) {
+				const handler = stylePropHandlerMap[key];
+				if (handler) {
+					const token = String(handler(parsedValue));
+					if (token) {
+						const fullToken = modifierPrefix ? `${modifierPrefix}${token}` : token;
+						staticProps[`__compiled_${modifierPrefix}${key}`] = fullToken;
+					}
+				}
+			} else {
+				const handler = stylePropHandlerMap[key];
+				if (handler) {
+					const staticBranchExpr = tryCompileStaticBranchExpression(property.value, handler, modifierPrefix);
+					if (staticBranchExpr) {
+						dynamicExpressions.push(staticBranchExpr);
+						hasDynamic = true;
+						continue;
+					}
+				}
+				const parsedHandler = getParsedHandler(key);
+				if (parsedHandler) {
+					dynamicExpressions.push(buildDynamicClassExpression(parsedHandler, property.value, modifierPrefix));
+					hasDynamic = true;
+				}
+			}
+		}
+		return hasDynamic || Object.keys(staticProps).length > 0 ? {
+			staticProps,
+			dynamicExpressions
+		} : null;
+	}
+	/**
+	* Build a className expression for a non-root slot with dynamic variant lookups.
+	* Produces a template literal like `${lookupA[expr] || ""} ${lookupB[expr] || ""}`.
+	* If a static prefix is provided, it is prepended.
+	*/
+	function buildSlotDynamicClassName(dynamicExprs, staticPrefix) {
+		if (dynamicExprs.length === 1 && !staticPrefix) return dynamicExprs[0];
+		const quasis = [];
+		const expressions = [];
+		const prefix = staticPrefix ? `${staticPrefix} ` : "";
+		quasis.push(t.templateElement({
+			raw: prefix,
+			cooked: prefix
+		}, false));
+		for (let i = 0; i < dynamicExprs.length; i++) {
+			expressions.push(dynamicExprs[i]);
+			const isLast = i === dynamicExprs.length - 1;
+			const suffix = isLast ? "" : " ";
+			quasis.push(t.templateElement({
+				raw: suffix,
+				cooked: suffix
+			}, isLast));
+		}
+		return t.templateLiteral(quasis, expressions);
+	}
+	/**
+	* Collect variant classes for all slots from a slot map.
+	* Root classes go to classExpressionParts; non-root go to slotVariantClasses.
+	*/
+	function collectAllSlotVariantClasses(ctx, slotMap) {
+		for (const [slot, className] of Object.entries(slotMap)) if (slot === "root") ctx.classExpressionParts.push(t.stringLiteral(className));
+		else {
+			ctx.slotVariantClasses[slot] ??= [];
+			ctx.slotVariantClasses[slot].push(className);
+		}
+	}
+	/**
+	* Derive the set of slots that participate in a variant axis by inspecting
+	* the existing variant class name map. Falls back to just 'root' when the
+	* axis has no known values yet (e.g. entirely new axis).
+	*/
+	function deriveSlotsFromAxis(variantClassMap) {
+		const slots = /* @__PURE__ */ new Set();
+		for (const slotMap of Object.values(variantClassMap)) for (const slot of Object.keys(slotMap)) slots.add(slot);
+		return slots.size > 0 ? [...slots] : ["root"];
+	}
+	/**
+	* Process a single prop (variant or style) and accumulate results into ctx.
+	* Returns true if the prop was consumed and should be removed.
+	*/
+	function processComponentProp(ctx, key, staticValue, dynamicExpr, modifierObjectExpr) {
+		if (ctx.variantAxes?.has(key)) {
+			const variantClassMap = ctx.variantData?.variantClassNames[key];
+			if (staticValue !== void 0 && typeof staticValue === "string" && variantClassMap) {
+				const slotMap = variantClassMap[staticValue];
+				if (slotMap) collectAllSlotVariantClasses(ctx, slotMap);
+				else {
+					const slotsForAxis = deriveSlotsFromAxis(variantClassMap);
+					for (const slot of slotsForAxis) {
+						const className = componentVariantClass(ctx.componentName, slot, key, staticValue);
+						if (slot === "root") ctx.classExpressionParts.push(t.stringLiteral(className));
+						else {
+							ctx.slotVariantClasses[slot] ??= [];
+							ctx.slotVariantClasses[slot].push(className);
+						}
+					}
+				}
+				ctx.resolvedVariantAxes.add(key);
+				return true;
+			}
+			if (variantClassMap && dynamicExpr && ctx.hoistedVariantClassMapNames && ctx.hoistedVariantClassMaps) {
+				const slotLookups = {};
+				for (const [value, slotMap] of Object.entries(variantClassMap)) for (const [slot, className] of Object.entries(slotMap)) {
+					slotLookups[slot] ??= {};
+					slotLookups[slot][value] = className;
+				}
+				if (Object.keys(slotLookups).length > 0) {
+					for (const [slot, lookup] of Object.entries(slotLookups)) {
+						const lookupKey = `__uds_${ctx.componentName}_${key}_${slot}`;
+						let hoistedName = ctx.hoistedVariantClassMapNames.get(lookupKey);
+						if (!hoistedName) {
+							hoistedName = lookupKey;
+							ctx.hoistedVariantClassMapNames.set(lookupKey, hoistedName);
+							ctx.hoistedVariantClassMaps.set(hoistedName, lookup);
+						}
+						const classPrefix = `${kebabCase(ctx.componentName)}-${slot}--${key}-`;
+						const fallbackExpr = t.templateLiteral([t.templateElement({
+							raw: classPrefix,
+							cooked: classPrefix
+						}, false), t.templateElement({
+							raw: "",
+							cooked: ""
+						}, true)], [t.cloneNode(dynamicExpr)]);
+						const lookupExpr = t.logicalExpression("||", t.memberExpression(t.identifier(hoistedName), t.cloneNode(dynamicExpr), true), fallbackExpr);
+						if (slot === "root") ctx.classExpressionParts.push(lookupExpr);
+						else {
+							ctx.dynamicSlotExprs[slot] ??= [];
+							ctx.dynamicSlotExprs[slot].push(lookupExpr);
+						}
+					}
+					ctx.resolvedVariantAxes.add(key);
+					return true;
+				}
+			}
+		}
+		if (!isStyleLikeProp(key)) return false;
+		if (staticValue !== void 0) {
+			if (typeof staticValue === "string" && /^\[.+\](?:\/\d+)?$/.test(staticValue)) {
+				const mapping = propMappings[key];
+				if (mapping) {
+					const rawValue = staticValue.slice(1, staticValue.lastIndexOf("]"));
+					if (mapping.arbitraryValueTemplate) {
+						const { cssProperty, valueTemplate } = mapping.arbitraryValueTemplate;
+						ctx.arbitraryInlineStyleProps[toCamelCase(cssProperty)] = valueTemplate.replace("%s", rawValue);
+						return true;
+					}
+					if (mapping.cssProperty) {
+						ctx.arbitraryInlineStyleProps[toCamelCase(mapping.cssProperty)] = rawValue;
+						return true;
+					}
+				}
+			}
+			ctx.staticStyleProps[key] = staticValue;
+			return true;
+		}
+		if (!key.startsWith("_") && dynamicExpr) {
+			const handler = stylePropHandlerMap[key];
+			if (handler) {
+				const staticBranchExpr = tryCompileStaticBranchExpression(dynamicExpr, handler);
+				if (staticBranchExpr) {
+					ctx.classExpressionParts.push(staticBranchExpr);
+					return true;
+				}
+			}
+			const parsedHandler = getParsedHandler(key);
+			if (parsedHandler) {
+				ctx.classExpressionParts.push(buildDynamicClassExpression(parsedHandler, dynamicExpr));
+				return true;
+			}
+		}
+		if (key.startsWith("_") && modifierObjectExpr) {
+			const result = buildMixedModifierObjectExpression(modifierObjectExpr, modifiersTwMap[key] || `${key.slice(1)}:`);
+			if (result) {
+				for (const value of Object.values(result.staticProps)) if (typeof value === "string") ctx.classExpressionParts.push(t.stringLiteral(value));
+				ctx.classExpressionParts.push(...result.dynamicExpressions);
+				return true;
+			}
+		}
+		return false;
+	}
+	/**
+	* Apply default variant classes and compile static style props into the
+	* final class expression. Returns null if no classes were generated.
+	*/
+	function finalizeStyleClassParts(ctx) {
+		if (ctx.variantData?.defaultVariants && ctx.variantData.variantClassNames) for (const [axis, defaultValue] of Object.entries(ctx.variantData.defaultVariants)) {
+			if (ctx.resolvedVariantAxes.has(axis)) continue;
+			const variantClassMap = ctx.variantData.variantClassNames[axis];
+			if (!variantClassMap) continue;
+			const slotMap = variantClassMap[defaultValue];
+			if (slotMap) collectAllSlotVariantClasses(ctx, slotMap);
+		}
+		const staticClassName = compileStyleClassName(applyComponentStyleDefaults(ctx.componentName, ctx.staticStyleProps));
+		if (staticClassName) ctx.classExpressionParts.unshift(t.stringLiteral(staticClassName));
+		if (ctx.classExpressionParts.length === 0) return null;
+		return ctx.classExpressionParts.length === 1 ? ctx.classExpressionParts[0] : buildClassJoinExpression(ctx.classExpressionParts);
+	}
+	function transformUdsComponentStyleProps(nodePath, createVariantsClassMaps, hoistedVariantClassMapNames, hoistedVariantClassMaps) {
+		const openingElement = nodePath.node;
+		if (!t.isJSXIdentifier(openingElement.name)) return false;
+		const componentName = openingElement.name.name;
+		if (!allComponents.has(componentName)) return false;
+		const attributes = openingElement.attributes;
+		const removeIndices = [];
+		const variantData = getComponentVariantData(componentName);
+		const ctx = {
+			componentName,
+			variantData,
+			variantAxes: variantData?.variantClassNames ? new Set(Object.keys(variantData.variantClassNames)) : null,
+			resolvedVariantAxes: /* @__PURE__ */ new Set(),
+			staticStyleProps: {},
+			classExpressionParts: [],
+			slotVariantClasses: {},
+			dynamicSlotExprs: {},
+			arbitraryInlineStyleProps: {},
+			hoistedVariantClassMapNames,
+			hoistedVariantClassMaps
+		};
+		for (const [index, attribute] of attributes.entries()) {
+			if (t.isJSXAttribute(attribute) && t.isJSXIdentifier(attribute.name)) {
+				const attrName = attribute.name.name;
+				if (attrName === "className") continue;
+				const staticValue = parseStaticJsxAttributeValue(attribute);
+				const dynamicExpr = getDynamicJsxAttributeExpression(attribute);
+				let modifierObjectExpr = null;
+				if (attribute.value && t.isJSXExpressionContainer(attribute.value) && !t.isJSXEmptyExpression(attribute.value.expression) && t.isObjectExpression(attribute.value.expression)) modifierObjectExpr = attribute.value.expression;
+				if (processComponentProp(ctx, attrName, staticValue, dynamicExpr, modifierObjectExpr)) removeIndices.push(index);
+				continue;
+			}
+			if (t.isJSXSpreadAttribute(attribute) && t.isMemberExpression(attribute.argument) && t.isIdentifier(attribute.argument.object)) {
+				const variantVarName = attribute.argument.object.name;
+				const classMap = createVariantsClassMaps.get(variantVarName);
+				if (!classMap) continue;
+				removeIndices.push(index);
+				const staticKey = getStaticMemberKey(attribute.argument);
+				if (staticKey !== null) {
+					const staticClassName = classMap[staticKey];
+					if (staticClassName) ctx.classExpressionParts.push(t.stringLiteral(staticClassName));
+					continue;
+				}
+				const keyExpression = attribute.argument.computed ? attribute.argument.property : t.stringLiteral(t.isIdentifier(attribute.argument.property) ? attribute.argument.property.name : "");
+				let hoistedName = hoistedVariantClassMapNames.get(variantVarName);
+				if (!hoistedName) {
+					hoistedName = `__uds_${variantVarName}_classMap`;
+					hoistedVariantClassMapNames.set(variantVarName, hoistedName);
+					hoistedVariantClassMaps.set(hoistedName, classMap);
+				}
+				ctx.classExpressionParts.push(t.logicalExpression("||", t.memberExpression(t.identifier(hoistedName), keyExpression, true), t.stringLiteral("")));
+				continue;
+			}
+			if (t.isJSXSpreadAttribute(attribute) && t.isObjectExpression(attribute.argument)) {
+				const remainingProperties = [];
+				let consumedStyleProps = false;
+				for (const property of attribute.argument.properties) {
+					if (!t.isObjectProperty(property)) {
+						remainingProperties.push(property);
+						continue;
+					}
+					const key = getStaticObjectPropertyKey(property);
+					if (!key || !isStyleLikeProp(key) || !t.isExpression(property.value)) {
+						remainingProperties.push(property);
+						continue;
+					}
+					const parsedValue = parseStaticExpression(property.value);
+					if (parsedValue === void 0) {
+						remainingProperties.push(property);
+						continue;
+					}
+					ctx.staticStyleProps[key] = parsedValue;
+					consumedStyleProps = true;
+				}
+				if (!consumedStyleProps) continue;
+				if (remainingProperties.length === 0) removeIndices.push(index);
+				else if (remainingProperties.every((p) => t.isObjectProperty(p) && !p.computed && (t.isIdentifier(p.key) || t.isStringLiteral(p.key)))) {
+					const flatAttrs = remainingProperties.map((p) => {
+						const key = t.isIdentifier(p.key) ? p.key.name : p.key.value;
+						const value = t.isExpression(p.value) ? t.isStringLiteral(p.value) ? t.stringLiteral(p.value.value) : t.jsxExpressionContainer(t.cloneNode(p.value, true, true)) : null;
+						return t.jsxAttribute(t.jsxIdentifier(key), value);
+					});
+					attributes.splice(index, 1, ...flatAttrs);
+				} else attributes[index] = t.jsxSpreadAttribute(t.objectExpression(remainingProperties));
+			}
+		}
+		const mergedExpression = finalizeStyleClassParts(ctx);
+		const hasSlotClasses = Object.keys(ctx.slotVariantClasses).length > 0;
+		const hasDynamicSlotExprs = Object.keys(ctx.dynamicSlotExprs).length > 0;
+		const hasArbitraryInlineStyles = Object.keys(ctx.arbitraryInlineStyleProps).length > 0;
+		if (!mergedExpression && !hasSlotClasses && !hasDynamicSlotExprs && !hasArbitraryInlineStyles) return false;
+		removeIndices.sort((a, b) => b - a).forEach((index) => {
+			attributes.splice(index, 1);
+		});
+		if (mergedExpression) upsertClassNameAttribute(attributes, mergedExpression);
+		const allSlots = new Set([...Object.keys(ctx.slotVariantClasses), ...Object.keys(ctx.dynamicSlotExprs)]);
+		if (allSlots.size > 0) for (const slot of allSlots) {
+			const staticClasses = ctx.slotVariantClasses[slot];
+			const dynamicExprs = ctx.dynamicSlotExprs[slot];
+			let classNameExpr;
+			if (staticClasses && !dynamicExprs) classNameExpr = t.stringLiteral(staticClasses.join(" "));
+			else if (!staticClasses && dynamicExprs) classNameExpr = buildSlotDynamicClassName(dynamicExprs);
+			else if (staticClasses && dynamicExprs) classNameExpr = buildSlotDynamicClassName(dynamicExprs, staticClasses.join(" "));
+			else continue;
+			attributes.push(t.jsxAttribute(t.jsxIdentifier(`_${slot}`), t.jsxExpressionContainer(t.objectExpression([t.objectProperty(t.identifier("className"), classNameExpr)]))));
+		}
+		if (hasArbitraryInlineStyles) {
+			const inlineStyleProperties = Object.entries(ctx.arbitraryInlineStyleProps).map(([cssProp, cssVal]) => t.objectProperty(t.identifier(cssProp), t.stringLiteral(cssVal)));
+			const existingStyleAttr = attributes.find((attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === "style");
+			if (existingStyleAttr) {
+				let existingStyleExpr = null;
+				if (t.isJSXExpressionContainer(existingStyleAttr.value) && !t.isJSXEmptyExpression(existingStyleAttr.value.expression)) existingStyleExpr = existingStyleAttr.value.expression;
+				const mergedStyleExpr = existingStyleExpr ? t.objectExpression([t.spreadElement(existingStyleExpr), ...inlineStyleProperties]) : t.objectExpression(inlineStyleProperties);
+				existingStyleAttr.value = t.jsxExpressionContainer(mergedStyleExpr);
+			} else attributes.push(t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(t.objectExpression(inlineStyleProperties))));
+		}
+		return true;
+	}
+	/**
+	* Transform style props in compiled JSX calls like:
+	*   _jsx(Box, { display: "flex", flexDirection: "col", ...rest, children })
+	*
+	* Extracts style props from the ObjectExpression, compiles them to className,
+	* and removes them from the props object.
+	*/
+	function transformCompiledJsxStyleProps(callExpression, hoistedVariantClassMapNames, hoistedVariantClassMaps) {
+		const callee = callExpression.callee;
+		if (!t.isIdentifier(callee)) return false;
+		if (callee.name !== "jsx" && callee.name !== "jsxs" && callee.name !== "jsxDEV" && callee.name !== "_jsx" && callee.name !== "_jsxs" && callee.name !== "_jsxDEV") return false;
+		const args = callExpression.arguments;
+		if (!args || args.length < 2) return false;
+		const firstArg = args[0];
+		if (!t.isIdentifier(firstArg)) return false;
+		if (!allComponents.has(firstArg.name)) return false;
+		const propsArg = args[1];
+		if (!t.isObjectExpression(propsArg)) return false;
+		const componentName = firstArg.name;
+		const removeIndices = [];
+		const variantData = getComponentVariantData(componentName);
+		const ctx = {
+			componentName,
+			variantData,
+			variantAxes: variantData?.variantClassNames ? new Set(Object.keys(variantData.variantClassNames)) : null,
+			resolvedVariantAxes: /* @__PURE__ */ new Set(),
+			staticStyleProps: {},
+			classExpressionParts: [],
+			slotVariantClasses: {},
+			dynamicSlotExprs: {},
+			arbitraryInlineStyleProps: {},
+			hoistedVariantClassMapNames,
+			hoistedVariantClassMaps
+		};
+		for (const [index, property] of propsArg.properties.entries()) {
+			if (!t.isObjectProperty(property)) continue;
+			if (property.computed) continue;
+			const key = t.isIdentifier(property.key) ? property.key.name : t.isStringLiteral(property.key) ? property.key.value : null;
+			if (!key) continue;
+			if (key === "className" || key === "children") continue;
+			if (!t.isExpression(property.value)) continue;
+			const staticValue = parseStaticExpression(property.value);
+			if (processComponentProp(ctx, key, staticValue, staticValue !== void 0 ? null : property.value, t.isObjectExpression(property.value) ? property.value : null)) removeIndices.push(index);
+		}
+		const mergedExpression = finalizeStyleClassParts(ctx);
+		const hasSlotClasses = Object.keys(ctx.slotVariantClasses).length > 0;
+		const hasDynSlotExprs = Object.keys(ctx.dynamicSlotExprs).length > 0;
+		const hasArbitraryInlineStyles = Object.keys(ctx.arbitraryInlineStyleProps).length > 0;
+		if (!mergedExpression && !hasSlotClasses && !hasDynSlotExprs && !hasArbitraryInlineStyles) return false;
+		removeIndices.sort((a, b) => b - a).forEach((index) => {
+			propsArg.properties.splice(index, 1);
+		});
+		if (mergedExpression) {
+			const existingClassNameIndex = propsArg.properties.findIndex((prop) => t.isObjectProperty(prop) && !prop.computed && (t.isIdentifier(prop.key) && prop.key.name === "className" || t.isStringLiteral(prop.key) && prop.key.value === "className"));
+			if (existingClassNameIndex === -1) {
+				const spreadClassNameExprs = [];
+				for (const prop of propsArg.properties) if (t.isSpreadElement(prop) && t.isIdentifier(prop.argument)) spreadClassNameExprs.push(t.optionalMemberExpression(t.identifier(prop.argument.name), t.identifier("className"), false, true));
+				const finalExpression = spreadClassNameExprs.length > 0 ? buildClassJoinExpression([...spreadClassNameExprs, mergedExpression]) : mergedExpression;
+				propsArg.properties.push(t.objectProperty(t.identifier("className"), finalExpression));
+			} else {
+				const existingProp = propsArg.properties[existingClassNameIndex];
+				const existingValue = existingProp.value;
+				existingProp.value = buildClassJoinExpression([existingValue, mergedExpression]);
+			}
+		}
+		const allCompiledSlots = new Set([...Object.keys(ctx.slotVariantClasses), ...Object.keys(ctx.dynamicSlotExprs)]);
+		if (allCompiledSlots.size > 0) for (const slot of allCompiledSlots) {
+			const staticClasses = ctx.slotVariantClasses[slot];
+			const dynamicExprs = ctx.dynamicSlotExprs[slot];
+			let classNameExpr;
+			if (staticClasses && !dynamicExprs) classNameExpr = t.stringLiteral(staticClasses.join(" "));
+			else if (!staticClasses && dynamicExprs) classNameExpr = buildSlotDynamicClassName(dynamicExprs);
+			else if (staticClasses && dynamicExprs) classNameExpr = buildSlotDynamicClassName(dynamicExprs, staticClasses.join(" "));
+			else continue;
+			propsArg.properties.push(t.objectProperty(t.stringLiteral(`_${slot}`), t.objectExpression([t.objectProperty(t.identifier("className"), classNameExpr)])));
+		}
+		if (hasArbitraryInlineStyles) {
+			const inlineStyleProperties = Object.entries(ctx.arbitraryInlineStyleProps).map(([cssProp, cssVal]) => t.objectProperty(t.identifier(cssProp), t.stringLiteral(cssVal)));
+			const existingStyleIndex = propsArg.properties.findIndex((prop) => t.isObjectProperty(prop) && !prop.computed && (t.isIdentifier(prop.key) && prop.key.name === "style" || t.isStringLiteral(prop.key) && prop.key.value === "style"));
+			if (existingStyleIndex !== -1) {
+				const existingStyleProp = propsArg.properties[existingStyleIndex];
+				const existingStyleValue = existingStyleProp.value;
+				existingStyleProp.value = t.objectExpression([t.spreadElement(existingStyleValue), ...inlineStyleProperties]);
+			} else propsArg.properties.push(t.objectProperty(t.identifier("style"), t.objectExpression(inlineStyleProperties)));
+		}
+		return true;
+	}
+	return {
+		allComponents,
+		primitiveComponents,
+		componentTagPatterns,
+		extractVariantClassMapFromCreateVariantsCall,
+		transformUdsComponentStyleProps,
+		transformCompiledJsxStyleProps
+	};
+}
+//#endregion
+export { createStyleTransformRuntime };

package/dist/loader/dist/loader.d.ts

@@ -0,0 +1,8 @@
+import { LoaderDefinitionFunction } from "webpack";
+
+//#region ../loader/dist/loader.d.ts
+//#region src/loader.d.ts
+declare const transformLoader: LoaderDefinitionFunction;
+declare const normal: LoaderDefinitionFunction<{}, {}>; //#endregion
+//#endregion
+export { normal, transformLoader };